quarta-feira, 3 de junho de 2015

Redes Sociais estilo Metro


Sempre procuramos estilos de botões para adicionar no nosso blog então hoje vou apresentar aqui botões metro para seu blog Que tal adicionar Metro Botões redes sociais no seu Blogger, realmente isso faz um efeito profissional no seu blogger além de mostrar para as pessoas o local exato onde encontrar você seja nas redes sociais ou adicionando seu feed do blogger para seus leitores para adicionar é facil


Para adicionar siga os passos abaixo:

Faça Login na conta do blogger
acesse o menu do blogger clique em layout 
adicionar widget escolha java script então 
copie o codigo abaixo e cole depois salve 

Codigo 


<center>
<ul id="abt-social-icons">
<li class="rss-icon"><a href="http://feeds.feedburner.com/FEEDID" target="_blank"><img height="147" src="http://1.bp.blogspot.com/-0M62-Stfcdc/Ud1ZFcVvCRI/AAAAAAAABuY/9_o8SRGny8U/s1600/rss.png" width="147" /></a></li>
<li class="twitter-icon"><a href="http://www.twitter.com/TWITTERHANDLE" target="_blank"><img height="147" src="http://2.bp.blogspot.com/-7qVkCzvGlC4/Ud1ZF3wqNlI/AAAAAAAABuc/6V0lQLdtvnk/s1600/twitter.png" width="147" /></a></li>
<li class="facebook-icon"><a href="http://www.facebook.com/PAGEID" target="_blank"><img height="147" src="http://1.bp.blogspot.com/-ReX8Fx2MrOk/Ud1ZFBIvvSI/AAAAAAAABuI/hX1cGTGVWZ0/s1600/facebook.png" width="147" /></a></li>
<li class="google-icon"><a href="https://plus.google.com/YOURID" target="_blank"><img height="147" src="http://3.bp.blogspot.com/-9gpsltkgVP0/Ud1ZFcm_cyI/AAAAAAAABuM/0u5oe5uRmuQ/s1600/google.png" width="147" /></a></li>
</ul>
</center>
<style>
#abt-social-icons li {
 float: left;
 width: 147px;
 height: 147px;
 margin: 0 6px 6px 0;
 padding: 0 0 0 0;
 border-bottom: none;
        list-style: none;
}
#abt-social-icons li a {
 line-height: 1px;
 display: block;
}

#abt-social-icons li a:hover img {
 -webkit-opacity: 0.8;
 -moz-opacity: 0.8;
 opacity: 0.8;
}

#abt-social-icons li a span {
 display: none !important;
}
</style>

Nota: Não esqueça de substituir os campos realçados em amarelo por seus ids de rede social faça bom uso desse widget
NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post

Nenhum comentário:

Postar um comentário

NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post
 

Delivered by FeedBurner