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.

Selasa, Juni 27, 2017 - 10 komentar

10 komentar untuk Cara Membuat Widget Share Melayang dan Responsif untuk Mobile.

Silakan masukkan komentar anda. Jangan habiskan waktu hanya untuk melakukan SPAM disini.


Perlihatkan Semua Komentar Tutup Semua Komentar
.
Niubis Online
Jumat, 21 Juli 2017 14.01.00 WITA

thanks gan work!!!

Balas Hapus
.
Niubis Online
Rabu, 09 Agustus 2017 18.11.00 WITA

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

Balas Hapus
.
Ozik Jarwo
Rabu, 09 Agustus 2017 18.43.00 WITA

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

Balas Hapus
.
SelloPhone.com
Sabtu, 21 Oktober 2017 20.19.00 WITA

menarik untuk di coba apa bisa ya di pasang di wordpress

Balas Hapus
.
Ozik Jarwo
Sabtu, 21 Oktober 2017 21.34.00 WITA

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

Balas Hapus
.
H 4 RD
Minggu, 10 Desember 2017 05.53.00 WITA

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

Balas Hapus