Widget com suas páginas sociais

Você a essa altura já sabe da importância para a indexação de seu blog pelas suas páginas sociais. Eis então mais um widget com seus principais endereços sociais. Fácil de instalar e com um design bem moderno.


Vá até o "Modelo de seu blog", clique em "Editar HTML"

  Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. Essa dica é para o template Simple, do novo Blogger, implementado em julho de 2011

Agora procure por: ]]></b:skin>  

Acima dele, cole o código abaixo:

ul#m-soc2{   
margin: 18px 0 0 10px;padding: 0;width: 220px;height:50px;} 
ul#m-soc2 li{ 
list-style: none;margin: 7px;padding: 0;float:left;border: none;} 
ul#m-soc2 li a{ 
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxrvJHCu3mhjQToI26suRuwMwh1NYSPHNTHKVjkxTDsOFbRMfhEQrxakX1tkG-2kwcYltfLtdC0wkWJax5XWmB2GotNkWVbk2RIk2tyOQRvOO9bm9ggEEw7T_lcbioYJYO2mcolaD0ccnh/s132/sosyal-butonlar.png) no-repeat 0 0; 
margin:0;padding:0;display: block;position:relative; 
width: 33px; 
height: 33px; 
overflow: visible; 
} 
ul#m-soc2 li a.twitter{ 
background-position: 0 0; 
} 
ul#m-soc2 li a.facebook{ 
background-position: -33px 0; 
} 
ul#m-soc2 li a.google{ 
background-position: -66px 0; 
} 
ul#m-soc2 li a.rss{ 
background-position: -99px 0; 
} 
ul#m-soc2 li a.twitter:hover{ 
background-position: 0 -33px; 
} 
ul#m-soc2 li a.facebook:hover{ 
background-position: -33px -33px; 
} 
ul#m-soc2 li a.google:hover { 
background-position:-66px -33px; 
} 
ul#m-soc2 li a.rss:hover{ 
background-position:-99px -33px; 
} 
ul#m-soc2 li a span{ 
background: #555;position:absolute; 
top:-10px;left:-10px;width:auto;height:auto;opacity:0; 
padding:3px;text-align:left; 
color:#fff;filter:alpha(opacity=0); 
white-space:nowrap;border-radius:3px;font-size:12px; 
-webkit-transition: all 0.25s ease-in-out; 
-moz-transition: all 0.25s ease-in-out; 
-o-transition: all 0.25s ease-in-out; 
-ms-transition: all 0.25s ease-in-out; 
transition: all 0.25s ease-in-out;} ul#m-soc2 li a:hover{text-decoration:none} 
ul#m-soc2 li a:hover span{ 
opacity:.7; 
filter:alpha(opacity=70); 
top:-23px}

Salve.

 Agora clique em Layout

Clique em Adicionar um Gadget

Ao abrir, clique em  HTML/Javascript

Cole então o próximo código fazendo as modificações necessárias.

<ul id="m-soc2">

<li><a class="twitter" href="ENDEREÇO DO TWITTER">
<span>Twitter</span></a></li>

<li><a class="facebook" href="ENDEREÇO DO SEU FACEBOOK">
<span>Facebook</span></a></li>

<li><a class="google" href="ENDEREÇO DO SEU GOOGLE PLUS">
<span>Google+</span></a></li>

<li><a class="rss" href="ENDEREÇO DO FEED DE SEU BLOG">
<span>RSS</span></a></li>

</ul>

Créditos: Eklentilery