5 Dicas rápidas de HTML. 
Autor: Jeorgea Scarlatt | Publicado: 2014-10-17T16:01:00-03:00









Olá pessoal , Hoje vim fazer um post especial para vocês que querem ' turbinar ' seu blog , por isto estou como algumas dicas de HTML ! vejam só :

1ª - JANELA POP UP DO FACEBOOK NA ENTRADA DO SEU BLOG










1) Entre no painel de controle do blog
2) Adicionar Gadget
3) HTML/Javascript
4) Copie e cóle o código abaixo

 



/*

ColorBox Core Style:

.

*/

#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}

#cboxOverlay{position:fixed; width:100%; height:100%;}

#cboxMiddleLeft, #cboxBottomLeft{clear:left;}

#cboxContent{position:relative;}

#cboxLoadedContent{overflow:auto;}

#cboxTitle{margin:0;}

#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}

#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}

.cboxPhoto{float:left; margin:auto; border:0; display:block;}

.cboxIframe{width:100%; height:100%; display:block; border:0;}

/*

User Style:

Change the following styles to modify the appearance of ColorBox. They are

ordered & tabbed in a way that represents the nesting of the generated HTML.

*/

#cboxOverlay{background:#000;opacity:0.5 !important;}

#colorbox{

box-shadow:0 0 15px rgba(0,0,0,0.4);

-moz-box-shadow:0 0 15px rgba(0,0,0,0.4);

-webkit-box-shadow:0 0 15px rgba(0,0,0,0.4);

}

#cboxTopLeft{width:14px; height:14px; background:url(http://1.bp.blogspot.com/-FiJ_Xz7txEg/Txrt0sy1TiI/AAAAAAAAFWk/Llzvkeyy_J8/s1600/controls.png) no-repeat 0 0;}

#cboxTopCenter{height:14px; background:url(http://1.bp.blogspot.com/-TcJGMnSfOCY/TxrtzzHDLVI/AAAAAAAAFWc/mdndgrisRuA/s1600/border.png) repeat-x top left;}

#cboxTopRight{width:14px; height:14px; background:url(http://1.bp.blogspot.com/-FiJ_Xz7txEg/Txrt0sy1TiI/AAAAAAAAFWk/Llzvkeyy_J8/s1600/controls.png) no-repeat -36px 0;}

#cboxBottomLeft{width:14px; height:43px; background:url(http://1.bp.blogspot.com/-FiJ_Xz7txEg/Txrt0sy1TiI/AAAAAAAAFWk/Llzvkeyy_J8/s1600/controls.png) no-repeat 0 -32px;}

#cboxBottomCenter{height:43px; background:url(http://1.bp.blogspot.com/-TcJGMnSfOCY/TxrtzzHDLVI/AAAAAAAAFWc/mdndgrisRuA/s1600/border.png) repeat-x bottom left;}

#cboxBottomRight{width:14px; height:43px; background:url(http://1.bp.blogspot.com/-FiJ_Xz7txEg/Txrt0sy1TiI/AAAAAAAAFWk/Llzvkeyy_J8/s1600/controls.png) no-repeat -36px -32px;}

#cboxMiddleLeft{width:14px; background:url(http://1.bp.blogspot.com/-FiJ_Xz7txEg/Txrt0sy1TiI/AAAAAAAAFWk/Llzvkeyy_J8/s1600/controls.png) repeat-y -175px 0;}

#cboxMiddleRight{width:14px; background:url(http://1.bp.blogspot.com/-FiJ_Xz7txEg/Txrt0sy1TiI/AAAAAAAAFWk/Llzvkeyy_J8/s1600/controls.png) repeat-y -211px 0;}

#cboxContent{background:#fff; overflow:visible;}

#cboxLoadedContent{margin-bottom:5px;}

#cboxLoadingOverlay{background:url(http://1.bp.blogspot.com/-PPvu-446sn4/Txrt1QsGH1I/AAAAAAAAFWw/_jWYVoR1HX8/s1600/loading-background.png) no-repeat center center;}

#cboxLoadingGraphic{background:url(http://1.bp.blogspot.com/-31strss_1-E/Txrt1J6NThI/AAAAAAAAFWo/4P12CJPj924/s1600/loading.gif) no-repeat center center;}

#cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#7C7C7C;}

#cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;}

#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{position:absolute; bottom:-29px; background:url(http://1.bp.blogspot.com/-FiJ_Xz7txEg/Txrt0sy1TiI/AAAAAAAAFWk/Llzvkeyy_J8/s1600/controls.png) no-repeat 0px 0px; width:23px; height:23px; text-indent:-9999px;}

#cboxPrevious{left:0px; background-position: -51px -25px;}

#cboxPrevious.hover{background-position:-51px 0px;}

#cboxNext{left:27px; background-position:-75px -25px;}

#cboxNext.hover{background-position:-75px 0px;}

#cboxClose{right:0; background-position:-100px -25px;}

#cboxClose.hover{background-position:-100px 0px;}

.cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px; right:27px;}

.cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px;}

.cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px; right:27px;}

.cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px;}

/*-----------------------------------------------------------------------------------*/

/* Facebook Likebox popup For Blogger

/*-----------------------------------------------------------------------------------*/

#subscribe {

font: 12px/1.2 Arial,Helvetica,san-serif; color:#666;

}

#subscribe a,

#subscribe a:hover,

#subscribe a:visited {

text-decoration:none;

}

.box-title {

color: #3B5998;

font-size: 20px !important;

font-weight: bold;

margin: 10px 0;

border:1px solid #ddd;

-moz-border-radius:6px;

-webkit-border-radius:6px;

border-radius:6px;

box-shadow: 5px 5px 5px #CCCCCC;

padding:10px;

line-height:25px; font-family:arial !important;

}

.box-tagline {

color: #999;

margin: 0;

text-align: center;

}

#subs-container {

padding: 35px 0 30px 0;

position: relative;

}

a:link, a:visited {

border:none;

}

.demo {

display:none;

}











jQuery(document).ready(function(){

if (document.cookie.indexOf('visited=true') == -1) {

var fifteenDays = 1000*60*60*24*30;

var expires = new Date((new Date()).valueOf() + fifteenDays);

document.cookie = "visited=true;expires=" + expires.toUTCString();

$.colorbox({width:"400px", inline:true, href:"#subscribe"});

}

});



<!-- This contains -->












Receber todas as atualizações através do Facebook. Basta curtir nossa FanPage.





▼
























5) ATENÇÃO PARA ESSA PARTE QUE ESTA NO FINAL DO CÓDIGO
&lt; iframe src = "//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FNOME-DA-SUA-FANPAGE&amp;width=300&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;stream=false&amp;header=false&amp;height=258" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:258px;" allowtransparency="true"&gt;
6) copie a url da sua pagina do facebook e cole no lugar do que esta em rosa
7) Salve e verifique.

ATENÇÃO!
&nbsp;ESSE CÓDIGO&nbsp;NÃO&nbsp;APARECE TODA VEZ QUE O VISITANTE APARECE. ELE APARECE SOMENTE UMA VEZ POR DIA OK!!!




2ª -&nbsp;GADGET - ICONES REDES SOCIAIS







Para adicionar essa aba no seu blog siga os passos abaixo:

1) entre no layout do blog2) adicionar gadget3) html/javascript4) copie e cole o código abaixo


 



















 

ATENÇÃO!
Quando for colar o código no seu blog, onde estiver escrito LINK DO SEU... você altera para os links das páginas de perfil para cada item correspondente .



3ª -&nbsp;ICENOS DE REDES SOCIAIS E BUSCA NO MESMO GADGET










Siga os passos abaixo:1) entre no layout do blog2) adicionar gadget3) html/javascript4) copie e cole o código abaixo


 
.mok-metro-social

{

width:300px;

}

.mok-metro-social li

{

position:relative;

cursor:pointer;

padding:0;

list-style:none;

}

.mok-metro-social .fb,.tw,.gp,.pi,.in,.yt,.fd

{

z-index:7;

float:left;

margin:2.5px;

position:relative;

display:block;

}

.mok-metro-social .tw

