Cara Membuat Responsive Share Button Dengan Counter di Blog

Cara Membuat Responsive Share Button Dengan Counter di Blog - Halo, sobat blogger semua. Apa kabar? Pada kesempatan kali ini saya akan berbagi sebuah widget yang saya rasa sudah tidak asing lagi bagi para Blogger. Yap, bener banget. Widget yang akan saya bagikan kali ini adalah widget share button yang sering sobat temui di berbagai blog.

Fungsi dari widget share button ini masih sama seperti widget share button yang lainnya, yaitu memungkinkan pengunjung blog untuk berbagi artikel yang mereka baca yang dirasa bermanfaat ke sosial media dengan mudah.

Lalu kenapa harus memasang widget share button ini?

Kenapa sobat harus memasang widget share button yang akan saya bagikan kali ini, itu karena widget share button ini sudah mendukung tampilan yang sangat responsive. Selian itu, widget share button ini juga dilengkapi dengan plugin counter yang memungkinkan untuk menampilkan jumlah share yang di klik oleh pengunjung. Untuk tampilan dari share button ini bisa sobat lihat seperti pada gambar dibawah ini, lengkap dengan fitur responsive-nya.

Cara Membuat Responsive Share Button Dengan Counter di Blog

Widget ini menggunakan fontawesome, pastikan di dalam template sudah terdapat link fontawesome.

1. Login ke Blogger > Template Editor > Tambahkan kode di bawah ini sebelum ]]></b:skin> atau </style>

