Keberadaan sosial media seperti facebook, google+, twitter, instagram dan lainnya cukup memudahkan kita dalam membagikan informasi, maupun melakukan promosi dan memperkenalkan bisnis yang sedang kita jalani pada teman-teman kita.
Tentunya hal tersebut didukung dengan salah satu fitur yang dimiliki dari masing-masing sosial media tersebut yaitu adanya fitur share (bagikan). Sehingga kita hanya perlu membagikan informasi kita kepada teman-teman hanya dengan beberapa kali langkah. Seperti yang akan Amirs ID bagikan pada pagi ini, yaitu sebuah tutorial cara memasang sosial share button and like pada blog kita.
Sosial share and like button tersebut terdiri dari beberapa sosial media kelas atas yang sudah pasti banyak digunakan dari berbagai kalangan, seperti facebook, google+, twitter, dan linkedin. Tentu dengan adanya sosial share and like button tersebut cukup memudahkan kita dalam membagikan setiap artikel yang ada.
Langsung saja, bagi kalian yang ingin memasang sosial share button, ikuti langkah-langkah seperti dibawah ini.
Cara Memasang Sosial Share and Like Button
1. Login terlebih dalam akun blog kalian di www.blogger.com
2. Klik pada menu Template > Edit HTML
3. Setelah itu, silahkan kalian cari kode <data:post.body/> (tekan tombol Ctrl+F pada keyboard kalian untuk memudahkan pencarian)
4. Tambahkan kode HTML dibawah ini, tepat berada di atas kode <body:post.body/>
<b:if cond='data:blog.pageType == "item"'>
<!-- Tombol share media sosial -->
<div class='share-buttons-box'>
<div class='share-buttons'>
<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 fbshare'>
<div class='fb-share-button' data-type='box_count' 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 class='share linkedin'>
<script src='//platform.linkedin.com/in.js' type='text/javascript'>
lang: en_US
</script>
<script data-counter='top' expr:data-url='data:post.url' type='IN/Share'/>
</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;'/>
</b:if> Biasanya masing-masing template berbeda-beda dalam artian terdapat banyak kode <body:post.body/>. Maka tambahkan pada kode yang kedua
5. Kemudian, tambahkan kode CSS dibawah ini, tepat berada di atas kode </head>
<style type='text/css'>
/* share buttons */
.share-buttons-box{height:67px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCy0VvXIDjjmJho5aylw5_Lvap0ps2O7cp-Y2199evp7MQHy1xu21vJq7ywMVri0CXTAE1dMhkEUOOMHZJYLZUZcue2FDAcDy6wygzqlA9lbQ8K_o550QUl-jZwfLvSJ2sAwe3GI9az1PM/s1600/share.png) no-repeat 330px 10px;margin:20px 0 15px;overflow:hidden;position:relative}
.share-buttons{margin:0 0;height:67px;float:left}
.share-buttons .share{float:left;margin-right:10px;display:inline-block}
</style> 6. Klik Simpan Template, dan coba lihat hasilnya.
Jika widget tersebut tidak berjalan, coba kalian taruh kode HTML diatas kode <body:post.body/> lainnya. Jika masih tetap tidak berjalan, coba untuk kalian taruh diatas kode 'related-post. Karena setiap template berbeda-berbeda.
Demikianlah tadi tutorial cara memasang sosial share and like button pada blog. Semoga tutorial tersebut bermanfaat bagi kita semua, jika masih ada hal yang kurang dimengerti silahkan berikan komentar dibawah. Cukup sekian dan terimakasih.
EmoticonEmoticon