Cara Membuat Tombol Share Keren Dibawah Postingan

Cara Membuat Tombol Share Keren Dibawah Postingan - Salah satu cara untuk membuat postingan kita dikunjungi atau dikenal oleh pembaca adalah dengan membagikannya melalui media sosial. Cara ini cukup efektif apabila kita bisa memanfaatkannya dengan baik.

 Sebenarnya Blogspot sudah menyediakan fasilitas tombol share ini, namun tombol share original dari mereka terlihat kurang menarik.  Sehingga membuat  sebagian besar admin Blog memodifikasi tombol share tersebut dengan kreasi mereka sendiri, tujuannya tentu saja agar membuat Blog menjadi lebih cantik/menarik.

Dan dikesempatan kali ini, saya akan berbagi coba berbagi  Cara Membuat Tombol Share Keren Dibawah Postingan. Widget tombol share ini saya adaptasi dari widget di template evo magz milik mas-sugeng. Yuk langsung saja simak tutorialnya dibawah ini.

Tutorial Cara Membuat Tombol Share Dibawah Postingan

1. Silahkan buka akun Blogger anda dan masuk ke menu Template

2. Lalu pilih menu Edit HMTL



3. Setelah berada di menu Edit HMTL, cari kode ]]></b:skin> lalu salin dan tempelkan css dibawah ini tepat diatasnya.

 /* social share buttons */
.social-buttons-box {
height: 67px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD9AFu53SbgGIJs2PolXiSyMoS96qZcvE1DS-z9KaB3R649AlXgfiTaG_G_3oIj741ZnwQ-NgrVGh6Vvr2bQ_v-PBSg-cb7XwVyTLgQZj3lf6yCKdKs8vxYqMt6OaVsfqJVE-kR_9p0gQ2/s1600/rect3799.png) no-repeat 200px 0px;
margin:20px 0 15px;
overflow:hidden;
}
.social-buttons {
margin:0 0;
height:67px;
float:left;
}
.social-buttons .share {
float:left;
margin-right:10px;
display:inline-block;
}
.share-btn {
margin:15px 0 25px;
height:20px;
overflow:hidden;
}

4. Selanjutnya, cari kode  <data:post.body/> atau <div class='post-footer'> lalu salin dan tempelkanlah script dibawah ini dibawah kode tersebut.

<div class='social-buttons-box'>
<div class='social-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 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)?&#39;http&#39;:&#39;https&#39;;if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+&#39;://platform.twitter.com/widgets.js&#39;;fjs.parentNode.insertBefore(js,fjs);}}(document, &#39;script&#39;, &#39;twitter-wjs&#39;);</script>-->
<div style='clear: both;'/>

5. Kemudian cari kode  kode </body> lalu salin dan tempelkan script dibawah ini tepat diatas kode tersebut.

<script>  window.___gcfg = {lang: &#39;id&#39;};
(function() {    var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true;    po.src = &#39;https://apis.google.com/js/plusone.js&#39;;    var s = document.getElementsByTagName(&#39;script&#39;)[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=&quot;//platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);</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>

6. Terkahir Klik Simpan Template dan lihat hasilnya

7. Jreng... jrenggg. Cieee kini anda sudah berhasil mebuat sendiri tombol share yang keren hehe.