Cara Ampuh Membuat Widget Melayang

Cara Ampuh Membuat Widget Melayang - Untuk membuat Widget Tetap Melayang, biasa kita mengenal istilah Sticky. Sticky Berfungsi saat Halaman Blog kamu digulirkan kebawah, Widget yang kamu buat tersebut akan Tetap Pada Posisi. Jika Halaman digulir keatas, juga akan berada tetap di Posisi. kira kira seperti itu teman-teman.

Untuk Membuat Widget Melayang. kamu harus mengetahui ID Widgetnya terlebih dahulu.

Contoh Widget Recent Post. saat halaman discroll kebawah, dan pengunjung ingin melihat post lainnya, tidak perlu lagi bertukar halaman. karena Recent post sudah menempel saat di scroll. simak penjelasan dibawah ini cara menerapkannya.

Membuat Widget Melayang

1. Pergi ke menu Tata Letak >> Cari Widget yg mau di Sticky-kan >> Pilih Edit >> Lalu cari Kodenya Seperti Gambar Nomor 2 ( ID nya berada di ujung Alamat )

ID : PopularPosts2

2. Jika sudah dapat ID, Kamu Copykan CSS dibawah tepat diatas ]]></b:skin, Ganti yang di Tandai dengan ID Widget yang dicari tadi. (Tanda # jangan dihapus)

.makesticking{background:none!important;position:fixed!important;top:25px;z-index:99;-webkit-transform:translateZ(0);}
#Amkepo .widget-content {padding:0;margin:auto;}

 3. Selanjutnya Copykan JavaScript dibawah ini diatas </body>. Ganti yang di Tandai dengan ID yang dicari tadi

<script type='text/javascript'>
//<![CDATA[
// Sticky Widget
function makemeSticky(e){function t(){var e=s.getBoundingClientRect();e.top<0?(n.className=a+" makesticking",n.style.width=i+"px"):n.className=a}var n=document.getElementById(e),s=document.createElement("div");n.parentNode.insertBefore(s,n);var i=n.offsetWidth,a=n.className+" makesticky";window.addEventListener("scroll",t,!1)}makemeSticky("Amkepo");
//]]>
</script> 

4. Kemudian Save, dan lihat Hasilnyaa.

Semoga Artikel ini Bermanfaat. Terimkasih.

Tweet

Postingan terkait:

Ditulis Unknown — Saturday, September 24, 2016 — Add Comment — Tutorial Blog