Cara Membuat Tombol Share Di Bawah Posting Blog

Tutorial - Tombol share dalam blog sangat penting untuk meningkatkan pengunjung ke blog kamu. Namun untuk menarik perhatian agar pengunjng blog mau berbagi artikel yan dibaca ke berbagai jejaring sosial, tentunya kamu membutuhkan tombol share yang cukup keren.



1. Login ke blog kamu
2. Pilih Edit HTML > Jangan lupa Centang Expand Widget Template > Cari kode <data:post.body/>
3. Setelah ketemu letakan kode di bawah ini tepat di atas kode nomor 2.

• <style>

  /*--------Social Sharing Widget Below Blog Post ------*/

  .sharebelow a {

  display:block;

  height:48px;

  width:48px;

  padding:0 4px;

  float:left;

  background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoKla4tn01UMo1yUGd0ibx-s14yKJ89qcMha5tqwbJL_OmNvbvp1pZ0pQCsTxD_SbxyQ92MCqBfdZCPmwIKN3qUDcZDcmw0l_FCuWHQbAXrn2kx7TAlFEUpHYHiV3SgGnvTWlX2jeOU3U/s1600/sharebelow.png) no-repeat;

  }

  .sharebelow  a.googleplus {

  background-position: 0px -348px;

  }

  .sharebelow  a.googleplus:hover {

  background-position: 0px -406px;

  }

  .sharebelow  a.pinterest {

  background-position: 0px -464px;

  }

  .sharebelow  a.pinterest:hover {

  background-position: 0px -522px;

  }

  .sharebelow  a.delicious {

  background-position: 0px 0px;

  }

  .sharebelow  a.delicious:hover {

  background-position: 0px -58px;

  }

  .sharebelow  a.digg {

  background-position: 0px -116px;

  }

  .sharebelow  a.digg:hover {

  background-position: 0px -174px;

  }

  .sharebelow  a.stumbleupon {

  background-position: 0px -812px;

  }

  .sharebelow  a.stumbleupon:hover {

  background-position: 0px -870px;

  }

  .sharebelow  a.technorati {

  background-position: 0px -928px;

  }

  .sharebelow  a.technorati:hover {

  background-position: 0px -406px;

  }

  .sharebelow  a.twitter {

  background-position: 0px -928px;

  }

  .sharebelow  a.twitter:hover {

  background-position: 0px -986px;

  }

  .sharebelow  a.facebook {

  background-position: 0px -232px;

  }

  .sharebelow  a.facebook:hover {

  background-position: 0px -290px;

  }

  .sharebelow  a.reddit {

  background-position: 0px -580px;

  }

  .sharebelow  a.reddit:hover {

  background-position: 0px -638px;

  }

  .sharebelow  a.rss {

  background-position: 0px -696px;

  }

  .sharebelow  a.rss:hover {

  background-position: 0px -754px;

  }

  .shareandbookmark{

  margin:10px 0px;

  color:#333333;

  font-weight:bold;

  font-size:18px;

  font-family:sans-serif;

  }

  </style>

  <div class='sharebelow'>

  <b:if cond='data:blog.pageType == &quot;item&quot;'>

  <div class="shareandbookmark">

  Kindly Bookmark and Share it:</div>

  <!--Facebook-->

  <a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Share this on Facebook :&gt;'/>

  <!--Google Plus-->

  <a class='googleplus' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:post.url' rel='external nofollow' target='_blank' title='+1 it :&gt;'/>

  <!-- Twitter -->

  <a class='twitter' expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Tweet this :&gt;'/>

  <!-- Pinterest -->

  <a class='pinterest'  href="http://pinterest.com/" rel='external nofollow' target='_blank' title='Pin it :&gt;'/>

  <!-- Delicious -->

  <a class='delicious' expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Add this to Delicious :&gt;'/>

  <!--Stumble-->

  <a class='stumbleupon' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Stumble this :&gt;'/>

  <!--DIGG-->

  <a class='digg' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot;  + data:post.url' rel='external nofollow' target='_blank' title='Digg this :&gt;'/>

  <!-- Reddit -->

  <a class='reddit' expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Add this to Reddit :&gt;'/>

  <!--RSS -->

  <a class='rss' expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' target='_blank' title='Bookmark :&gt;'/>

  </b:if></div>

  <div style="clear:both"/>

4. Simpan dan lihat hasilnya.