segunda-feira, 20 de abril de 2015

Social widget Flutuante redes sociais para blogger

social-widget-redes-sociais-flutuante-para-blogger


Esta é uma das melhores ferramenta social para blogger. Este widget pode fazer seus leitores a se envolver mais com você nas redes sociais. O Widget incluem contador social do botão tweet, facebook, , botão G + juntamente com botão de compartilhamento AddThis. O widget é flutua na parte inferior do seu blog e exibe apenas nas páginas de postagem no blog. O plugin é muito simples e criado puramente com CSS e jQuery. Assim, esta ferramenta também não vai acrescentar muita carga sobre a velocidade do seu site.

Neste post traz para você uma nova barra de mídia social flutuante que flutua na parte inferior.


Bem pessoal, primeiro eu criei esta ferramenta apenas para meu blog porque eu perceber que ele pode ser benéfico se eu fornecer uma opções sociais para os visitantes na parte inferior que flutua junto com os visitantes e quando rolar para baixo. Então, por isso é bar flutuante sociais e implementar no seu blog 
Primeiro tenho nenhum plano para publicá-lo, mas depois mudei de idéia quero compartilhar este widget com vocês.

Flutuante bar mídia social

Adicionar a blogger
Ir para Blogger Template dashboard >>
Backup de seu Template
clique em Editar HTML
Não procure pela tag ]]></b:skin>
acima do]]> </ b: skin> tag cole o seguinte código:

#pmbottom
{
position:fixed;
bottom:0px;
}
#barcredits
{
text-align:right;
font-size:12px;
}

Agora procure por <data:post.body/> 
e logo acima dele cole o seguinte código:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='pmbottom'>
<div style='background:#ecf0f1; border:1px solid #ddd; -moz-border-radius:9px; -webkit-border-radius:9px; border-radius:9px; padding:5px; box-shadow: 3px 3px 3px #CCCCCC; height:30px;'> <table border='0'> <tr>
<td><!-- Twitter -->
<a class='twitter-share-button' data-count='horizontal' data-lang='en' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow'/> <b:if cond='data:post.isFirstPost'> <script src='http://platform.twitter.com/widgets.js' type='text/javascript'> </script> </b:if> </td>
<td><!--Facebook-->
<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; margin-left:0px; width:100px; height:20px;'/> </td>
<td><div style='margin-right:25px;'><!-- STUMBLE UPON -->
<script expr:src='&quot;http://www.stumbleupon.com/hostedbadge.php?s=1&amp;r=&quot; + data:post.url'/></div> </td> <td><div style='margin-right:5px;'><!-- GOOGLEPLUS --> <g:plusone expr:href='data:post.url' size='medium'/> </div> </td>
<td><!-- AddThis Button BEGIN -->
<div class='addthis_toolbox addthis_default_style '> <a class='addthis_counter addthis_pill_style'/> </div> <script src='http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4de3b2d654f56f28' type='text/javascript'/> <script type='text/javascript'> var addthis_config = { ui_cobrand: &quot;createoneblog.blogspot.com&quot;, ui_header_color: &quot;#ffffff&quot;, ui_header_background: &quot;#0080FF&quot; } </script>
  

As personalizações 
Depois de fazer os passos acima, agora é hora de fazer alguma personalização pouco no código para que o widget pode facilmente adequar conforme queira
Este widget só aparece em seus posts não na homepage. Para fazer isso, também aparecem na home page simplesmente remover o código de cor ousada amarela na parte superior e inferior.
Para mudar a cor do widget do fundo de acordo com o que possuía simplesmente substituir o # ecf0f1, com a sua cor.
Não se esqueça de mudar o createoneblog.blogspot.com e  com nome do seu blog.
agora é só curtir e deixar seu blog ainda mais elegante com esse incrivel widget social flutuante 


NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post

Nenhum comentário:

Postar um comentário

NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post
 

Delivered by FeedBurner