Facebook e Youtube Fixados no Canto do Blog

Nesta postagem compartilho com vocês estas duas redes sociais para deixar seu blog mais elegante e moderno.





Para colocar em seu blog... Entre em "Modelo" - "Editar HTML" e procure pela tag

]]></b:skin>

Tendo encontrado a tag, cole ACIMA dela o seguinte código

/* ---------- GERAL DICASHOT ---------- */ 
#social-sidebar a { text-decoration: none; } 
#social-sidebar ul { 
list-style: none; 
margin: 0; 
padding: 0; 
} 
/* ---------- Social Sidebar ---------- */ 
#social-sidebar { 
left: 0; 
margin-top: -110px; /* (li * a:width) / -2 */ 
position: fixed; 
top: 50%; 
} 
#social-sidebar ul li:first-child a { border-radius: 0 5px 0 0; } 
#social-sidebar ul li:last-child a { border-radius: 0 0 5px 0; } 
#social-sidebar ul li a { 
background: #121212; 
color: #fff; 
display: block; 
height: 50px; 
font-size: 18px; 
line-height: 50px; 
position: relative; 
text-align: center; 
width: 50px; 
} 
#social-sidebar ul li a:hover span { 
left: 130%; 
opacity: 1; 
} 
#social-sidebar ul li a span { 
border-radius: 3px; 
line-height: 24px; 
left: -100%; 
margin-top: -16px; 
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
filter: alpha(opacity=0); 
opacity: 0; 
padding: 4px 8px; 
position: absolute; 
-webkit-transition: opacity .3s, left .4s; 
-moz-transition: opacity .3s, left .4s; 
-ms-transition: opacity .3s, left .4s; 
-o-transition: opacity .3s, left .4s; 
transition: opacity .3s, left .4s; 
top: 50%; 
z-index: -1; 
} 
#social-sidebar ul li a span:before { 
content: ""; 
display: block; 
height: 8px; 
left: -4px; 
margin-top: -4px; 
position: absolute; 
top: 50%; 
-webkit-transform: rotate(45deg); 
-moz-transform: rotate(45deg); 
-ms-transform: rotate(45deg); 
-o-transform: rotate(45deg); 
transform: rotate(45deg); 
width: 8px; 
z-index: -2; 
} 
#social-sidebar ul li a[class*="facebook"]:hover, 
#social-sidebar ul li a[class*="facebook"] span, 
#social-sidebar ul li a[class*="facebook"] span:before { background: #234999; } 
#social-sidebar ul li a[class*="video"]:hover, 
#social-sidebar ul li a[class*="video"] span, 
#social-sidebar ul li a[class*="video"] span:before { background: #E34429; } 
#social-sidebar ul li a[class*="facebook"]:hover, 
#social-sidebar ul li a[class*="facebook"] span, 
#social-sidebar ul li a[class*="facebook"] span:before { background: #234999; } 

Tendo colado o código, salve e feche a parte de edição html.

Agora, entre em "Layout" - "Adicionar um Gadget" - "HTML/JavaScript" e cole o seguinte código:

<div id='social-sidebar'> 
<ul> 
<li> 
<a class='entypo-facebook' href='https://www.facebook.com/dicashot' target='_blank'> 
<span>Facebook</span> 
</a> 
</li> 
<li> 
<a class='entypo-video' href='http://www.youtube.com/' target='_blank'> 
<span>Youtube</span> 
</a> 
</li> 
<li>
</li></ul></div>
</div>

Tendo feito isto, está pronto!