Barra Para Compartilhar Com Efeito Hover No Final das Postagens

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!!!