Cara Membuat Tombol Share Pada Blogger

Cara Membuat Tombol Share Pada Blogger

Bagi sebuah blog tombol share sangatlah berguna, selain sebagai sarana bagi pengunjung atau pembaca membagikan koten yang dirasa bagus ke jejaring sosial seperti Facebook, Twitter, Google+ dan masih banyak lagi situs jejaring sosial yang lain, bisa juga untuk menaikan trafic dari sebuah blog tersebut.

Namun tombol share bawaan dari blogspot dapat kita ganti dengan style yang lain agar lebih menarik perhatian pengunjung atau pembaca untuk mengklik dan membagikan sebuah konten ke media sosial.

Silahkan ikuti beberapa langkah dibawah ini.

  • Login ke blogger lalu masuk kemudian klik Template > Klik Edit HTML kemudian carilah kode
    <data:post.body/>
  • Setelah itu letakan kode berikut ini tepat dibawah kode tadi
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div class='tombol-berbagi'>
    <div class='tombol-berbagi-fb'>
    <a class='tombol-berbagi-fb' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'/>
    <a class='tombol-berbagi-fb-label' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'> Share on Facebook</a>
    </div>
    <div class='tombol-berbagi-tw'>
    <a class='tombol-berbagi-tw' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow' target='_blank'/>
    <a class='tombol-berbagi-tw-label' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow' target='_blank'>Share on Twitter</a>
    </div>
    <div class='tombol-berbagi'>
    <a class='tombol-berbagi-gp' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'/>
    <a class='tombol-berbagi-gp-label' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Share on Google+</a>
    </div>
    <div class='tombol-berbagi'>
    <a class='tombol-berbagi-lin' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;amp;url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' rel='nofollow' target='_blank'/>
    <a class='tombol-berbagi-lin-label' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;amp;url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' rel='nofollow' target='_blank'>Share on LinkedIn</a>
    </div>
    </div>
    </b:if>
  • Selanjutnya taruh kode dibawah ini tepat diatas ]]></b:skin> atau </style>
    /* CSS Share Button */
    .tombol-berbagi{display:block;position:relative;height:43px;line-height:43px;padding:10px;border-top:1px solid #dadada;border-bottom:1px solid #dadada;margin:auto}
    .tombol-berbagi-fb,.tombol-berbagi{float:left;width:21%;padding:0 10px;height:inherit}
    .tombol-berbagi-tw,.tombol-berbagi,.tombol-berbagi-lk{float:left;width:21%;height:inherit;padding:0 10px;border-left:solid 1px #dadada}
    .tombol-berbagi-fb,.tombol-berbagi-tw,.tombol-berbagi-gp,.tombol-berbagi-lin,.tombol-berbagi-pi{float:left;display:block;background:url('http://2.bp.blogspot.com/-FYy1a99SDXE/VXuCSz_hYjI/AAAAAAAACbg/8dz4LkDIHYY/s1600/share.png') no-repeat;width:42px;height:41px;margin-right:3px}
    .tombol-berbagi-fb-label{color:#2d609b}
    .tombol-berbagi-fb-label,.tombol-berbagi-tw-label,.tombol-berbagi-gp-label,.tombol-berbagi-lin-label{float:left;width:58px;height:inherit;font-size:12px;font-family:'Open Sans Bold',Arial,sans-serif;line-height:14px;margin:5px 0 0 4px}
    .tombol-berbagi-tw{background-position:0 -43px}
    .tombol-berbagi-tw-label{color:#00c3f3}
    .tombol-berbagi-gp{background-position:0 -86px}
    .tombol-berbagi-gp-label{color:#f00}
    .tombol-berbagi-lin{background-position:0 -129px}
    .tombol-berbagi a{color:#999;transition:all .3s;}
    .tombol-berbagi a:hover{color:#7cb0ed}
    
    @media only screen and (max-width:640px){
    .tombol-berbagi,.tombol-berbagi-fb{display:inline-block;float:none;width:48%;padding:0;height:inherit}
    .tombol-berbagi,.tombol-berbagi-tw,.tombol-berbagi-lk{float:left;width:48%;padding:0;border-left:0}}
  • Selanjutnya simpan template dan lihatlah hasilnya.