Cara Membuat Widget Menjadi Sticky Ketika di Scroll
Cara membuat position sticky kita pada hari ini tidak menggunakan JavaSCript, melainkan dengan menggunakan CSS. Dan tentunya sangat mudah untuk diemplementasikan di blog kamu. Berikut langkah langkah mudahnya cara membuat widget menjadi sticky ketika di scroll.
1. CODE CSS
Silahkan tempelkan code berikut ini di <style> atau <b:skin> karena code ini adalah code CSS.
#sticky-widget{
position:-webkit-sticky;
position:sticky;
z-index:99;
top:10px;
}
position:-webkit-sticky;
position:sticky;
z-index:99;
top:10px;
}
Penjelasan
code Position:sticky adalah kode inti utamanya yang memberikan perintah agar position menjadi sticky. Code z-index:99; kita gunakan agar sticky widget tidak tertutupi oleh widget lain seperti iklan ataupun sidebar. Dan Code top:10px; adalah agar memberi jarak antara widget sticky dengan widget diatasnya, namun bisa kamu ubah sesuai dengan template blog kamu yah friends.
2. CODE HTML
Silahkan tempelkan kode ini di widget yang ingin kamu jadikan sticky, namun sayangnya code ini bisa work jika menggunakan <div id=''> tidak akan berfungsi jika codenya diubah menjadi <div class=''>
<div id='sticky-widget'>
<div class='link-utama'>
<a href='penggemarkoding.blogspot.com'>Ini adalah Sticky</div>
</div>
<div class='link-utama'>
<a href='penggemarkoding.blogspot.com'>Ini adalah Sticky</div>
</div>
Penjelasan
Begitu kira kira gambaran kode HTMLnya agar widget sticky bisa work dengan cara <div id='sticky-widget'> bukan menggunakan <div class='sticky-widget'>
Itulah langkah mudah untuk membuat widget menjadi sticky position ketika di scroll. Berikut kode lengkapnya
<!DOCTYPE html>
<html>
<head>
<title> INI ADALAH STICKY</title>
<style>
#sticky-widget{
position:-webkit-sticky;
position:sticky;
z-index:99;
top:10px;
}
</style>
</head>
<body>
<div id='sticky-widget'>
<div class='Judul'>INI ADALAH STICKY</div>
</div>
</body>
</html>
Itulah cara membuat widget menjadi sticky position ketika di Scroll versi penggemarkoding. Semoga bermanfaat dan terima kasih telah membaca. Jangan lupa share artikel ini kepada temanmu agar mereka juga tahu akan ilmu baru dan tentunya mudah dipahami, karena makin banyak ilmu ketika saling berbagi ilmu.
S: Penggemarkoding blogspot
0 Response to "Cara Membuat Widget Menjadi Sticky Ketika di Scroll"
Post a Comment