Os melhores vídeos de
Riley Reid (+18) - FireLink
Mulher diz ter sido demitida
por ser 'muito bonita' (+18)
Especial de Natal da Bella da Semana:
Emiliana Agacci
Sites que vocês adultos
Vão Gostar - Link Fixo

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



Barra Para Compartilhar Com Efeito Hover No Final das Postagens Barra Para Compartilhar Com Efeito Hover No Final das Postagens Reviewed by Muca on 5/03/2014 04:39:00 PM Rating: 5