mulherzices
EU NÃO TENHO ATITUDE
NA HORA DA PAQUERA!
pontoperdido
Ponto Perdido
XXX (+18)
sexxxlife
Foi dormir com o padrasto
e acabou liberando!!! (+18)
Mega Humorado”
O mito do photoshop
Mega Humorado



Barra Para Compartilhar Com Efeito Hover No Final das Postagens


bandeiradois
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