Nesta postagem compartilho com vocês ícones para redes sociais com efeito jquery para deixar seu blog muito mais da ora!!!
Para colocar no blogger... Entre em "Modelo" - "Editar HTML", dê um Ctrl + F e procure pela tag
]]></b:skin>
Tendo encontrada a tag, cole ACIMA dela o seguinte código.abt-social-slide ul li{list-style:none;border-bottom:none;padding:0}
.abt-social-slide li a{width:59px;height:59px;float:left;text-indent:-99999px;border:solid 1px #222121;border-radius:5px;-webkit-transition:All .3s ease-out;-moz-transition:All .3s ease-out;-o-transition:All .3s ease-out;margin:5px 5px 10px;padding:0}
.abt-social-slide li a.facebook{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVVPJJhbBzsyZk-oGsYrlLNYSRgSioaLDQYE4X1lcYrZZ3to0oW6Yo0EM8kqEWZ3KlLuWJSRl0J6p24cgXS6BEALcp-mKwOeLMPXCdiBgP0G_oD-Nlgd7t2KmAoj2FKUdSuvK2pwd0kQ/s1600/facebook.png) no-repeat 0 -88px}
.abt-social-slide li a.facebook:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVVPJJhbBzsyZk-oGsYrlLNYSRgSioaLDQYE4X1lcYrZZ3to0oW6Yo0EM8kqEWZ3KlLuWJSRl0J6p24cgXS6BEALcp-mKwOeLMPXCdiBgP0G_oD-Nlgd7t2KmAoj2FKUdSuvK2pwd0kQ/s1600/facebook.png) no-repeat 0 0}
.abt-social-slide li a.twitter{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKb2HD91HvbMQa6zynRepH1oL3U2MgOpCQJrUqmq79mpQPQEbkQmEdVG41QSTIyYqhxSUMs-eM3LLLBrFKYEQKMkrBotn1v7dx7HDqeu7b4AcAuR2zQuRhBrLbo_WQv7qb-AMM38nWyg/s1600/twitter-1.png) no-repeat 0 -88px}
.abt-social-slide li a.twitter:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKb2HD91HvbMQa6zynRepH1oL3U2MgOpCQJrUqmq79mpQPQEbkQmEdVG41QSTIyYqhxSUMs-eM3LLLBrFKYEQKMkrBotn1v7dx7HDqeu7b4AcAuR2zQuRhBrLbo_WQv7qb-AMM38nWyg/s1600/twitter-1.png) no-repeat 0 0}
.abt-social-slide li a.google-p{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6Pq1ZlRHbWUzPIEWCXb3xfP-TQTdR1lIjmmgrOpfMLwpuvXIfem-9bQ_JPHaPnhCh9owQuBlhyphenhyphenkkzS1bKUYShLU2ggP28VrtZ2DCgcK50KVc4f80Z4ToZ6QfLCLPjgtcsxFhNh3Mqdg/s1600/google.png) no-repeat 0 -88px}
.abt-social-slide li a.google-p:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6Pq1ZlRHbWUzPIEWCXb3xfP-TQTdR1lIjmmgrOpfMLwpuvXIfem-9bQ_JPHaPnhCh9owQuBlhyphenhyphenkkzS1bKUYShLU2ggP28VrtZ2DCgcK50KVc4f80Z4ToZ6QfLCLPjgtcsxFhNh3Mqdg/s1600/google.png) no-repeat 0 0}
.abt-social-slide li a.rss{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibVd-tmt0DSh3nOaQAkDldIE_bICOBtCNZukqreflJ44o5VYoK5o_bCj0t0DVH9nBnb-AvKYRjsVdvnKSLY1RjMzYrMmQ1j_sfiu-8ngKyR1gEHkfKUh4jtLSeHUJgZIC0xiokuXKQyQ/s1600/twitter.png) no-repeat 0 -88px}
.abt-social-slide li a.rss:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibVd-tmt0DSh3nOaQAkDldIE_bICOBtCNZukqreflJ44o5VYoK5o_bCj0t0DVH9nBnb-AvKYRjsVdvnKSLY1RjMzYrMmQ1j_sfiu-8ngKyR1gEHkfKUh4jtLSeHUJgZIC0xiokuXKQyQ/s1600/twitter.png) no-repeat 0 0}
Tendo colado o código, salve e feche por que esta parte já está finalizada.
Agora, entre em "Layout" - "Adicionar um Gadget" e cole o seguinte código
<div class="abt-social-slide">
<ul>
<li><a class="facebook" href="https://www.facebook.com/dicashot" target="_blank">Facebook</a></li>
<li><a class="twitter" href="Seu twitter" target="_blank">Twitter</a></li>
<li><a class="google-p" href="sua URL do google plus" target="_blank">Google plus</a></li>
<li><a class="rss" href="http://feedburner.google.com/fb/a/mailverify?uri=dicashot" target="_blank">Rss</a></li>
</ul></div> Widget by <a href="http://dicashot.blogspot.com.br/2013/11/redes-sociais-com-efeito-jquery_25.html">Dicashot</a>
Faça as modificações nas parte destacadas de azul no código.
Tendo feito isto no código, basta salvar e pronto!!!
Nenhum comentário:
Postar um comentário