Memasang Tombol Share Responsif With Count Untuk Blogger
Tak dipungkiri peran tombol share pada halaman blog sangat dibutuhkan untuk mempermudah visitor yang tertarik ingin membagikan informasi yang ada pada laman kepada teman atau kerabat. Tak ayal tautan-tautan inilah yang bisa menjadi sumber penarik visitor ke blog atau laman kita selain dari search engine. Tombol share pada halaman blog sebenarnya sudah tersedia baik template bawaan blogger maupun template yang kita install dari mastah-mastah yang biasa membuat template, namun tampilannya yang sederhana apa adanya membuat kurang menarik dipandang mata atau mungkin kita ingin tombol share yang terlihat berbeda dari template yang sama, yang diinstall blogger lain.
tombol share untuk blogger sebenarnya banyak sekali style dan macamnya, ada yang with count atau pun with-out count, beraneka ragam yang sudah di share mastah-mastah blogger di luar sana. Dan salah satunya adalah ini yang bisa agan pake di blog kesayangan agan masing-masing. Berikut cara memasang tombol share with count blogger.
Memasang Tombol Share 1 : Menghapus tombol share bawaan
Cara menghapus tombol share pada template:
- Kunjungi sebuah halaman yang ada pada blog agan, cari dan klik kanan pada tombol share yang akan agan hapis di halaman tersebut
- Kemudian pilih Inspect element
- Perhatikan pada tag div class, seperti pada gambar
- Kemudian jika sudah tahu script apa yang akan dihapus, kita masuk pada dashboard atau panel blog kita dan buka Template >> Edit HTML
- Setelah itu cari share-buttons-box (misal jika agan memakai Evo Magz) dengan menekan CTRL+F
- kemudian hapus seluruh CSS dan HTML+JS yang berkaitan dengan share-buttons-box tersebut
NB*
Saran saya kasih tanda pada area dimana kode HTML share button yang yang tadi agan hapus, karena akan kita gunakan area tersebut untuk meletakan kode HTML share button yang baru. Beri tanda dengan symbol atau kata yang mudah kita temukan nantinya.
untuk menghilangkan share button pada template bawaan blogger, cukup buka layout blogger dan klik Edit pada bagian Main (Blog Posts) dan hapus checklist pada "Show share buttons" dan simpan dengan klik save.
Memasang Tombol Share Step 2 : Memasang script tombol share
Setelah menghapus tombol share yang sebelumnya, berikutnya adalah memasangkan script tombol share with count pada blog agan. Berikut langkah-langkah pemasangan dan script tombol share with count.Langkah-langkah pemasangan :
- Pastikan sudah sign in dan masuk pada blogger agan dan buka Template >> Edit HTML
- Setelah itu copy dan paste kode CSS berikut di atas kode
]]></b:skin> - Setelah itu, cari dan temukan kode
<data:post.body/>atau<div class='post-footer'>kemudian copy dan paste kode HTML berikut di atasnya atau agan letakan sama persis dimana sebelumnya kode share buttons yang telah agan hapus sebelumnya - Tambahkan kode di bawah ini sebelum
</body>atau bisa juga agan tempatkan di bawah kode HTML di atas tadi - Terakhir, simpan template yang sudah agan edit dan lihat hasilnya atau untuk jaga-jaga preview terlebih dahulu sebelum disimpan
/* Share Button dengan Counter*/
.gowidget_sharebutton{position:relative;z-index:2;width:100%;padding:20px 0;display:inline-block;margin:20px auto;border-bottom:2px solid rgba(0,0,0,.08)}
.gowidget_sharebutton .share_blog {display:block;}
.gowidget_sharebutton .share_blog .wrap {text-align:center;margin:0 auto;display:inline-block;min-width:41px;}
.gowidget_sharebutton .share_blog .wrap1 {display:inline-block;width:31px;float:left;}
.gowidget_sharebutton .share_blog ul {margin:0;padding:0;}
.gowidget_sharebutton .share_blog ul li{list-style:none;list-style-type:none;padding:0;margin:2px;float:left;width:16%;max-width:115px;display:inline-block;font-size:13px;overflow:hidden;text-align:left;height:32px;line-height:32px;color:#fff;border-radius:3px;transition:all .4s}
.gowidget_sharebutton .share_blog ul li a,.gowidget_sharebutton .share_blog ul li a:hover{color:#fff;cursor:pointer;line-height:32px;height:100%;display:block;text-decoration:none}
.gowidget_sharebutton .share_blog ul li .fa{color:#fff;font-size:16px;font-weight:normal;font-family:FontAwesome;display:inline-block;text-align:center;padding:0;height:32px;line-height:inherit;width:30px;background-color:rgba(0,0,0,.05)}
.gowidget_sharebutton .share_blog .btn_fb{background:#3a579a}.gowidget_sharebutton .share_blog .btn_fb:hover{background:#314a83}.gowidget_sharebutton .share_blog .btn_twtr{background:#00abf0}.gowidget_sharebutton .share_blog .btn_twtr:hover{background:#0092cc}.gowidget_sharebutton .share_blog .btn_gplus{background:#df4a32}.gowidget_sharebutton .share_blog .btn_gplus:hover{background:#be3f2b}.gowidget_sharebutton .share_blog .btn_pntrst{background:#cd1c1f}.gowidget_sharebutton .share_blog .btn_pntrst:hover{background:#ae181a}.gowidget_sharebutton .share_blog .btn_linkdin{background:#2554BF}.gowidget_sharebutton .share_blog .btn_linkdin:hover{background:#224EB4}
.gowidget_sharebutton .share_blog .share.h6{font-size:10px;font-weight:700;text-align:center;color:#999;border-top:1px solid #e3e3e3;padding:8px 0 0;margin:8px auto 0;line-height:8px;width:42px;letter-spacing:.5px}
.gowidget_sharebutton .share_blog .share{margin:5px 5px 0 0;overflow:visible;width:95px}
.gowidget_sharebutton .share_blog .share .count.h4{font-size:22px;font-weight:700;text-align:center;color:#ff8349;line-height:16px;margin:-8px 0 0;min-height:15px}
.gowidget_sharebutton .share_blog .btn_fb .share-btn,.gowidget_sharebutton .share_blog .btn_twtr .share-btn,.gowidget_sharebutton .share_blog .btn_gplus .share-btn,.gowidget_sharebutton .share_blog .btn_pntrst .share-btn,.gowidget_sharebutton .share_blog .btn_linkdin .share-btn{position:relative;color:#fff;display:inline-block;text-align:center;font-weight:700;font-size:11px;float:right;min-width:12px;padding:0 8px 0 0}
@media only screen and (max-width: 979px) {
.gowidget_sharebutton .share_blog .btn_linkdin {width:34px;}
.gowidget_sharebutton .share_blog .btn_fb .share-btn,.gowidget_sharebutton .share_blog .btn_twtr .share-btn,.gowidget_sharebutton .share_blog .btn_linkdin .share-btn,.gowidget_sharebutton .share_blog .btn_gplus .share-btn,.gowidget_sharebutton .share_blog .btn_pntrst .share-btn{display:none}}
@media only screen and (max-width:768px) {
.gowidget_sharebutton .share_blog ul li a,.gowidget_sharebutton .share_blog ul li a:hover{color:#fff;cursor:pointer;line-height:32px;font-size:11px;height:100%;display:block}.gowidget_sharebutton .share_blog .wrap{min-width:34px}.gowidget_sharebutton .share_blog .btn_linkdin,.gowidget_sharebutton .share_blog .btn_pntrst{width:30px}.gowidget_sharebutton .share_blog ul li{margin:1px 3px}}
@media only screen and (max-width:479px) {
.gowidget_sharebutton .share_blog .share{border:0;margin:0 5px 0 1px;overflow:visible;width:80px}.gowidget_sharebutton .share_blog ul li{width:25px;margin:2px;}.gowidget_sharebuttonn .share_blog .wrap{display:none}.gowidget_sharebutton .share_blog ul li .fa{width:25px}}
/* MEDIA QUERY */
@media only screen and (max-width:1066px){#wrapper{margin:0 auto}
.gowidget_sharebutton .share_blog .btn_linkdin{width:34px}
.gowidget_sharebutton .share_blog .btn_fb .share-btn,.gowidget_sharebutton .share_blog .btn_twtr .share-btn,.gowidget_sharebutton .share_blog .btn_linkdin .share-btn,.gowidget_sharebutton .share_blog .btn_gplus .share-btn,.gowidget_sharebutton .share_blog .btn_pntrst .share-btn{display:none}
}@media only screen and (max-width:768px){#wrapper{padding:0 12px}
.gowidget_sharebutton .share_blog ul li a,.gowidget_sharebutton .share_blog ul li a:hover{color:#fff;cursor:pointer;line-height:32px;font-size:11px;height:100%;display:block}
.gowidget_sharebutton .share_blog .wrap{min-width:34px}
.gowidget_sharebutton .share_blog .btn_linkdin,.gowidget_sharebutton .share_blog .btn_pntrst{width:30px}
.gowidget_sharebutton .share_blog ul li{margin:1px 3px}
@media screen and (max-width:414px){#share-top{margin:10px 15px}
.gowidget_sharebutton .share_blog .share{border:0;margin:0 5px 0 1px;overflow:visible;width:80px}
.gowidget_sharebutton .share_blog ul li{width:25px;margin:2px}
.gowidget_sharebuttonn .share_blog .wrap{display:none}
.gowidget_sharebutton .share_blog ul li .fa{width:25px}<b:if cond='data:blog.pageType == "item"'>
<div class='gowidget_sharebutton'>
<div class='share_blog'>
<ul>
<li class='share'>
<div class='share-btn' data-service='total'>
<div class='count h4'/>
<div class='share h6'>SHARES</div>
</div>
</li>
<li class='btn_fb'><a expr:href='" http://www.facebook.com/share.php?v=4& src=bm& u=" + data:post.url + " & t=" + 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'/> </div>
<div class='wrap'>Share</div>
<div class='share-btn' data-service='facebook'>
<div class='count'/></div>
</a>
</li>
<li class='btn_twtr'><a expr:href='"https://twitter.com/intent/tweet?url=" + data:blog.url + "&text=" + data:post.title + " via @ArlinaDesign - "' 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'/></div>
<div class='wrap'>Tweet</div>
<div class='share-btn' data-service='twitter'>
<div class='count'/></div>
</a>
</li>
<li class='btn_gplus'><a expr:href='"http://plus.google.com/share?url=" + data:blog.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'/></div>
<div class='wrap'>Share</div>
<div class='share-btn' data-service='google'>
<div class='count'/></div>
</a>
</li>
<li class='btn_pntrst'><a data-pin-config='beside' expr:href='" http://pinterest.com/pin/create/button/?url=" + data:post.url + " &media=" + data:blog.postImageUrl + "&description=" + 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'/></div>
<div class='wrap'>Pin</div>
<div class='share-btn' data-service='pinterest'>
<div class='count'/></div>
</a>
</li>
<li class='btn_linkdin'><a expr:href='" http://www.linkedin.com/shareArticle?mini=true& url=" + data:post.url + " & title=" + data:post.title + " & summary=& source=" ' 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'/></div>
<div class='wrap'>Share</div>
<div class='share-btn' data-service='linkedin'>
<div class='count'/></div>
</a>
</li>
</ul>
</div>
</div>
</b:if><b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
//<![CDATA[
// Share Button with Counter
$(document).ready(function(){var t=$("link[rel=canonical]").attr("href");$.getJSON("http://sharecount.twistblogger.com/?url="+encodeURIComponent(t)+"&callback=?",function(t){shares=t.shares,$(".count").each(function(t,e){service=$(e).parents(".share-btn").attr("data-service"),count=shares[service],count>1e3&&(count=(count/1e3).toFixed(1),count>1e3?count=(count/1e3).toFixed(1)+"M":count+="k"),$(e).html(count)})})});
//]]>
</script>
</b:if>Source and Reference
Info Blog News - Cara Membuat Tombol Share Sosial Responsif di Blog
Post a Comment for "Memasang Tombol Share Responsif With Count Untuk Blogger"
= > Tanggapan Anda memberikan saya semangat untuk terus menulis. Komen Agan membuat saya bahagia
= > Kritik dan saran sangat saya harapkan untuk membangun kemampuan saya dalam menulis
= > Komentar insya Allah saya jawab sesuai pemahaman saya, selama punya akses internet dan kesempatan
= > Komentar tidak langsung muncul, selain untuk menyortir komentar spam juga bertujuan untuk mempermudah saya menentukan komentar yang baru dan belum saya tanggapi/jawab. Jadi stay tune ya gan, sampai komentar agan saya jawab.
= > Silahkan berkomentar sesuai artikel diatas
= > Berkomentar dengan url (hidup/mati) tidak akan di publish