Cara Membuat Tombol Share di Blog dengan Efek Peekaboo

Tutorial blogger kali ini tentang cara membuat/memasang share button atau tombol berbagi di blog. Share button ini bisa diletakkan di atas maupun di bawah postingan. Tombol share yang hendak saya bagikan ini terbagi menjadi dua, yaitu yang menggunakan Font Awesome dan tanpa Font Awesome alias menggunakan ikon gambar.

Artikel sebelumnya: Membuat Widget Label Tertentu Dengan Thumbnail Di Bawah Postingan

Tombol share ini ditambahkan Peekaboo effect atau afek cilukba, yang jika salah satu bidang tombol share ini terkena kursor maka akan muncul share button count di dalamnya.

Tertarik menerapkan share button ini di template blogger anda? Silahkan ikuti tutorialnya berikut ini.

Cara Mudah Membuat Share Button Count di Blog dengan Animasi Cilukba

A. Menggunakan Font Awesome

1. Login ke blogger lalu masuk ke dashboard > Template > Edit HTML
2. Letakkan kode CSS di bawah ini tepat di atas kode </style> atau ]]></b:skin>

/* Share Button Peekaboo Effect */
#button-count{overflow:hidden;margin:30px 0 ;padding:0}
.button{background:#DCE0E0;position:relative;display:block;float:left;height:45px;overflow:hidden;width:156px;margin:4px 4px 4px 0}
.ikons{display:block;float:left;position:relative;z-index:3;height:100%;vertical-align:top;width:38px;text-align:center}
.ikons i{color:#fff;line-height:44px}
.slide{z-index:2;display:block;height:100%;left:38px;position:absolute;width:118px;margin:0}
.slide p{font-weight:400;border-left:1px solid rgba(255,255,255,0.35);color:#fff;font-size:16px;left:0;position:absolute;text-align:center;top:10px;width:100%;margin:0}
.button .slide{-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-ms-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out}
.facebook .fb_iframe_widget{padding:10px;z-index:1;display:block;text-align:center !important}
.twitter iframe{padding:13px 10px;z-index:1;display:block;text-align:center !important}
.google #___plusone_0{width:90px!important;top:13px;right:5px;position:absolute;display:block;z-index:1}
.facebook .ikons,.facebook .slide{background:#305c99}
.twitter .ikons,.twitter .slide{background:#00cdff}
.google .ikons,.google .slide{background:#d24228}
.facebook:hover .slide,.twitter:hover .slide,.google:hover .slide{left:180px}

3. Cari kode <data:post.body/> (yang kedua) dan letakkan kode berikut ini tepat di bawah kode tadi (untuk meletakkan share button di bawah postingan).

<div id='button-count'>
<div class='facebook button'>
<i class='ikons'><i class='fa fa-facebook'/></i>
<div class='slide'><p>Like</p>
</div><div class='fb-like' data-action='like' data-layout='button_count' data-share='false' data-show-faces='false'/>
</div>
<div class='google button'>
<i class='ikons'><i class='fa fa-google-plus'/></i>
<div class='slide'><p>Plus</p>
</div>
<!-- Place this tag where you want the +1 button to render. -->
<div class='g-plusone' data-size='medium'/>
<!-- Place this tag after the last +1 button tag. -->
<script src='https://apis.google.com/js/platform.js' type='text/javascript'>
{lang: &#39;id&#39;}
</script>
</div>
<div class='twitter button'>
<i class='ikons'><i class='fa fa-twitter'/></i>
<div class='slide'><p>Tweet</p></div>
<a class='twitter-share-button' data-count='horizontal' href='https://twitter.com/share'>Tweet</a>
<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;https://platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);</script>
</div>
</div>

4. Simpan Template.

B. Tanpa Font Awesome

1. Seperti biasa login ke blogger lalu masuk ke dashboard > Template > Edit HTML
2. Letakkan kode CSS di bawah ini tepat di atas kode </style> atau ]]></b:skin>

/* Share Button Peekaboo Effect */
#button-count{overflow:hidden;margin:0 auto 25px;text-align:center;padding:0 0 5px;border-bottom:1px solid #eee}
.button{background:#DCE0E0;position:relative;display:block;float:left;height:30px;overflow:hidden;width:120px;margin:4px 4px 4px 0}
.ikons{display:block;float:left;position:relative;z-index:3;height:100%;vertical-align:top;width:25px;text-align:center}
.ikons i{line-height:30px}
.slide{z-index:2;display:block;height:100%;left:25px;position:absolute;width:95px;margin:0}
.slide p{font-weight:400;color:#fff;font-size:13px;font-weight:700;left:0;position:absolute;text-align:center;top:5px;width:100%;margin:0}
.button .slide{-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-ms-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out}
.facebook .fb_iframe_widget{padding:5px;z-index:1;display:block;text-align:center !important}
.twitter iframe{padding:5px;z-index:1;display:block;text-align:center !important}
.google #___plusone_0{width:90px!important;top:5px;right:1px;position:absolute;display:block;z-index:1}
.facebook .ikons,.facebook .slide{background:#305c99}
.twitter .ikons,.twitter .slide{background:#00cdff}
.google .ikons,.google .slide{background:#d24228}
.facebook:hover .slide,.twitter:hover .slide,.google:hover .slide{left:120px}
.fb-7, .gp-7,.tw-7{margin-top:2px !important}
.fb-7, .gp-7,.tw-7{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_vl4Nb94r_XcmT42Ctvuarr73O537HXhpnywfkcCt6n1ts9cosRKZwSGgOfgCW-jo9xMqyQxyreJseQ5BAcrXHfNoN_Fg1zCTu4d7Fa3FhF0tIDFgaMuRUpL9dPEA9fG3Q4xIf_kkRT0/s1600/button-spr.png) no-repeat;width:22px; height:18px; display:inline-block;vertical-align:text-top;margin-top:-3px;text-align:center}
.fb-7{background-position:0 -100px}
.tw-7{background-position:0 -150px}
.gp-7{background-position:0 -200px}

3. Cari kode <data:post.body/> (yang kedua) dan letakkan kode berikut ini tepat di atas kode tadi (untuk meletakkan share button di atas postingan).

<div id='button-count'>
<div class='facebook button'>
<i class='ikons'><i class='fb-7'/></i>
<div class='slide'><p>Like</p>
</div><div class='fb-like' data-action='like' data-layout='button_count' data-share='false' data-show-faces='false'/>
</div>
<div class='google button'>
<i class='ikons'><i class='gp-7'/></i>
<div class='slide'><p>Plus</p>
</div>
<!-- Place this tag where you want the +1 button to render. -->
<div class='g-plusone' data-size='medium'/>
<!-- Place this tag after the last +1 button tag. -->
<script src='https://apis.google.com/js/platform.js' type='text/javascript'>
{lang: &#39;id&#39;}
</script>
</div>
<div class='twitter button'>
<i class='ikons'><i class='tw-7'/></i>
<div class='slide'><p>Tweet</p></div>
<a class='twitter-share-button' data-count='horizontal' href='https://twitter.com/share'>Tweet</a>
<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;https://platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);</script>
</div>
</div>

4. Simpan Template.

Itulah cara membuat tombol share di blog dengan efek peekaboo yang bisa anda letakkan di atas maupun di bawah postingan, selamat mencoba.