Botões redes sociais

Eai galera, nesse tutorial vou ensinar a colocar esses botões no seu blog/site confira a demonstração abaixo
Demonstração
Bom... primeiramente vá em:

Modelo>>Editar Html Aperte CTRL+F

Busque pela tag:
]]></b:skin>
agora cole acima dele o seguinte código: #mkrbutton .iconz {background:#E3E3E3 url('http://2.bp.blogspot.com/-JKB0aVYaIW0/UC-oBl8NXxI/AAAAAAAAEYA/IbgyikdkM5A/s1600/blsocial12.png') 0 0 no-repeat; -moz-border-radius:40px; -webkit-border-radius:40px; -o-border-radius:40px; border-radius:40px; display:block; color:#212121; float:none; height:48px; width: 48px; line-height:48px; margin:10px auto 0; position:relative; text-shadow:0 1px 0 #FAFAFA; text-align:center; text-decoration:none; white-space:nowrap; -webkit-transition:width .25s ease-in-out; -ms-transition:width .25s ease-in-out; -moz-transition:width .25s ease-in-out; -o-transition:width .25s ease-in-out; transition:width .25s ease-in-out; -webkit-box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 2px 3px; -moz-box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 2px 3px; -o-box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 2px 3px; box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 1px 3px;} #mkrbutton a span {display:none;} #mkrbutton:hover a span {display:inline;} #mkrbutton a span {font-size:1.4em;} #mkrbutton:hover .iconz {width:250px;} #mkrbutton .fb {background-position: 0 -384px;} #mkrbutton .twiter {background-position: 0 -432px;} #mkrbutton .google {background-position: 0 -480px;} #mkrbutton .pint {background-position: 0 -528px;} #mkrbutton .linkedin {background-position: 0 -576px;} #mkrbutton .devart {background-position: 0 -624px;} #mkrbutton .ytube {background-position: 0 -672px;} #mkrbutton .rss {background-position: 0 -720px;} #mkrbutton .fb:hover {background-position: 0 0;color: #0374DD;} #mkrbutton .twiter:hover {background-position: 0 -48px;color: #00A1DF;} #mkrbutton .google:hover {background-position: 0 -96px;color: #A70000;} #mkrbutton .pint:hover {background-position: 0 -144px;color: #C00;} #mkrbutton .linkedin:hover {background-position: 0 -192px;color: #005772;} #mkrbutton .devart:hover {background-position: 0 -240px;color: #4C7A4A;} #mkrbutton .ytube:hover {background-position: 0 -288px;color: #A00;} #mkrbutton .rss:hover {background-position: 0 -336px;color: #EC5601;}
Salve! Agora vá em:

Layout>>Adicionar Gadget, escolha HTML/JavaScript

Colo o seguinte codio no JavaScript:
<div id="mkrbutton"><a href="#" class="iconz fb"><span>Facebook</span></a></div>
<div id="mkrbutton"><a href="#" class="iconz twiter"><span>Twitter</span></a></div>
<div id="mkrbutton"><a href="#" class="iconz google"><span>Google+</span></a></div>
<div id="mkrbutton"><a href="#" class="iconz pint"><span>Pinterest</span></a></div>
<div id="mkrbutton"><a href="#" class="iconz linkedin"><span>LinkedIn</span></a></div>
<div id="mkrbutton"><a href="#" class="iconz devart"><span>DeviantArt</span></a></div>
<div id="mkrbutton"><a href="#" class="iconz ytube"><span>Youtube</span></a></div>
 <div id="mkrbutton"><a href="#" class="iconz rss"><span>RSS</span></a></div>
Agora que colou o código no JavaScript você ira substituir "#" pelo link desejado.
Caso queira remover uma rede social você tera que apagar o código dela,
Por exemplo eu quero remover o facebook,  então vou apagar o código dela que é :
<div id="mkrbutton"><a href="#" class="iconz ytube"><span>Youtube</span></a></div>

Salve e pronto XD