Skip to main content

Cara Membuat Sticky Widget Di Sidebar Blog

Cara Membuat Sticky Widget
Cara Membuat Sticky Widget Di Sidebar Blog - Kali ini kita akan membahas cara membuat sticky widget atau widget menempel (lengket) di sidebar blog. Sticky widget sering digunakan untuk mengisi kekosongan blog. Ketika kita memposting artikel yang cukup panjang ke bawah, tentu saat mendekati akhir postingan bagian sidebar akan terlihat kosong karena widget tidak dapat bergerak atau tidak sticky. Nah untuk itu kita perlu membuat sticky widget di sidebar. Biasanya, sticky di buat untuk widget iklan atau pun sosial media karena lebih penting untuk penghasilan dan SEO. Dibawah saya juga akan menjelaskan bagaimana cara membuat sticky widget menjadi responsive. Sebenarnya untuk membuat sticky widget menjadi responsive tidaklah rumit, kita hanya perlu mengembalikan css-nya tersebut menjadi statis lagi. Bagi yg ingin tahu cara membuat sticky widget di sidebar blog, simak langkah berikut. Baca juga Cara Membuat Related Post Dengan Gambar

CSS Sticky Widget

Letakkan css berikut ini diatas kode ]]></b:skin> yang ada didalam template blog anda.
.sticky {
  position:fixed;
  top:10px;
  z-index: 100;}

Script Sticky Widget

Kemudian cari kode </body> dan letakkan script berikut diatasnya
<script type='text/javascript'>
$(document).ready(function() {
var stickyWidgetTop = $('#HTML5').offset().top;
var stickyWidget = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyWidgetTop) {
    $('#HTML7').addClass('sticky');
} else {
    $('#HTML7').removeClass('sticky');
}
};
stickyWidget();
$(window).scroll(function() {
    stickyWidget();
});
});
</script>
Kemudian ganti tulisan warna biru dengan id widget urutan paling bawah dari sidebar blog. Untuk tulisan warna merah ganti dengan id widget yg ingin dibuat jadi sticky.

Cara Membuat Sticky Widget Responsive

Untuk membuat sticky widget responsive kita hanya perlu menambahkan css media query saja. Yang terjadi adalah widget sticky akan kembali seperti default dari template blog anda. Jadi jika anda belum mengubah template blog menjadi responsive, cara ini akan menjadi percuma. Berikut caranya:
Letakkan kode berikut di atas kode ]]></b:skin>
@media screen and (max-width: 959px){.sticky{position:static!important;width:100%!important;}}
Untuk tulisan warna merah ubah sesuai keinginan anda. Tapi saya rekomendasikan untuk tidak mengubahnya, karena minimum lebar dekstop adalah segitu. Sebenarnya cara diatas ini adalah cara menghilangkan sticky pada tampilan mobile. Karena tampilan ponsel ukurannya lebih kecil daripada dekstop, ini akan membuat sticky widget akan menutupi sebagian halaman blog anda. Demikianlah postingan saya mengenai cara membuat sticky widget atau cara membuat widget menempel (lengket) pada sidebar  blog. Semoga artikel ini dapat bermanfaat bagi kita semua.
Labels:

Comments

Post a Comment

Popular posts from this blog

10 Jembatan Paling Terkenal Di Dunia

10 Jembatan Paling Terkenal Di Dunia - Jembatan merupakan sebuah sarana untuk menyeberangi sungai ataupun lautan. Jembatan paling terkenal di dunia berikut mungkin adalah jembatan terpanjang, jembatan tertinggi di dunia. Banyak wisatawan dari penjuru dunia datang hanya untuk melihat maupun berfoto diatas jembatan ini. Berikut adalah 10 jembatan paling terkenal di dunia . 1. Jembatan Golden Gate, Amerika Serikat Jembatan paling terkenal pertama adalah jembatan Golden Gate. Jembatan Golden Gate (Golden Gate Bridge) menghubungkan antara San Fransisco dengan California. Jembatan ini memiliki panjang keseluruhan sekitar 2.727 meter dan tinggi 230 meter diatas permukaan laut. Jembatan Golden Gate dibuka pertama kali pada tahun 1937 dan merupakan jembatan paling terkenal serta menjadi daya tarik wisata paling populer di San Francisco. 2. Jembatan Menara, Inggris Jembatan paling terkenal kedua adalah jembatan Menara. Jembatan Menara (Tower Bridge) dibangun pada tahun 1886 dan ...
Post a Comment
Read more

10 Danau Paling Unik Di Dunia

10 Danau Paling Unik Di Dunia - Danau adalah sebuah genangan air yg besar dan memiliki kedalaman yg cukup untuk kehidupan hewan air. Kebanyakan danau hampir sama persis di seluruh dunia, namun berbeda dengan danau paling unik dibawah ini. Danau unik ini memiliki warna, bentuk dan keadaan yg unik sehingga masuk kedalam daftar danau terunik. Penasaran, berikut 10 danau paling unik di dunia . 10 Danau Paling Unik Di Dunia Danau Hillier, Australia Danau paling unik pertama adalah danau Hilier. Danau Hillier atau sering disebut Pink Lake (danau merah muda) adalah sebuah danau air garam yg terletak di pinggiran laut Goldfields-Esperance, Australia. Danau Hillier dengan panjang 600 meter dan lebar 250 meter memiliki keunikan karena airnya yg berwarna merah muda. Banyak pendapat mengatakan warna merah muda pada air danau tsb disebabkan oleh alga atau konsentrasi air asin yg sangat tinggi. Namun airnya tidak selalu berwarna merah muda, tergantung suhu, salinitas dan kondisi cahay...
Post a Comment
Read more

10 Mobil Termahal Di Dunia

10 Mobil Termahal Di Dunia - Mobil merupakan kendaraan roda empat berbahan bakar bensin atau solar. Tidak seperti motor, mobil dapat mengangkut lebih dari dua orang dan dapat melindungi pengendara dari hujan dan panas. Di indonesia sendiri mobil sering di anggap sebagai tanda kekayaan dan kesuksesan seorang. Tapi apakah orang kaya Indonesia bisa membeli mobil termahal di dunia di bawah ini. Berikut 10 mobil termahal di dunia tahun 2014 versi Forbes. Mobil Mercedes-Benz CL65 AMG Coupe Negara Asal: Jerman Mesin: 621-hp, 6.0-liter, bi-turbo V-12 0-60 mph: 4.2 detik Harga : $ 215.500  Mobil Aston Martin Vanquish Negara Asal: Inggris Mesin: 565-hp, 6.0-liter V-12 0-62 mph (yaitu, 100 km per jam): 4,1 detik Harga: $ 279.995  Mobil Bentley Mulsanne Negara Asal: Inggris Mesin: 505-hp, 6.75-liter, twin-turbo V-8 0-60 mph: 5.1 detik Harga : $ 298.900  Mobil Rolls-Royce Phantom Wheelbase Negara Asal: Inggris Mesin: 453-hp, 6.75-liter V-12 0-60 mph: 5.8 detik Harga :...
Post a Comment
Read more