Cara MemasangTombol Share Sosial Media Dengan Conter di Blog – Tombol sosial media adalah sebuah Tombol yang di gunakan untuk membagi informasi atau postingan ke Media sosial secara Otomatis dan Mudah. Tombol share ini adalah salah satu Widget yang wajib ada di sebuah blog atau Website, karena kegunaannya yang sangat bermanfaat. Fungsi dari Tombol ini adalah menghubungkan pembaca satu dengan pembaca yang lainnya dari perantara sosial media seperti Facebook, Twitter dan google Plus. Dengan tombol ini hal tersebut akan sangat mudah di lakukan dan bagi blogger akan sangat menguntungkan untuk menambah pengunjung baru lainnya tanpa harus bertindak.
Maka dari itu kali ini saya akan bagikan cara membuat tombol share media sosial dengan juga menampilkan angka jumlah berapa kali postingan tersebut di bagikan, membuat pengunjung tertarik dan berminat membaca jika melihat jumlah share yang banyak. Bagi sobat yang tertarik untuk menggunakannya atau tertarik untuk mempelajari nya silahkan sobat simak cara membuatnya berikut ini.
Baca juga : Cara Membuat Widget Populer post Efek Warna Warni di Blog
Baca juga : Cara Membuat Widget Populer post Efek Warna Warni di Blog
1. buka Blog Sobat > masuk menu “Template” > Edit HTML > Salin kode di bawah ini dan Letakkan sebelum kode ]]></b:skin> </style>
]]></b:skin> </style>
/* social share button with counter */
.sosmed-button-count {overflow:hidden;}
.sosmed-button {
margin:0 0;
height:67px;
float:left;
}
.sosmed-button .share {
float:left;
margin-right:10px;
display:inline-block;
}
.share-btn {
margin:15px 0 25px;
height:20px;
overflow:hidden;
}
2. selanjutnya cari lagi kode <data:post.body/> (car yang ke dua) lalu letakkan kode di bawah ini tepat di bawahnya.
<div class='sosmed-button-count'>
<div class='sosmed-button'>
<div class='share gplus'><div class='g-plusone' data-size='tall' expr:data-href='data:post.url'/></div>
<div class='share like'><div class='fb-like' data-action='like' data-layout='box_count' data-share='false' data-show-faces='false' expr:data-href='data:post.url'/></div>
<div class='share tweet'><a class='twitter-share-button' data-count='vertical' data-lang='en' data-size='normal' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a></div>
</div>
</div>
<!-- <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>-->
<div style='clear: both;'/>
3. Di bawah ini adalah kode pemanggil Tobol share Media sosial. cari kode seperti di bawah ini jika ada di template lalu hapus > lalu letakkan kode di bawah ini di atas kode </body>
<script>
window.___gcfg = {lang: 'id'};
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
<script>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
</script><div id='fb-root'/>
<script type='text/javascript'>
//<![CDATA[
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/id_ID/all.js#xfbml=1&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//]]>
</script>
4. terakhir simpan template dan Lihat hasilnya. Saya yakin jika sobat mengikuti tutorial di atas dengan benar maka Tombol share button Media sosial sudah terpasang dengan baik di bawah postingan blog sobat.
Baca juga : Cara Pasang Alexa Extension Di Browser Chrome dan Mozilla Firefox
Baca juga : Cara Pasang Alexa Extension Di Browser Chrome dan Mozilla Firefox
NB : terkadang ada masalah kode menjadi dobel hal ini di karena kan terdapat kode pemanggil yang sama di template sobat, jadi cari kode pemanggil (nomer 3 di atas) lalu hapus dan letakkan kode serupa di atas kode </body>
Demikianlah tutorial mengenai Cara Memasang Tombol Share Sosial Media Dengan Conter di Blog, yang harus di ketahui. jika sobat ada masalah atau sudah berhasil jangan lupa untuk mengisi Kotak komentar di bawah ini. Semoga artikel ini dapat menjadi ilmu yang bermanfaat.
0 Komentar