Como colocar barra de Redes Sociais no Blog - Tutoriais Blog

Fala pessoal , aqui quem fala é Marfos e nesse tutorial nós iremos aprender a como colocar uma barra lateral de Redes Sociais no blog .

1. Faça o login na sua conta do blogger.

2. Click no nome do seu blog.

3. Navegue até a parte Modelo e Depois Editar HTML.

4. Click em editar HTML e depois procure (Ctrl+F) por ]]></b:skin> e ANTES dele cole o seguinte código.

/*  Page-Navigation By Marfos----------------------------------------------- */ .showpageArea {   font-family:verdana,arial,helvetica;   color: #000;   font-size:11px;    margin:10px;   }    .showpageArea a {   color: #fff;   }    .showpageNum a {   padding: 3px 8px;   margin:0 4px;   text-decoration: none;   background: #333  url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDu-bJqfOdr4cOMSe_MnehK0JKL5iuK3_hO-XwhE5tVCKiUZR9iFfkqKobrDZ5_0-Y7uUtQvValhJfGw_sngoVbuoWclMc9Tt23IqsXodQn6SFW0-g6vcYPseFzCl6GPfCSaVceTM0qV0/s1600/wp5.jpg)  0 -50px repeat-x;   }    .showpageNum a:hover {   background: #666  url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDu-bJqfOdr4cOMSe_MnehK0JKL5iuK3_hO-XwhE5tVCKiUZR9iFfkqKobrDZ5_0-Y7uUtQvValhJfGw_sngoVbuoWclMc9Tt23IqsXodQn6SFW0-g6vcYPseFzCl6GPfCSaVceTM0qV0/s1600/wp5.jpg)  0 -25px repeat-x;   }  .showpagePoint {   color:#fff;   padding: 3px 8px;   margin: 2px;   font-weight: 700;   background: #06a2b9  url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDu-bJqfOdr4cOMSe_MnehK0JKL5iuK3_hO-XwhE5tVCKiUZR9iFfkqKobrDZ5_0-Y7uUtQvValhJfGw_sngoVbuoWclMc9Tt23IqsXodQn6SFW0-g6vcYPseFzCl6GPfCSaVceTM0qV0/s1600/wp5.jpg)  0 0 repeat-x;   text-decoration: none;   }  .showpageOf{   margin:0 8px 0 0;   }      ul#menusisi {     position:fixed;     margin:0;     padding:0;     top:80px;     left:0;     list-style:none;     z-index:9999;     }     ul#menusisi li {     width:100px;     }     ul#menusisi li a {     display:block;     margin-left:-50px;     width:100px;     height:55px;     background-color:#141414;  /* Cor de fundo do botão */     background-repeat:no-repeat;     background-position:48px center;     border:1px solid #cfcfcf;  /* Cor da borda do botão*/     -moz-border-radius:0px 10px 10px 0px;     -webkit-border-bottom-right-radius: 10px;     -webkit-border-top-right-radius: 10px;     -khtml-border-bottom-right-radius: 10px;     -khtml-border-top-right-radius: 10px;     /*-moz-box-shadow: 0px 4px 3px #000;     -webkit-box-shadow: 0px 4px 3px #000;     */     opacity:0.8;     filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);     }     ul#menusisi .home a {      background-image:url(http://lh6.ggpht.com/_xcD4JK_dIjU/S9BJaBfhOhI/AAAAAAAAD_0/nV3ITEV9d3M/d/nav_home.png);      }     ul#menusisi .twitter a {      background-image:url(https://www.coderesort.com/p/epicode/export/1390/FV.ShareIt/trunk/Install/FV.ShareIt/Images/twitter-48x48.png);      } ul#menusisi .youtube a {      background-image:url(http://www.cornealdystrophyfoundation.org/assets/images/youtube-48x48.png);      } ul#menusisi .facebook a {      background-image:url(https://www.coderesort.com/p/epicode/export/1390/FV.ShareIt/trunk/FV.ShareIt/FV.ShareIt/Images/facebook-48x48.png);      } ul#menusisi .orkut a {      background-image:url(http://static.wix.com/media/0d3caec202c11a5904b9cb4f697c2a3f.wix_mp_256);      }     ul#menusisi .rssfeed a {      background-image:url(http://lh3.ggpht.com/_xcD4JK_dIjU/S9BJaabJhzI/AAAAAAAAEAA/Oo4mhwCwzbI/d/nav_rss.png);       }     #toTop { width:50px;  /* Largura do botão * / background: #000000; /* Cor do botão*/ border:1px solid #FFF; /* Cor da borda */ text-align:center; /* Alinhamento do texto */ padding:5px; /* Distancia entre texto e borda */ position:fixed; /* Posição que faz com que ele corra por toda a página*/ bottom:5px; right:5px; cursor:pointer; color:#FFFFFF; /* Cor da letra */ text-decoration:none; font-weight:700;  /* Tamanho da letra */ -moz-border-radius:5px;  /* Definições para o angulo do botão */ -khtml-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; }  #blog-pager-newer-link { float: left; text-transform: capitalize; font: bold 14px arial; color: #fff; } #blog-pager-older-link { float: right; text-transform: capitalize; font: bold 14px arial; color: #fff; } #blog-pager { text-align: center; text-transform: capitalize; font: bold 12px arial; padding: 10px 0; } .showpageArea { font-family:"Oswald", Lucida Sans Unicode, Helvetica, Arial, sans-serif; color: #353131; font-size:15px; margin:20px; } .showpageNum a, .showpage a{ padding:0px 8px; margin:0 3px; text-decoration:none; background:#fff; border:1px solid #353131; font-size:16px; color:#000000; -webkit-border-radius:5px;-moz-border-radius:8px; } .showpageNum a:hover{ background:#353131; color:#000; } .showpagePoint{ color:#000; font-size:17px; padding:0 8px; margin:2px; -webkit-border-radius:5px;-moz-border-radius:8px; border:1px solid #353131; background:#353131; text-decoration:none; } .showpageOf{ display:none !important; visibility:hidden !important }  #gb { position:fixed; top:150px; z-index:+1000; right:-610px; }  * html #gb { position:relative; }  .gbtab { height:161px; width:47px; float:left; cursor:pointer; background:url('http://4.bp.blogspot.com/-JwNTvG-mTrI/T5XW8oBi4OI/AAAAAAAAAEY/AvOs18rFwgE/s1600/bot%C3%A3o+do+xat+c%C3%B3pia.png')  no-repeat; margin-top:20px; }  .gbcontent { float:right; border:2px solid #8c00c1; background:#fff; opacity:0.80; -moz-opacity: 0.80; filter: alpha(opacity=80); -webkit-border-radius: 20px; border-radius: 20px; -khtml-border-radius: 20px; padding:8px; }

5. E procure (Ctrl+F) por </body> e ANTES dele cole o seguinte código.

Você só ira editar o segundo código e onde estiver LINK TWITTER, LINK FEED, LINK YOUTUBE, LINK ORKUT, LINK FACEBOOK.

E é isso espero que todos tenham entendido e que pessoal eu só irei postar o próximo tutorial se o Downs Super Turbo conseguir 100 Curti na nossa Fan Page então se você quiser um xat como o nosso no seu site Curta lá não custa nada só um minuto e um pouco de dignidade ... rsrsr.

Show 0 Comments

Banner

Top Link Downs

Blogger templates

Category List

Total de visualizações de página

Deixe um Recado ou Pedido de Parceria

Label

Translate

Seguidores

Label