domingo, 26 de abril de 2015

Como adicionar social Sharing Widget abaixo Posts do Blog



social-sharing-button-abaixo-dos-post-blogger


Botões de  Compartilhamento  Social estão ficando cada vez mais importante para os blogueiros. Presença na mídia social é agora mais importante do que nunca. Os motores de busca como Google, Bing etc. estão dando preferência a sites com boa presença de mídia social nos resultados da pesquisa. Assim, cada webmaster ou blogueiro está procurando várias formas de aumentar a presença na mídia social para  seu blog ou website. Uma das melhores maneiras de obter mais ações, likes e tweets é adicionar botões de compartilhamento social em seu site ou blog

Esse Widget realmente é muito eficaz ele vai incrementar o seu Blog nas Redes Sociais experimente agora mesmo vamos ao passo para Instalar no blogger 

Adicionar social Sharing Widget abaixo no blog:

1. Faça login na sua conta do Blogger.

2. Vá para o modelo e fazer backup de seu modelo.

3. Agora clique em "Editar HTML" e procure a seção "</ head>" para usando as teclas Ctrl + F.

4. Copie o código fornecido abaixo e cole-o logo acima </ head> 

<b:if cond=’data:blog.pageType == “item”‘>

<script type=’text/javascript’>

// Twitter
undefinedfunction undefineda, b, c){var d=a.getElementsByTagNameundefinedb)[0];if undefined!a.getElementByIdundefinedc)){a=a.createElementundefinedb);a.id=c;a.src=”//platform.twitter.com/widgets.js”;d.parentNode.insertBeforeundefineda, d)}})undefineddocument, “script”, “twitter-wjs”);
// Stumbleupon
undefinedfunction undefined){var a=document.createElementundefined”script”);a.type=”text/javascript”;a.async=true;a.src=”https://platform.stumbleupon.com/1/widgets.js”;var b=document.getElementsByTagNameundefined”script”)[0];b.parentNode.insertBeforeundefineda, b)})undefined);

</script>

<style type=’text/css’>

/*——–Social Sharing Button by SBT——–*/
#SocialSBT {
    float: left;
    border-top: 1px solid #eaeaea;
    border-bottom: 1px solid #eaeaea;
    width: 610px;
    margin-bottom: 20px;
    margin-left: -10px;
    margin-top: 10px;
}

.headingsharer h5 {
    float: left;
    padding-right: 20px;
    padding-top: 18px;
    text-transform: uppercase;
    font-weight: bold;
    margin: 0px;
    padding-left: 10px;
}

.tweetSBT, .fbSBT, .g-plusones, .stumbleSBT {
    float: left;
    border-left: 1px solid #eaeaea;
    padding-left: 18px;
    padding-top: 15px;
    padding-bottom: 10px;
}

.g-plusones {
    margin-left: 20px;
}

</style>

</b:if>

5. Clique na opção "Salvar modelo".

6. Agora, procure por <div class = "post-footer">

7. Adicione o seguinte código logo abaixo.

<b:if cond=’data:blog.pageType == “item”‘>
<div id=’SocialSBT’>
 <div class=’headingsharer’>
  <h5>SOCIALIZE IT →</h5>
 </div>
 <div class=’tweetSBT’>
  <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=’fbSBT’>
  <iframe src=”//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.smartbloggertricks.com&amp;width=80&amp;layout=button_count&amp;action=like&amp;show_faces=false&amp;share=false&amp;height=21&amp;appId=388183741216818″ scrolling=”no” frameborder=”0″ style=”border:none; overflow:hidden; width:80px; height:21px;” allowTransparency=”true”></iframe>
 </div>
 <div class=’g-plusones’>
  <div class=’g-plusone’ data-size=’medium’ expr:data-href=’data:post.url’/>
  </div>
  <div class=’stumbleSBT’>
   <su:badge expr:location=’data:post.url’ layout=’1’/>
  </div>
 </div>
 </b:if>

Clique em Salvar modelo.

É isso aí, agora visualize no seu blogger abaixo do seu post 
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