{

background:url(https://lh6.googleusercontent.com/-tAiPX-vmOtE/UYSi2-XmHDI/AAAAAAAAAQ8/1QoazLdpBw0/h120/twitter-bird-dark-bgs.png) no-repeat center center #43b3e5;

width:70px;

height:70px;

-webkit-transition: box-shadow .3s linear, background .2s linear;

-moz-transition: box-shadow .3s linear, background .2s linear;

-ms-transition: box-shadow .3s linear, background .2s linear;

-o-transition: box-shadow .3s linear, background .2s linear;

transition: box-shadow .3s linear, background .2s linear;

}

.mok-metro-social .fb

{

background:url(https://lh3.googleusercontent.com/-vDSzu-T601Y/UYSi1fSRVrI/AAAAAAAAAQc/ELuXZ2jyqQc/h120/facebookf.png.png) no-repeat center center #1f69b3;

width:70px;

height:70px;

-webkit-transition: box-shadow .3s linear, background .2s linear;

-moz-transition: box-shadow .3s linear, background .2s linear;

-ms-transition: box-shadow .3s linear, background .2s linear;

-o-transition: box-shadow .3s linear, background .2s linear;

transition: box-shadow .3s linear, background .2s linear;

}

.mok-metro-social .gp

{

background:url(https://lh3.googleusercontent.com/-UFoSVVdTmjs/UYSi2B_Sq8I/AAAAAAAAAQs/3FBp6oEsVPI/h120/google%2Bplus.png) no-repeat center center #da4a38;

width:70px;

height:70px;

-webkit-transition: box-shadow .3s linear, background .2s linear;

-moz-transition: box-shadow .3s linear, background .2s linear;

-ms-transition: box-shadow .3s linear, background .2s linear;

-o-transition: box-shadow .3s linear, background .2s linear;

transition: box-shadow .3s linear, background .2s linear;

}

.mok-metro-social .fd

{

background:url(https://lh3.googleusercontent.com/-TqPZ-v642ZE/UYSi1cM11EI/AAAAAAAAAQU/64BY1HhedMA/h120/feed.png) no-repeat center center #e9a01c;

width:70px;

height:70px;

-webkit-transition: box-shadow .3s linear, background .2s linear;

-moz-transition: box-shadow .3s linear, background .2s linear;

-ms-transition: box-shadow .3s linear, background .2s linear;

-o-transition: box-shadow .3s linear, background .2s linear;

transition: box-shadow .3s linear, background .2s linear;

}

.mok-metro-social li:hover .fb

{

background:url(https://lh6.googleusercontent.com/-UN0N7Qnfx_s/UYSi1XRsRgI/AAAAAAAAAQY/h8-R0wSZz24/h120/facebookfh.png) no-repeat center center #1f69b3;

 box-shadow:0px 0px 6px 3px #217BC0;

-webkit-box-shadow:0px 0px 6px 3px #217BC0;

-moz-box-shadow:0px 0px 6px 3px #217BC0;

-o-box-shadow:0px 0px 6px 3px #217BC0;

-ms-box-shadow:0px 0px 6px 3px #217BC0;

}

.mok-metro-social li:hover .tw

{

background:url(https://lh4.googleusercontent.com/-w8hfqwI1fro/UYSi26Ys2mI/AAAAAAAAAQ4/S6bh1T3WZw8/h120/twitter-bird-dark-bgsx.png) no-repeat center center #43b3e5;

 box-shadow:0px 0px 6px 3px #38D1F7;

-webkit-box-shadow:0px 0px 6px 3px #38D1F7;

-moz-box-shadow:0px 0px 6px 3px #38D1F7;

-o-box-shadow:0px 0px 6px 3px #38D1F7;

-ms-box-shadow:0px 0px 6px 3px #38D1F7;

}

.mok-metro-social li:hover .gp

{

background:url(https://lh4.googleusercontent.com/-srzm-9YDILE/UYSi2bX-v1I/AAAAAAAAAQw/BenmWbVnjbM/h120/google%2Bplush.png) no-repeat center center #da4a38;

 box-shadow:0px 0px 6px 3px #F43431;

-webkit-box-shadow:0px 0px 6px 3px #F43431;

-moz-box-shadow:0px 0px 6px 3px #F43431;

-o-box-shadow:0px 0px 6px 3px #F43431;

-ms-box-shadow:0px 0px 6px 3px #F43431;

}

.mok-metro-social li:hover .fd

{

background:url(https://lh6.googleusercontent.com/-6bVW---kuQ8/UYSi2N7ReOI/AAAAAAAAAQo/rRWRy2uqGl8/h120/feedh.png) no-repeat center center #e9a01c;

 box-shadow:0px 0px 6px 3px #e9a01c;

-webkit-box-shadow:0px 0px 6px 3px #e9a01c;

-moz-box-shadow:0px 0px 6px 3px #e9a01c;

-o-box-shadow:0px 0px 6px 3px #e9a01c;

-ms-box-shadow:0px 0px 6px 3px #e9a01c;

}

.cf:before, .cf:after{

    content:"";

    display:table;

}

.cf:after{

    clear:both;

}

.cf{

    zoom:1;

}   

/* Form wrapper styling */

.form-wrapper {

    width: 280px;

}

/* Form text input */

.form-wrapper input {

    width: 215px;

    height: 20px;

    padding: 10px 5px;

    float: left;  

    font: bold 12px 'lucida sans', 'trebuchet MS', 'Tahoma';

    border: 0;

box-shadow: 0 0 6px rgba(0,0,0,.3) inset;

webkit-transition: box-shadow .3s linear, background .2s linear;

-moz-transition: box-shadow .3s linear, background .2s linear;

-ms-transition: box-shadow .3s linear, background .2s linear;

-o-transition: box-shadow .3s linear, background .2s linear;

transition: box-shadow .3s linear, background .2s linear;

}

.form-wrapper input:focus {

    outline: 0;

    background: #fff;

    border-color: #51a7e8;

   box-shadow: 0 0 2px rgba(0,0,0,.8) inset;

}

.form-wrapper input::-webkit-input-placeholder {

   color: #999;

   font-weight: normal;

   font-style: italic;

}

.form-wrapper input:-moz-placeholder {

    color: #999;

    font-weight: normal;

    font-style: italic;

}

.form-wrapper input:-ms-input-placeholder {

    color: #999;

    font-weight: normal;

    font-style: italic;

}  

/* Form submit button */

.form-wrapper button {

    overflow: visible;

    position: relative;

    float: right;

    border: 0;

    padding: 0;

    cursor: pointer;

    height: 40px;

    width: 75px;

    background:url(https://lh5.googleusercontent.com/-bfasMiPvfZA/UYSkiD6sABI/AAAAAAAAARY/ecjiB_C8oyk/h120/1367665345_search.png) no-repeat center center #26B11E;

    border-radius: 0 0 0 0;    

    text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);

webkit-transition: box-shadow .3s linear, background .2s linear;

-moz-transition: box-shadow .3s linear, background .2s linear;

-ms-transition: box-shadow .3s linear, background .2s linear;

-o-transition: box-shadow .3s linear, background .2s linear;

transition: box-shadow .3s linear, background .2s linear;

} 

.form-wrapper button:hover{   

      background:url(https://lh5.googleusercontent.com/-bfasMiPvfZA/UYSkiD6sABI/AAAAAAAAARY/ecjiB_C8oyk/h120/1367665345_search.png) no-repeat center center #26B11E;

box-shadow:0px 0px 6px 3px #44D816;

-webkit-box-shadow:0px 0px 6px 3px #44D816;

-moz-box-shadow:0px 0px 6px 3px #44D816;

-o-box-shadow:0px 0px 6px 3px #44D816;

-ms-box-shadow:0px 0px 6px 3px #44D816;

} 

.form-wrapper button:active,

.form-wrapper button:focus{ 

    background:url(https://lh5.googleusercontent.com/-bfasMiPvfZA/UYSkiD6sABI/AAAAAAAAARY/ecjiB_C8oyk/h120/1367665345_search.png) no-repeat center center #26B11E;

    outline: 0; 

}

.form-wrapper button:before { /* left arrow */

    content: '';

    position: absolute;

    border-width: 8px 8px 8px 0;

    border-style: solid solid solid none;

    border-color: transparent #26B11E transparent;

    top: 12px;

    left: -6px;

}

.form-wrapper button:hover:before{

    border-right-color: #26B11E;

}

.form-wrapper button:focus:before,

.form-wrapper button:active:before{

        border-right-color: #26B11E;

}    

.form-wrapper button::-moz-focus-inner { /* remove extra button spacing for Mozilla Firefox */

    border: 0;

    padding: 0;

}   































 


ATENÇÃO!

&nbsp;Para esses itens escritos INCLUA O SEU você deve configurar com seus dados de acesso em cada rede social.
5) Salve e veja o resultado

4ª- POSTAGENS RECENTES COM EFEITO E RESUMO










Este código tem como finalidade mostrar as postagens recentes do seu blog na lateral (sidebar). O diferencial dele é que os quadrinhos de postagem se movem, ficam sombreados e abaixo aparece um trecho da postagem escrita. Bora para o código!1) entre no layout do blog2) adicionar gadget3) html/javascript4) copie e cole o código abaixo








#post-gallery {width:100%; margin:0px auto;font:normal 11px Arial,Sans-Serif;color:##000000;padding:8px;}

#post-gallery .rp-item {float:left;display:inline;  position:relative;  margin:2px;  padding:0px 0px;  background: url('http://4.bp.blogspot.com/-0E2ZARxMyAo/UZwiR3XjlvI/AAAAAAAAKDc/3Z8WjltqbCQ/s1600/LOAD+(66).gif') no-repeat 50% 50%;  width:79px;  height:79px;}

#post-gallery .rp-item img {  width:69px;  height:69px;  border:none !important;  margin:0px 0px !important;  padding:0px 0px !important;  background:transparent !important;  display:none;}

#post-gallery .rp-item img:hover{-moz-transform: scale(1.2) rotate(-350deg);-webkit-transform: scale(1.2) rotate(-350deg);-o-transform: scale(1.2) rotate(-350deg);-ms-transform: scale(1.2) rotate(-350deg);transform: scale(1.2) rotate(-350deg);-webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);-moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);}

#post-gallery .rp-item .rp-child {  position:relative;  top:10%!important;  left:10%!important;  z-index:1000;  width:200px;  background-color:white;  border-bottom:5px solid #1BA1E2;  -webkit-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);  -moz-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);  box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);  padding:10px 15px;  overflow:hidden;  word-wrap:break-word;  display:none;  opacity: 0.9;}

#post-gallery .rp-item .rp-child h4 {  font-size:12px;  margin:0px 0px 5px;  color:#1BA1E2;}

#post-gallery .rp-item:hover .hidden {display:block;}



var rpTitle     = "Recent Posts",       // Widget Title

    numposts    = 14,      // Number of Posts to show

    numchar     = 200,      // Number of Characters to be displayed

    rcFadeSpeed = 600,      // Speed

    pBlank      = "http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif",      // If No Image

    blogURL     = "http://www.layoutparablog.com/";       // Your Blog URL







ATENÇÃO &nbsp;!

Onde aparecer escrito no código&nbsp;blogURL &nbsp; &nbsp; = "http://www.layoutparablog.com/"; &nbsp; &nbsp; &nbsp; // Your Blog URL
você troca pelo endereço do seu blog a parte que esta em rosa5) SALVE e veja o resultado!



5ª -BOTÃO FLUTUANTE DE TWITTER E FACEBOOK











O código abaixo permite você colocar esses dois botões acima em seu blog na lateral esquerda de forma que a página vai descendo e eles vão descendo junto (flutuante).&nbsp;



1) entre no layout do blog2) adicionar gadget3) html/javascript4) copie e cole o código abaixo


  

    a.abt-hover img { filter:alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; -khtml-opacity: 0.5;} a.abt-hover:hover img { filter:alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0; -khtml-opacity: 1.0; } 

     

    


 

     

     

    







ATENÇÃO!

onde esta http://twitter.com/SEUNOME" e "http://www.facebook.com/SEUNOME" você altera com os seus dados do Twitter e do Facebook5) salve e veja o resultado





(Créditos:&nbsp;http://www.layoutparablog.com)



Então gostaram ? Qual quer dúvida , crítica ou elogio podem deixar nos comentários ! Beijão a Todos.