Banyak blog yang ngebahas tentang Sticky, Sticky bisa diterapkan pada semua
elemen, misal header, menu, widget pada sidebar, widget pada kolom posting dan
lain sebagainya.
Pada
blog kita bisa memasang lebih dari satu sticky. Misal kita memasang sticky
untuk Menu dan sticky untuk widget Arsip Blog dan berikut ini adalah salah satu
tutorial cara memasang sticky di blog dan bila tertarik untuk memasang di blog
kamu, Kamu bisa mengikuti langkah-langkahnya sebagai berikut.
Smoga Bermanfaat ;
*Pertama ;
Pertama-tama masuk ke dasboard blogspot Anda, lalu pilih Template, Edit HTML,
Pasang script jquery berikut di atas </head> untuk memudahkan dalam
mencarinya tekan CTRL + F
<script async='async' src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'
type='text/javascript'/>
*Kedua ;
Tentukan
elemen atau selector atau bagian mana yang hendak dibuat sticky. Dalam contoh
ini yang akan dibuat sticky nya adalah widget "Recommended Link"
dengan selector #Label2. atau yang lain sesuka kalian lalu copy script berikut
dan letakkan di atas </body>
<script
type='text/javascript'>$(document).ready(function(){var a=$("#HTML1").offset().top;var
b=function(){var c=$(window).scrollTop();if(c>a){$("#HTML1").addClass("sticky1")}else{$("#HTML1").removeClass("sticky1")}};b();$(window).scroll(function(){b()})});</script>
*Ketiga ;
Langkah slanjutnya copy
CSS sticyky berikut dan letakkan di atas ]]></b:skin> atau menyerupainya
.sticky1 {
position:fixed;
top:0px;
z-index:10000;
z-index:10000;
}
Atau mau dengan tampilan sticky
berbeda dengan aslinya bisa ditambah dengan variasi CSS seperti ;
.sticky1 {
position:fixed;
top:0px;
z-index:10000;
width:250px;
background: #EDF5EC;
padding: 10px;
border: 1px solid #af1641;
border-radius: 0 0 4px 4px;
}
Silahkan ganti selector warna
merah dengan selector dari widget yang akan dibuat untuk sticky, Css kode warna hijau adalah kode CSS untuk tampilan sticky.
Terus jika ingin membuat 2
sticky ? caranya tinggal menambahkan satu script dan satu CSS lagi. Yang
diperlukan hanya merubah selector id dan merubah CSS sticky nya.
Misalnya kita akan menambah
satu sticky lagi yaitu pada widget "Arsip Blog" dengan selector
#BlogArchive1 maka kita harus memasang script sticky dengan id atau class
#BlogArchive1 dan CSS sticky nya adalah .sticky2 sebab .sticky1 telah digunakan
pada sticky yang pertama.
Contoh untuk CSS sticky2
.sticky2 {
position:fixed;
top:161px;
margin-top:15px;
z-index:10000;
width:250px;
background: #FEF3DE;
padding: 10px;
border: 1px solid #af1641;
border-radius:4px;}
position:fixed;
top:161px;
margin-top:15px;
z-index:10000;
width:250px;
background: #FEF3DE;
padding: 10px;
border: 1px solid #af1641;
border-radius:4px;}
untuk SCRIPT sticky2
<script type='text/javascript'>$(document).ready(function(){var
a=$("#HTML2").offset().top;var b=function(){var
c=$(window).scrollTop();if(c>a){$("#HTML2").addClass("sticky2")}else{$("#HTML2").removeClass("sticky2")}};b();$(window).scroll(function(){b()})});</script>
Untuk peletakan caranya
masih sama dengan posisi di atas dan bila semua cara di atas tidak berhasil
coba hapus cache browser kamu. Terus bila masih tidak bisa juga kemungkinan
post di halamat tersebut terlalu pendek. Dan bila masih belum juga bisa,
Sebaiknya kalian cari template yang udah ada stickynya heheheh😫
Bila masih ada yang belum jelas bisa coment di bawah atau hubungi contact us untuk sharing bersama.
0 Comments
