.

sábado

Barra Para Compartilhar Com Efeito Hover No Final das Postagens

ACESSOS:
AQUI

Nesta postagem compartilho com vocês mais esta barra de compartilhamento no final dos posts.
Como vocês podem ver, ela tem um efeito expansível ao passar o mouse sobre ela. 

Enfim.





Para coloca-la no blogger... Entre em "Modelo" - "Editar HTML", dê um Ctrl + F e procure pela tag

]]></b:skin>

Tendo encontrada a tag, ACIMA dela cole o seguinte código
/* Barra de Compartilhamento com Efeito Hover By DicasHot
------------------------------------------------------------------------------------------------------------------------- */
#button-count{width:100%;overflow:hidden;background:#34495E;margin:10px 0;padding:3px}
#button-count span{float:left;position:relative;font-size:16px;color:#fff;margin:12px 10px 12px 5px}
.button{background:#DCE0E0;position:relative;display:block;float:left;height:40px;overflow:hidden;width:156px;margin:4px}
.ikons{display:block;float:left;position:relative;z-index:3;height:100%;vertical-align:top;width:38px;text-align:center}
.ikons i{color:#fff;line-height:42px}
.slide{z-index:2;display:block;height:100%;left:38px;position:absolute;width:118px;margin:0}
.slide p{font-family:Open Sans;font-weight:400;border-left:1px solid rgba(255,255,255,0.35);color:#fff;font-size:16px;left:0;position:absolute;text-align:center;top:10px;width:100%;margin:0}
.button .slide{-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-ms-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out}
.facebook .fb_iframe_widget{display:block;position:absolute;right:5px;top:0;z-index:1}
.twitter iframe{left:50px;top:10px;z-index:1;display:block;position:absolute}
.google #___plusone_0{width:90px!important;top:10px;right:5px;position:absolute;display:block;z-index:1}
.facebook .ikons,.facebook .slide{background:#305c99}
.twitter .ikons,.twitter .slide{background:#00cdff}
.google .ikons,.google .slide{background:#d24228}
.facebook:hover .slide,.twitter:hover .slide,.google:hover .slide{left:180px}

Agora, procure pela tag

<div class='post-footer-line post-footer-line-3'/>

Ou


<div class='post-footer'>

Ou


<div class='post-footer-line post-footer-line-1'>

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


<div id='button-count'>
<span>COMPARTILHAR:</span>
<div class='facebook button'>
<i class='ikons'>
<i class='fa fa-facebook'/>
</i>
<div class='slide'>
<p>
Curtir
</p>
</div>
<div class='fb-like fb_iframe_widget' data-action='like' data-layout='button_count' data-share='false' data-show-faces='false' fb-iframe-plugin-query='action=like&amp;app_id=&amp;href=http%3A%2F%2Fver756.blogspot.com.br%2F2014%2F04%2Ftemplate-blogger-12.html&amp;layout=button_count&amp;locale=pt_BR&amp;sdk=joey&amp;share=false&amp;show_faces=false' fb-xfbml-state='rendered'><span style='vertical-align: bottom; width: 86px; height: 20px;'><iframe allowtransparency='true' class='' frameborder='0' height='1000px' name='f3e1303b68' scrolling='no' src='http://www.facebook.com/plugins/like.php?action=like&amp;app_id=&amp;channel=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter%2FdgdTycPTSRj.js%3Fversion%3D40%23cb%3Df363ee7028%26domain%3Dver756.blogspot.com.br%26origin%3Dhttp%253A%252F%252Fver756.blogspot.com.br%252Ff3b86967%26relation%3Dparent.parent&amp;href=http%3A%2F%2Fver756.blogspot.com.br%2F2014%2F04%2Ftemplate-blogger-12.html&amp;layout=button_count&amp;locale=pt_BR&amp;sdk=joey&amp;share=false&amp;show_faces=false' style='border: none; visibility: visible; width: 86px; height: 20px;' title='fb:like Facebook Social Plugin' width='1000px'/></span></div>
</div>
<div class='google button'>
<i class='ikons'>
<i class='fa fa-google-plus'/>
</i>
<div class='slide'>
<p>
+1
</p>
</div>
<div style='float:left; width:15%'><g:plusone expr:href='data:post.url'/></div>
</div>
<div class='twitter button'>
<i class='ikons'>
<i class='fa fa-twitter'/>
</i>
<div class='slide'>
<p>
Tweet
</p>
</div>
<a class='twitter-share-button' data-lang='en' href='https://twitter.com/share'>Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=&quot;https://platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);</script>
</div>
</div>

Tendo colado o código, basta salvar e pronto!!!