Widget Redes Sociais Ícones Retina para Blogger

Tenha em seu blog um widget construído com um novo conceito que poderá auxiliá-lo na divulgação das páginas nas redes sociais.

Um widget para redes sociais é indispensável para todo blog que almeja alcançar o “topo”. Com o imenso alcance e necessidade de uso das principais redes sociais, todo blogueiro busca uma “carona” nesse embalo todo para complementar e divulgar seus projetos afim de alavancar seu blog a um bom nível.

Com a evolução do CSS, os widgets estão cada vez mais práticos e bonitos. E, nesse artigo citaremos uma forma que vem melhorando e muito a qualidade desses códigos que é o uso da Fonte Awesome. Através dela, dispensamos a utilização de imagens, pois, a mesma utiliza caracters em forma de ícones que podem ser redimensionados sem perder a qualidade, bastando a alteração do atributo font-size como uma “fonte de texto” normalmente utilizada em artigos.

Essa é a grande melhoria desse widget redes sociais que trazemos para você, pois, ele poderá se ajustar a qualquer alteração de display sem perder o belo visual e nem ficar bagunçado, benefício que a utilização da Fonte Awesometraz para a programação HTML. Além dessa considerável evolução, esse widget também conta com um efeito hover bastante particular, que, gera um certo movimento nos ícones e os deixa com os backgrounds nas cores padrão da rede social selecionada.

 Recomendamos que antes de qualquer alteração no código faça um backup do template. Caso não saiba como proceder, acesse o artigo Como Fazer um Backup do Blog

Colocar Widget Redes Sociais Ícones Retina no Blog

>> Acesse seu Blogger, vá em "Modelo" e depois "Editar HTML".

>> Clique no código do template, pressione "CTRL+F" e pesquisa por </head>

>> Logo ACIMA da tag encontrada, cole o seguinte código:

<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

>> Pesquise agora por ]]></b:skin>

>> Logo ACIMA da tag encontrada, cole o seguinte código:

 /*---------  social icons  -----------*/
.social-count-plus ul {
list-style: none;
margin: 0;
display:inline-block;
width:100%;
}
.fa {font-size:35px}
.social-count-plus ul li:nth-child(3n-1), .social-count-plus ul li:nth-child(3n-2) {
box-shadow: 1px 0 0 rgba(0,0,0,.05);
}
.social-count-plus ul li:nth-child(-n+3) {
border-top: none!important;
}
.social-count-plus ul li {
width: 33%;
float: left;
text-align: center;
line-height: 15px;
padding: 25px 0;
margin: 0;
list-style:none;
border-top:1px solid rgba(0,0,0,.05)!important;
}
.social-count-plus .default li a {
padding: 0;
display: block;
-webkit-transition: -webkit-transform .2s;
transition: -moz-transform .2s;
transition: transform .2s;
width:100%;
color:#888;
}
.social-count-plus .default li a:before{
font-size:30px;
}
.social-count-plus ul li:hover a{
color:#fff;
}
.social-count-plus .items, .social-count-plus span.count, .social-count-plus span.label {
display: block;
opacity: 0;
}
.social-count-plus .default li:hover a, .social-count-plus .default li:hover span, .social-count-plus .default li:hover a.icon:before {
color: #fff;
text-decoration: none;
}
.social-count-plus li:hover .items, .social-count-plus li:hover .count, .social-count-plus li:hover .label {
opacity: 1!important;
}
.social-count-plus ul li:hover a {
-webkit-transform: translateY(5px);
-moz-transform: translateY(5px);
-ms-transform: translateY(5px);
transform: translateY(5px);
}
li.count-facebook:hover {background:#3B579D;}
li.count-googleplus:hover {background:#BC3728;}
li.count-instagram:hover {background:#547FA2;}
li.count-linkedin:hover {background:#006699;}
li.count-twitter:hover {background:#49C7EC;}
li.count-youtube:hover {background:#ec2626;}

>> Clique em "Salvar Modelo".

>> Agora, vá na opção "Layout".

>> Clique em "Adicionar um gadget" e escolha "HTML/Javascript".

>> Dentro do conteúdo do gadget, cole o seguinte código:

<div class='social-count-plus'>
<ul class='default'>
<li class='count-twitter'>
<a href='http://twitter.com/' target='_blank'>
<i class='fa fa-twitter'></i>
</a></li>
<li class='count-facebook'>
<a href='http://www.facebook.com/' target='_blank'>
<i class='fa fa-facebook'></i>
</a></li>
<li class='count-youtube'>
<a href='http://www.youtube.com/' target='_blank'>
<i class='fa fa-youtube-play'></i>
</a></li>
<li class='count-googleplus'>
<a href='https://plus.google.com/' target='_blank'>
<i class='fa fa-google-plus'></i>
</a></li>
<li class='count-instagram'>
<a href='http://instagram.com/' target='_blank'>
<i class='fa fa-instagram'></i>
</a></li>
<li class='count-linkedin'>
<a href='http://linkedin.com' target='_blank'/>
<i class='fa fa-linkedin'></i>
</a></li>
</ul>
</div>

* Substitua os trechos destacados em AMARELO pelos links de suas redes sociais correspondentes.

>> Clique em "Salvar", arraste o gadget para a área desejada e clique em "Salvar Organização".

>> Vá em seu blog e veja como ficou.

Com a conclusão do processo, o widget redes sociais com ícones retina já estará funcionando normalmente em seu blog. Caso tenha experiência com códigos é também possível alterá-lo para uma modificação de estilos, padrões e ainda colocar diretamente no HTML do template sem a necessidade de utilizar o gadget HTML/Javacsript, porém, como citado recomendado para usuários avançados.

Deixe seu comentário, ele é a motivação do nosso trabalho.
Proxima
« Anterior
Anterior
Proxima »