Cara Memasang Share Button Flat UI Slide Di Blogger

Ingin memasang share button yang keren dan beda dari yang lain. Kali ini AnggaSave akan berbagi tutorial cara membuat share button flat ui slide di blog. Sebelum berlanjut ke tutorialnya apakah kalian tahu apa itu share button? Apa fungsi dan kegunaannya? 

Share button adalah widget yang digunakan ditujukan memudahkan pengunjung untuk berbagi artikel yang telah mereka baca ke media sosial dengan mudahnya. Mereka tidak perlu menyalin url artikel untuk berbagi namun mereka hanya perlu mengklik media sosial apa yang akan digunakan untuk berbagi.

Selain manfaat diatas jika banyak yang membagikan artikel anda berarti itu membuktikan bahwa artikel anda memiliki banyak manfaat. Semakin banyak di share artikel anda maka peringkat artikel anda akan semakin bagus dimata google. Dengan kata lain jumlah share mempengaruhi SEO blog kita. Nah gimana yuk langsung saja pasang share buttonnya?

Cara Membuat Share Button Flat UI Slide

Share button ini menggunakan font awesome jadi jika anda belum memasang script js font awesomenya silakan pasang dulu agar share buttonnya nanti bisa berkerja dengan tampilan yang menarik. Pasang js font awesome disini

Langkah 1

Masuk dulu ke blogger,pilih Template → Edit HTML. Salin kode berikut lalu letakkan diatas kode </head>

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>

Langkah 2
Salin kode css dibawah ini dan pastekan diatas kode </style>

/* CSS Slide Share */
#button-count-share{width:100%;overflow:hidden;background:transparent;margin:0 auto;padding:3px}#button-count-share span{float:left;position:relative;font-size:13px;color:#fff;margin:12px 5px}.button-share{background:#dce0e0;position:relative;display:block;float:left;height:40px;overflow:hidden;width:140px;margin:4px;border-radius:3px}.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:33px}.slide-share{z-index:2;display:block;height:100%;left:38px;position:absolute;width:108px;margin:0}.slide-share p{font-family:Verdana;font-weight:400;border-left:1px solid rgba(255,255,255,.35);color:#fff;font-size:14px;left:0;position:absolute;text-align:center;top:10px;width:100%;margin:0}.button-share .slide-share{transition:all .4s ease-in-out}.facebook .fb_iframe_widget{display:block;position:absolute;right:5px;top:0;z-index:1}.twitter iframe{left:50px;top:10px;z-index:1;display:block;position:absolute}.google #___plusone_0{width:90px!important;top:10px;right:5px;position:absolute;display:block;z-index:1}.facebook .ikons,.facebook .slide-share{background:#4f79bc}.twitter .ikons,.twitter .slide-share{background:#63cef2}.google .ikons,.google .slide-share{background:#f36261}.facebook:hover .slide-share,.twitter:hover .slide-share,.google:hover .slide-share{left:180px;opacity:.6}

Langkah 3
Terakhir silakan anda salin kode pemanggil share button dibawah ini lalu pastekan dibawah kode <data:post.body/>

<div id='button-count-share'>
<div class='facebook button-share'><i class='ikons'><i class='icon-facebook icon-large'/></i>
<div class='slide-share'>
<p>Share</p>
</div>
<a class='fb-share-button' name='fb_share' rel='nofollow' share_url='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' type='button_count'/>
</div>
<div class='facebook button-share'><i class='ikons'><i class='icon-facebook icon-large'/></i>
<div class='slide-share'>
<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-share'><i class='ikons'><i class='icon-google-plus icon-large'/></i>
<div class='slide-share'>
<p>G+</p>
</div>
<div class='g-plusone' data-count='true' data-size='medium' expr:data-href='data:post.url' rel='nofollow'/>
<script type='text/javascript'>
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>
</div>
<div class='twitter button-share'><i class='ikons'><i class='icon-twitter icon-large'/></i>
<div class='slide-share'>
<p>Tweet</p>
</div>
<a class='twitter-share-button' data-count='horizontal' data-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' title='Share via Twitter'>Tweet</a>
<script async='async' src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
</div>
<div class='clear'/>
</div>
<div class='clear'/>

Karena kode <data:post.body/> ada lebih dari satu maka silakan anda pilih dan cocokan kode sesuai dengan template blog anda. Coba satu per satu.

Terakhir simpan template. Sekarang coa buka blog anda dan lihat apakah share button sudah muncul atau belum di blog anda. Cukup sekian tutorial cara membuat share button dengan flat ui slide design. Semoga bisa membantu dan bermanfaat.