Cara Memasang Widget Share Button Keren di Blog

Cara Memasang Widget Share Button Keren di Blog - Ada banyak sekali cara untuk memasang wigdet social share button baik dengan menggunakan javascript maupun tanpa menggunakan javascript. Mulai dari yang berbentuk sederhana sampai yang bergaya kekinian, flat style.

Sobat tentu sudah tau kegunaan dari tombol share ini, yups wigdet share button berfungsi untuk membagikan artikel yang diposting di blog ke social networking seperti Facebook, Twitter, dan Google Plus. Semakin banyak orang yang menyukai dan membagikan postingan blog ke social media maka akan memberikan nilai plus tersendiri untuk blog.

Baca juga vroh : Cara Membuat Post Info dan Tags di Blogger

Tombol share button yang saya bagikan pada postingan kali ini tidak hanya keren tetapi juga ringan. Widget share button ini tidak menggunakan javascript sehingga tidak akan mengganggu kecepatan blog sobat.

Memasang Social Share Button Keren Ala Blog Bamz di Blog

1. Login dulu ke akun blogger sobat.
2. Masuk ke Template => Edit HTML.
3. Pasang kode cssnya, letakkan diatas ]]></b:skin> atau </style> :

   /* ARTICLE SHARING
   ==================================================== */
   .article-share {width: 100%;display: block;overflow: hidden;}
   .article-share-fb-cont, .article-share-other-cont {float: left;width: 114px;padding: 5px;height: 41px;}
   .article-share-tw-cont, .article-share-other-cont, .article-share-like-cont {float: left;width: 114px;height: 41px;padding: 5px;}
   .article-share-fb, .article-share-tw, .article-share-gp, .article-share-li, .article-share-pi {float: left;display: block;background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic71befecvTHD7Uwam7WlwW7Uu1DF4VwZy-E-KgAENOEpWo8wnl5M2H1BooFx_7d9jRRUcOIElcMSzztza9-dIjUTF-AEhStdhhe4nznglPncDeVXLNeHFHWSJSQYVIwvwLfieRhcPv-Y/s1600/share.png') no-repeat;width: 42px;height: 41px;margin-right: 3px;}
   .article-share-fb-label {color: #2d609b;}
   .article-share-fb-label, .article-share-tw-label, .article-share-gp-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;}
   .article-share-tw {background-position: 0 -43px;}
   .article-share-tw-label {color: #00c3f3;}
   .article-share-gp {background-position: 0 -86px;}
   .article-share-gp-label {color: #f00;}

4. Cari kode yang kira-kira seperti ini :

   <b:if cond='data:blog.pageType == &quot;item&quot;'>
     <data:post.body/>
   </b:if>
   <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
     <data:post.body/>
   </b:if>
         <div style='clear: both;'/> <!-- clear for photos floats -->
       </div>

   Tepat dibawah kode tersebut, tambahkan kode berikut untuk memanggil kode css yang sudah dipasang tadi

   <b:if cond='data:blog.pageType == &quot;item&quot;'>
   <div class='article-share'>
   <div class='article-share-fb-cont'>
   <a class='article-share-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='article-share-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='article-share-tw-cont'>
   <a class='article-share-tw' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow' target='_blank'/>
   <a class='article-share-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='article-share-other-cont'>
   <a class='article-share-gp' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'/>
   <a class='article-share-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>
   </b:if>

^^Semoga Berhasil^^