Jikalau sebelumnya saya juga sempat membuat artikel cara membuat widget share super ringan + hover ala Bang Jarwo, kali ini saya juga akan membuatnya, tetapi dengan 1 perbedaan, yaitu widget ini jauh lebih responsif dibandingkan widget share button sebelumnya.
Bisa kita lihat pada gambar diatas, ada 2 widget share, 1 melayang disebelah kiri dan satunya lagi mendatar dan menempet dibawah layar.
Seperti itulah nanti widget yang akan kita buat. Bila dicek melalui pc/tablet, maka widget share ini akan melayang disebelah kiri layar. Sedangkan bila dilihat melalui handphone/mobile, widget akan berbentuk datar dan melayang di bawah layar.
UPDATE: Mohon maaf bagi yang sudah pernah memasang widget ini tetapi hasilnya tidak seperti di DEMO, sekarang saya sudah mengupdate CSSnya dan kemungkinan tidak sesuai sudah sangat kecil.
Untuk demo gambarnya silahkan lihat di demo ini:
Berikut beberapa fitur dari widget share button kali ini:
- SEO friendly, sama sekali tidak menggangu SEO
- Fully responsive, dapat menyesuaikan lebar layar
- Terdapat 5 varian share sosial media, yaitu:
- Facebook share
- Twitter share
- Google Plus share
- Pinterest pin
- Tumblr share
- Menggunakan efek :hover
- Ringan, karena:
- Font Awesome yang telah didefer & hanya akan work pada postingan
- Tanpa menggunakan gambar apapun
- Tanpa CSS/JavaScript Ekstenal lainnya selain FontAwesome
Sudah yakin ingin memasangnya? Silahkan ikuti beberapa langkah berikut ini.
Langkah Pertama: Pemasangan CSS
Pertama, silahkan anda buka blogger.com > Tema > Edit HTML. Lalu, klik disembarang kode, kemudian tekan Ctrl + F untuk membuka search box.
Silahkan anda cari kode <b:skin> , lalu masukkan kode ini tepat dibawahnya.
/* Responsive */
@media all and (max-width:780px){
.share-jarwo {z-index:8080;margin:30px auto 110px;bottom:-113px;width:100%}
.share-jarwo a, .share-jarwo-p{float:left;width:16.66%!important}
.share-jarwo a:hover{width:10%!important}
.share-jarwo-p{background:#fff;height:45px;padding-top:12px!important}
}
@media all and (min-width:780px){.share-jarwo {top:150px}}
/* Desain */
.share-jarwo {position:fixed;left:0}
.share-jarwo-p {color:#000 !important;font-size:11px;margin:0!important}
.share-jarwo a {color:#fff!important;font-weight:bold;transition:color .2s ease;font-size:20px!important;width:85%}
.share-jarwo-fb {background:#3b5998}
.share-jarwo-tw {background:#00bfff}
.share-jarwo-gp {background:#f83124}
.share-jarwo-tb {background:#304e6c}
.share-jarwo-pt {background:#cb2027}
.share-jarwo a, .share-jarwo-p {font-family:arial;display:block;padding:5px;text-align:center}
.share-jarwo a:hover {width:150%}
Lalu simpan template anda dan lanjutkan ke langkah kedua.
Langkah Kedua: Pemasangan tag HTML
Masih di editor template, silahkan anda cari kode </article> atau <data:post.body/> disana, lalu masukkan kode ini tepat dibawahnya.
<div class='share-jarwo'>
<p class='share-jarwo-p'>Share <i class='fa fa-share-alt'/></p>
<a class='share-jarwo-fb' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url' rel='nofollow' target='_blank' title='Share ke Facebook'><i class='fa fa-facebook'/></a>
<a class='share-jarwo-tw' expr:href='"http://twitter.com/share?url=" + data:post.url' rel='nofollow' target='_blank' title='Share ke Twitter'><i class='fa fa-twitter'/></a>
<a class='share-jarwo-gp' expr:href='"https://plus.google.com/share?url=" + data:post.url' rel='nofollow' target='_blank' title='Share ke Google+'><i class='fa fa-google-plus'/></a>
<a class='share-jarwo-pt' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&amp;media=" + data:post.thumbnailUrl + "&amp;description= + data:post.title"' rel='nofollow' target='_blank' title='Share ke Pinterest'><i class='fa fa-pinterest'/></a>
<a class='share-jarwo-tb' href='http://www.tumblr.com/share' rel='nofollow' target='_blank' title='Share ke Tumblr'><i class='fa fa-tumblr'/></a>
</div>
Simpan template anda dan lihat hasilnya.
Sekarang cobalah anda buka salah satu postingan di blog anda. Bila widget berhasil terpasang dengan baik, maka widget sudah siap dipakai. Bila belum, misal ikon sosial medianya tidak muncul/blank, silahkan lanjutkan ke langkah ketiga.
Langkah Ketiga: Pemasangan Font
Masih sama, di editor template, cari kode </body> lalu masukkan kode ini tepat diatasnya.
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>//<![CDATA[
// CSS Ready
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css");
//]]></script>
</b:if>
Simpan template anda dan silahkan cek lagi.
Script diatas sebenarnya adalah script FontAwesome versi 4.6.0 yang sudah didefer, jadi tidak akan memberatkan blog apalagi menambah masalah di Google PageSpeed Insights.
Bagaimana? Widget sudah terpasang dengan baik bukan? Silahkan anda tinggalkan komentar dibawah untuk request widget lainnya dari Bang Jarwo!
Bila anda sudah cukup mengerti lebih dalam tentang dunia CSS, silahkan anda ganti kode yang berwarna hijau untuk menyesuaikan dengan template blog anda.