Widgets

Icones horizontal de compartilhamento social para blogger

0 comentários
Adicionando Icones horizontal de compartilhamento social  no blogger
icones sociais horizontais
 
Como sempre expus aqui, a importância do compartilhamento social para a divulgação e valorização de seus posts nas redes sociais, e observando que muitos dos widgets disponibilizados, contêm erros e nem sempre são funcionais, estou por hora disponibilizando este widget em forma de barra horizontal, que fica muito bonito e agrega valor ao seu blog, e ainda acrescenta um contador de comentários junto aos titulo dos seus posts.. e muito fácil de ser implantado.. Caso tenha, alguma sugestão ou dúvida, ao final me acione, que terei muito prazer em dirimi-las.
Vamos  agora adicionar Icones horizontal de compartilhamento social   com Contador de comentários logo abaixo titulo do post no Blogger. Para este simple processo, basta seguir os passos abaixo e tudo estará feito.
  • Vá para ​​Blogger> Modelo> Editar HTML
  • Clique dentro do Editor e encontre </ head> .... use ctr+f e digite  na caixa que aparece
  • Cole o seguinte código acima de </head>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
// Twitter
(function (a, b, c){var d=a.getElementsByTagName(b)[0];if (!a.getElementById(c)){a=a.createElement(b);a.id=c;a.src=&quot;//platform.twitter.com/widgets.js&quot;;d.parentNode.insertBefore(a, d)}})(document, &quot;script&quot;, &quot;twitter-wjs&quot;);
</script>
<style type='text/css'>
/*---- barra  horizontal de icones sociais  por tudoseoblog ---- */
#SocialShareBar {
float: left;
border-top: 1px solid #eaeaea;
border-bottom: 1px solid #eaeaea;
width: 610px;
margin-bottom: 20px;
margin-left: -10px;
margin-top: 10px;
position: relative;
clear:both;
z-index: 9999;
}
.social-heading h5 {
float: left;
padding-right: 20px;
padding-top: 13px;
text-transform: uppercase;
font-weight: bold;
margin: 0px;
padding-left: 10px;
font-family: &#39;Lora&#39;,Arial,Helvetica,Geneva,sans-serif;
font-size: 15px;
color: #555555;
}
.twitter-tweet, .facebook-like, .google-plus, .comment-counter {
float: left;
border-left: 1px solid #eaeaea;
padding-left: 18px;
padding-top: 15px;
padding-bottom: 10px;
width: auto;
height: 22px;
}
.comment-counter a {
text-decoration: none !important;
}
.share-bubble{
background: url(http://4.bp.blogspot.com/-dvG3kQrRsJc/UoKM0HSkjUI/AAAAAAAAAbw/jZnkyNLnS9I/s1600/Comments.png) no-repeat;
height: 22px;
min-width: 30px;
float: left;
margin: 4px 5px 0px 5px;
}
.google-plus {
margin-left: 20px;
}
</style>
</b:if>
  • Agora, procure a seguir o código mencionado abaixo:.
<b:if cond='data:blog.metaDescription == &quot;&quot;'>
  • Agora Cole o código a seguir, logo abaixo do trecho acima mencionado:
<!-- Barra de icones sociais horizontal por Mauricio Ferraz -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='SocialShareBar'>
<div class='social-heading'>
<h5>SOCIALIZE IT &#8594;</h5>
</div>
<div class='twitter-tweet'>
<a class='twitter-share-button' expr:data-text='data:post.title' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a>
</div>
<div class='facebook-like'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp; action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:80px; height:21px;'/>
</div>
<div class='google-plus'>
<div class='g-plusone' data-size='medium' expr:data-href='data:post.url'/>
</div>
<div class='comment-counter'>
<div class='share-bubble'/>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<data:post.numComments/></a>
</div>
</div>
</b:if>
  • Agora click em  Salvar modelo.

Espero que tenham gostado  deste widget, Caso tenham alguma dúvida não hesitem  em perguntar.

O que achou deste post? comente agora

Todo comentário é bem vindo, pois acrescenta muito aos nossos posts, portanto, fique a vontade para debater sobre nossos assuntos...

setaretornoaotopo