Cara Membuat Widget Share Melayang dan Responsif untuk Mobile

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:
  1. SEO friendly, sama sekali tidak menggangu SEO
  2. Fully responsive, dapat menyesuaikan lebar layar
  3. Terdapat 5 varian share sosial media, yaitu:
    • Facebook share
    • Twitter share
    • Google Plus share
    • Pinterest pin
    • Tumblr share
  4. Menggunakan efek :hover
  5. 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='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' rel='nofollow' target='_blank' title='Share ke Facebook'><i class='fa fa-facebook'/></a>
<a class='share-jarwo-tw' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Share ke Twitter'><i class='fa fa-twitter'/></a>
<a class='share-jarwo-gp' expr:href='&quot;https://plus.google.com/share?url=&quot; + 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='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;amp;description= + data:post.title&quot;' 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 == &quot;item&quot;'>
<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.
Silakan pilih sistem komentar anda ⇛   

Silakan berkomentar dengan sopan. Jangan buang-buang waktu anda hanya untuk melakukan SPAM di sini.

Ozik Jarwo Kode Jarwo
Ozik Jarwo author
# 10 Desember 2017 10.19

Sama sama

Balas
H 4 RD Kode Jarwo
H 4 RD
# 10 Desember 2017 05.53

makasih min.. maju canti cantik cantik!!! :D salam kenal (historyofmoslem.blogspot.co.id)

Balas
Ozik Jarwo Kode Jarwo
Ozik Jarwo author
# 21 Oktober 2017 21.34

Bisa gan sudah saya coba. Cuma cara pemasangannya yang beda.

Balas
SelloPhone.com Kode Jarwo
SelloPhone.com
# 21 Oktober 2017 20.19

menarik untuk di coba apa bisa ya di pasang di wordpress

Balas
Ozik Jarwo Kode Jarwo
Ozik Jarwo author
# 9 Agustus 2017 18.43

Lha emangnya versi mobile gak muncul gan? coba saya minta linknya

Balas
Niubis Online Kode Jarwo
Niubis Online
# 9 Agustus 2017 18.11

gan supaya bisa muncul di versi mobile bagaimana gan? sudah work diversi dekstop

Balas
Ozik Jarwo Kode Jarwo
Ozik Jarwo author
# 8 Agustus 2017 20.10

Silahkan bos

Balas
Bang Garong Kode Jarwo
Bang Garong
# 8 Agustus 2017 18.42

Izin coba bos

Balas
Ozik Jarwo Kode Jarwo
Ozik Jarwo author
# 21 Juli 2017 14.40

Sama-sama gan

Balas
Niubis Online Kode Jarwo
Niubis Online
# 21 Juli 2017 14.01

thanks gan work!!!

Balas