/* Share Button dengan Counter untuk Blogger by http://semua-tutorialku.blogspot.com */
.Semua_Tutorialku_Blog { position: relative; background: none; z-index: 2; width: 100%; padding: 10px 0; display: inline-block; font-family: sans-serif; margin: 5px 0px; border-top: 1px dotted rgba(0, 0, 0, 0.05); border-bottom: 1px dotted rgba(0, 0, 0, 0.05); } 
.Semua_Tutorialku_Blog .Semua_Tutorialku { display: block; } .Semua_Tutorialku_Blog .Semua_Tutorialku .wrap { text-align: center; margin: 0 auto; display: inline-block; min-width: 41px; }  .Semua_Tutorialku_Blog .Semua_Tutorialku .wrap1 { display: inline-block; width: 31px; float: left; }  .Semua_Tutorialku_Blog .Semua_Tutorialku ul { margin: 0; padding: 0; } 
.Semua_Tutorialku_Blog .Semua_Tutorialku ul li a, .Semua_Tutorialku_Blog .Semua_Tutorialku ul li a:hover { color: #FFF !important; cursor: pointer; line-height: 25px; height: 100%; display: block; text-decoration: none; } 
.Semua_Tutorialku_Blog .Semua_Tutorialku ul li { list-style: none; list-style-type: none; padding: 0; margin: 1px; float: left; width: 16%; max-width: 115px; display: inline-block; font-size: 13px; overflow: hidden; text-align: left; height: 25px; line-height: 25px; color: #fff; border: 1px solid rgba(0,0,0,0.04); -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } .Semua_Tutorialku_Blog .Semua_Tutorialku ul li .fa { color: #fff; font-size: 17px; font-weight: normal; font-family: FontAwesome; display: inline-block; text-align: center; padding: 0; height: 25px; line-height: inherit; width: 30px; background-color: rgba(0,0,0,0.1); border-right: 1px solid rgba(0,0,0,0.05); } 
.Semua_Tutorialku_Blog .Semua_Tutorialku .btn_fb { background: #3a579a; } .Semua_Tutorialku_Blog .Semua_Tutorialku .btn_fb:hover { background: #314a83; }  
.Semua_Tutorialku_Blog .Semua_Tutorialku .btn_twtr { background: #00abf0; } .Semua_Tutorialku_Blog .Semua_Tutorialku .btn_twtr:hover { background: #0092cc; }  
.Semua_Tutorialku_Blog .Semua_Tutorialku .btn_gplus { background: #df4a32; } .Semua_Tutorialku_Blog .Semua_Tutorialku .btn_gplus:hover { background: #be3f2b; }  
.Semua_Tutorialku_Blog .Semua_Tutorialku .btn_pntrst { background: #cd1c1f; } .Semua_Tutorialku_Blog .Semua_Tutorialku .btn_pntrst:hover { background: #ae181a; }  
.Semua_Tutorialku_Blog .Semua_Tutorialku .btn_linkdin { background: #2554BF; } .Semua_Tutorialku_Blog .Semua_Tutorialku .btn_linkdin:hover { background: #224EB4; } 
.Semua_Tutorialku_Blog .Semua_Tutorialku .share.h6 { font-size: 10px; font-weight: bold; text-shadow: none!important; text-decoration: none; text-align: center; color: #000000; border-top: 3px solid #FFF600 !important; border-bottom: 0; padding: 0px !important; padding-top: 5px!important; margin: 0 !important; line-height: 8px; border-radius: 75% 0; } .Semua_Tutorialku_Blog .Semua_Tutorialku .share { border: none; margin: 0px 5px 0px 1px; overflow: visible !important; width: 95px !important; } 
.Semua_Tutorialku_Blog .Semua_Tutorialku .share .count.h4 { font-size: 18px; font-weight: bold; text-shadow: none; text-decoration: none; font-family: sans-serif; text-align: center; color: #FF0000; line-height: 15px; margin-top: 0px; margin: -4px 0px 2px 0; min-height: 15px; padding: 0px; border: none; } .Semua_Tutorialku_Blog .Semua_Tutorialku .btn_fb .share-btn, .Semua_Tutorialku_Blog .Semua_Tutorialku .btn_twtr .share-btn, .Semua_Tutorialku_Blog .Semua_Tutorialku .btn_gplus .share-btn, 
.Semua_Tutorialku_Blog .Semua_Tutorialku .btn_pntrst .share-btn, .Semua_Tutorialku_Blog .Semua_Tutorialku .btn_linkdin .share-btn { position: relative; color: #C3C3C3; display: inline-block; text-align: center; font-weight: bold; font-size: 11px; float: right; min-width: 12px; font-family: sans-serif; padding: 0px 5px; background-color: rgba(0,0,0,0.28); border-radius: 0px 0px 0px 15px; }
@media only screen and (max-width: 979px){
.Semua_Tutorialku_Blog .Semua_Tutorialku .btn_linkdin { width: 34px; } 
.Semua_Tutorialku_Blog .Semua_Tutorialku .btn_fb .share-btn, .Semua_Tutorialku_Blog .Semua_Tutorialku .btn_twtr .share-btn, .Semua_Tutorialku_Blog .Semua_Tutorialku .btn_linkdin .share-btn, .Semua_Tutorialku_Blog .Semua_Tutorialku .btn_gplus .share-btn, .Semua_Tutorialku_Blog .Semua_Tutorialku .btn_pntrst .share-btn { display: none !important; } } 
@media only screen and (max-width:768px) { .Semua_Tutorialku_Blog .Semua_Tutorialku ul li a, .Semua_Tutorialku_Blog 
.Semua_Tutorialku ul li a:hover { color: #FFF !important; cursor: pointer; line-height: 25px; font-size: 11px; height: 100%; display: block; text-decoration: none; } .Semua_Tutorialku_Blog .Semua_Tutorialku .wrap { min-width: 34px; } .Semua_Tutorialku_Blog .Semua_Tutorialku .btn_linkdin, .Semua_Tutorialku_Blog .Semua_Tutorialku .btn_pntrst { width: 30px; } .Semua_Tutorialku_Blog .Semua_Tutorialku ul li { margin: 1px 3px; }  
@media only screen and (max-width:479px) { .Semua_Tutorialku_Blog 
.Semua_Tutorialku .share { border: none; margin: 0px 5px 0px 1px; overflow: visible!important; width: 80px!important; } .Semua_Tutorialku_Blog .Semua_Tutorialku ul li { width: 25px !important; margin: 2px; border-radius: 50px; border: 2px solid rgba(0, 0, 0, 0.14); } .Semua_Tutorialku_Blog .Semua_Tutorialku .wrap { display: none !important; } .Semua_Tutorialku_Blog .Semua_Tutorialku ul li .fa { width: 25px !important; } } 

2. Tambahkan kode di bawah ini tepat di bawah atau di atas <data:post.body/> atau <div class='post-footer'>.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class="Semua_Tutorialku_Blog">
<div class="Semua_Tutorialku">
<ul>
<li class="share">
<div class="share-btn" data-service="total">
<div class="count h4"></div>
<div class="share h6">SHARES</div>
</div>
</li>
<li class="btn_fb"><a expr:data-url='data:post.url' expr:data-text='data:post.title' expr:href='&quot;http://www.facebook.com/share.php?v=4&amp;u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' onclick='window.open(this.href,"   sharer"   ,"   toolbar=0,status=0,width=626,height=436"   );   return false;' rel="nofollow">
<div class="wrap1"><i class="fa fa-facebook"></i>
</div>
<div class="wrap">Share</div>
<div class="share-btn" data-service="facebook">
<div class="count"></div></div>
</a>
</li>
<li class="btn_twtr"><a expr:data-url='data:post.url' expr:data-text='data:post.title' expr:href='&quot;http://twitter.com/share?text=&quot; + data:post.title + &quot;&amp;url=&quot; + data:post.url + &quot;&amp;via=RamaDony96&quot;' onclick='window.open(this.href,"   sharer"   ,"   toolbar=0,status=0,width=626,height=436"   );   return false;' rel="nofollow">
<div class="wrap1"><i class="fa fa-twitter"></i></div>
<div class="wrap">Tweet</div>
<div class="share-btn" data-service="twitter">
<div class="count"></div></div>
</a>
</li>
<li class="btn_gplus"><a expr:data-url='data:post.url' expr:data-text='data:post.title' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' onclick='javascript:window.open(this.href,"   "   ,"   menubar=no,toolbar=no,resizbutton_le=yes,scrollbars=yes,height=600,width=600"   );   return false;   ' rel="nofollow">
<div class="wrap1"><i class="fa fa-google-plus"></i></div>
<div class="wrap">Share</div>
<div class="share-btn" data-service="google">
<div class="count"></div></div>
</a>
</li>
<li class="btn_pntrst"><a data-pin-config="beside" expr:data-img='data:post.thumbnailUrl' expr:data-url='data:post.url' expr:data-text='data:post.title' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;description=&quot; + data:post.title' onclick='window.open(this.href,"   sharer"   ,"   toolbar=0,status=0,width=626,height=500"   );   return false;' rel="nofollow">
<div class="wrap1"><i class="fa fa-pinterest"></i></div>
<div class="wrap">Pin</div>
<div class="share-btn" data-service="pinterest">
<div class="count"></div></div>
</a>
</li>
<li class="btn_linkdin"><a expr:data-url='data:post.url' expr:data-text='data:post.title' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;summary=&quot; + data:post.snippet' onclick='window.open(this.href,"   sharer"   ,"   toolbar=0,status=0,width=626,height=500"   );   return false;' rel="nofollow">
<div class="wrap1"><i class="fa fa-linkedin"></i></div>
<div class="wrap">Share</div>
<div class="share-btn" data-service="linkedin">
<div class="count"></div></div>
</a>
</li>  
</ul>
</div>
</div>
</b:if>

Ganti kode yang ditandai dengan username Twitter sobat.

3. Tambahkan kode di bawah ini diatas kode </body>

<b:if cond='data:blog.pageType == &quot;item&quot;'>			
<script type="text/javascript">//<![CDATA[
$(document).ready(function () {
  var shareUrl = $("link[rel=canonical]").attr("href");
    $.getJSON('http://tbncounts-sharecounts.rhcloud.com/?url=' + encodeURIComponent(shareUrl) + "&callback=?", function (data) {
        shares = data.shares;
        $(".count").each(function (index, el) {
            service = $(el).parents(".share-btn").attr("data-service");
            count = shares[service];
            if (count > 1000) {
                count = (count / 1000).toFixed(1);
                if (count > 1000) count = (count / 1000).toFixed(1) + "M";
                else count = count + "k";
            }
            $(el).html(count);
        });
    });
});
//]]></script></b:if>

4. Simpan template dan lihat hasilnya.

Demikian Cara Membuat Responsive Share Button Dengan Counter di Blog, semoga bermanfaat.