Share Button dengan Slide Panel

Apa itu share button?

Share button adalah salah satu tombol berbagi artikel atau isi blog kepada beberapa sosial media, seperti facebook, twitter, google plus, dan lain sebagainya. Tombol ini dapat mengirimkan cuplikan pendek artikel atau isi blog, sehingga pengunjung dapat mengetahui apa yang baru dari blog anda. Keuntungan dari berbagi artikel di sosial media membantu mempercepat mendapatkan rating dari click suka atau kunjungan. Tampilan share button ini dilengkapi dengan slide panel, sehingga menambah unik penampilannya. Disamping itu widget ini tidak memberatkan loading karena menggunakan css sederhana dan dijamin cara pemasangannya tidak bikin pusing. Sekarang mari kita bahas cara pasang share button dengan slide panel pada blogspot. Ikuti langkah berikut.

Cara pemasangan share button dengan slide panel

• Log in ke blog anda (pastikan itu blog anda, bukan blog pacar orang gan)
• Click Template
• Click Edit HTML
• Masukkan css berikut di atas kode ]]></b:skin>

.share_button{width:300px; height:50px; margin:10px auto}
.share_button ul{width:50%; height:inherit; float:left; list-style:none; margin:0 !important; padding:0 !important}
.share_button ul h1{margin-top:9%; overflow:hidden; width:100%; color:#4889F0; font-size:18px; text-shadow:2px 2px 2px #fff}
.share_button ul li{position:absolute; height:inherit; width:150px; margin:0 !important; padding:0 !important; background:#EEE; -webkit-transition:all 600ms; -moz-transition:all 600ms; -o-transition:all 600ms; -ms-transition:all 600ms; transition:all 600ms; text-align:center}
.share_button ul li h2{display:inline-block; width:32%; height:40px; overflow:hidden; margin-top:5%; cursor:pointer; border:0 !important}
.share_button ul:first-child li:first-child{text-align:right}
.share_button ul:last-child li:first-child{text-align:left}
.share_button ul:first-child li:last-child,
.share_button:hover ul:first-child li:first-child{-webkit-transform:rotateY(90deg); -moz-transform:rotateY(90deg); -o-transform:rotateY(90deg); -ms-transform:rotateY(90deg); transform:rotateY(90deg)}
.share_button ul:last-child li:last-child,
.share_button:hover ul:last-child li:first-child{-webkit-transform:rotateY(-90deg); -moz-transform:rotateY(-90deg); -o-transform:rotateY(-90deg); -ms-transform:rotateY(-90deg); transform:rotateY(-90deg)}
.share_button:hover ul:first-child li:last-child,
.share_button:hover ul:last-child li:last-child{-webkit-transform:rotateY(0deg); -moz-transform:rotateY(0deg); -o-transform:rotateY(0deg); -ms-transform:rotateY(0deg); transform:rotateY(0deg)}

• Selanjutnya masukkan kode berikut di bawah kode <div class='post-footer'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='share_button'>
<ul><li><h1><center>Bagikan</center></h1></li>
<li><h2><a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.canonicalUrl + &quot;&amp;t=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share on Facebook'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj46Rg7O2wqSxCCrHekarPWRplglZ9ROqw5TTd1urb8PXYDwu3dWD3YUi2soWwyDHk__o91HuEKDwEXOb3oGDeudkpw-k2D7fi1JuutWRQJNWASQA73KDRWhXgs3RB7PrKWy2_9Ld2-mlIv/s600/Facebook.png"/></a></h2>
<h2><a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; &quot; + data:post.canonicalUrl ' rel='nofollow' target='_blank' title='Share on Twitter'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikkyDCiyAIDMh_wKuAfbGaX_fxPiKGj7WS2FpGVE1RNJ293HqiEpfBFGGkNKHWp28Ott_8ZdxMF9nCD7Sn_esJc1ox7-YtkK7AMOkkwGRuCt1I6pjHw7L5e7Otvjw6OpJbZMPbgwHEWo0m/s600/Twitter.png"/></a></h2></li></ul>
<ul><li><h1><center>artikel ini</center></h1></li>
<li><h2><a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.canonicalUrl' rel='nofollow' target='_blank' title='Share on Google Plus'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimxucVh2y-3PbIqjQFS6j8AZFWerTbBhXMHlu6Qt6MTcFsF2FdwICyj2Gz3VAJz-EboqqeWfrP4L8hg1M7okIkQh_r0oGR6_kbOOoOoPDqEpqNFfx1K18f_7rXyT8NnuQK4E92-9MXjP39/s1600/Google-plus.png"/></a></h2>
<h2><a href='javascript:void((function(){var%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)})());' rel='nofollow' target='_blank' title='Share on Pinterest'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW6OnzOdOhX3oXfq1AvMNiRkLdwW0dfGBmEei3U84EWxONud_r5SrYHGNOumq-uZIH2iUiHwI-K2s5rxD3_j8kgwbrAejhj62hCe1ttv5g-cFW9XNFfeGjAcrIoxhZwJMrj-m-LYAPxrd5/s1600/Pinterest.png"/></a></h2>
</li></ul></div>
</b:if>

• Kalau mau mengganti gambar sosial medianya, silahkan ganti link biru dengan link gambar anda
• Click Simpan Template dan lihat hasilnya.

Demikian tutorial memasang Share Button dengan Slide Panel. Semoga bermanfaat bagi semua, amin. Selamat mencoba dan semoga berhasil. Salam sahabat blogger.

Share this post