Cara menambahkan sticky widget pada sidebar template blog lama

Kali ini kita akan membahas cara membuat sticky widget pada sidebar template blog lama. Mengapa saya tekankan template lama? Karena pada varian template template terbaru secara default sidebarnya beda, kecuali emporio, tiga varian template terbaru lain seperti contempo, soho dan notable sidebar 'dilipat' disamping pada tampilan ukuran lebar layar tertentu.

Masih banyak lho yang menggunakan basis template lama dengan layout versi 2, varian varian template lama ini adalah:

1. Simple
2. Dinamic
3. Picture window
4. Awesome inc.
5. Watermark
6. Ethereal
7. Travel 

Dan Jangan remehkan template template lama ini karena ia masih 'worth' untuk di jadikan template buat blogging, tidak percaya? Template viomagz buatan Mas Sugeng yang terkenal itu di buat masih berbasis template lama ini. Yang penting terlebih dahulu harus di rombak menjadi Responsive, mobile friendly dan lebih SEO friendly. Kami sedang mengerjakannya untuk di bagikan gratis.

CARA MEMBUAT STICKY WIDGET PADA SIDEBAR TEMPLATE BLOGGER LAYOUT 2

Apa sih gunanya sticky widget? Tentu berguna, namun gunanya versi kami adalah:

1. Template tampak lebih cantik
2. Sidebar akan tampak tidak kosong karena paling tidak satu widget tetap disana
3. Untuk menjadikan suatu widget sebagai highlight (pusat perhatian) bagi pembaca, misalnya jika yang di jadikan sticky adalah widget iklan

Disini kami akan memberikan contoh pembuatan sticky widget yang bisa diterapkan ke template template lama yang memiliki sidebar kanan, kalau 4 varian template terbaru (contempo, soho, emporio dan notable) sidebarnya di sembunyikan dengan cara jquerry pada ukuran layar tertentu.

Namun jujur saja sticky sidebar ini harus mengikuti syarat atau kondisi berikut karena memiliki kelemahan:

1. Jika sticky widgetnya adalah PopularPosts yang di setting untuk lebih tujuh item maka PopularPosts tersebut tidak bisa di scroll sampai habis hingga ke atas, hanya terbatas 3 list PopularPosts saja.
2. Widget yang paling cocok adalah: Follower, Text, dan widget widget dengan tampilan ramping lainnya.
3. Widget harus di letakan paling bawah sidebar.

CARANYA:

1. Masuk kepengaturan Blogger
2. Klik tema atau theme
3. Pada bagian kanan menu klik tombol titik tiga bersusun maka akan keluar 5 urutan menu.
4. Pilih Edit HTML.

Akan muncul halaman editor HTML Blogger, klik satu kali mouse ke tengah lautan kode kode tersebut hingga kursur berkedit kedip, dan lalu pada keyboard komputer , tablet atau laptop kalian tekan CTRL+F secara bersamaan, maka pada pojok atas bagian kiri akan muncul kotak dialog pencarian, ketikan </body> dan enter. Pada intinya kalian harus mencari kode tersebut di dalam template blogger.

Atau perhatikan gambar keyboard berikut, yang harus di tekan:

Pada halaman editor HTML akan muncul berbundel bundel kode kode HTML, yang tentu saja sulit dicari secara manual, atau pakai scroll mouse dari atas hingga kebawah bukan, namun jika Kalian lakukan cara di atas akan muncul kotak dialog pencarian pada pojok kiri atas halaman editor HTML seperti pada gambar berikut (lihat tanda merah):

Setelah kode </body> tersebut di temukan letakan kode berikut tepat di atasnya:

<script>
//<![CDATA[
HG_makeSticky("Followers1"); // enter your widget ID here
function HG_makeSticky(elem) {
var HG_sticky = document.getElementById(elem);
var scrollee = document.createElement("div");
HG_sticky.parentNode.insertBefore(scrollee, HG_sticky);
var width = HG_sticky.offsetWidth;
var iniClass = HG_sticky.className + ' HG_sticky';
window.addEventListener('scroll', HG_sticking, false);
function HG_sticking() {
var rect = scrollee.getBoundingClientRect();
if (rect.top < 0) {
HG_sticky.className = iniClass + ' HG_sticking';
HG_sticky.style.width = width + "px";
} else {
HG_sticky.className = iniClass;
}
}
}
//]]>
</script>
<style>
.HG_sticking {background:#ffffff !important; position:fixed !important; top:0; z-index:1; box-shadow:0px 10px 4px -5px rgba(0,0,0,0.3); min-margin-top: 45; padding-top: 45px; position:relative9 !important;}
</style>

Ganti kode widget yang kami merahkan dengan kode widget Kalian sendiri, misalnya: 'Label1' atau 'Text1' dst

Jangan lupa SAVE template.

Lihat DEMO:

Kami menerapkannya pada desain template buatan Anissa berbasis template Simple atau Sederhana layout ke 2, kalau kalian berminat terhadap template tersebut akan kami bagikan gratis. Dijamin bersih, no credit sama sekali.

kuti terus trik, tips, teknik hack dan kabar terupdate dari blog ini!  Share: