Cara Menciptakan Sticky Widget Di Blogger
Tampilan menarik pada blog akan menjadi sentra perhatian pengunjung dan juga para blogger yang lain. Makanya, banyak blogger yang berlomba-lomba untuk mempercantik tampilan blog mereka dengan metode-metode dan design keren.
Widget sidebar merupakan komponen penting pada template, biasanya widget ini terdiri dari Populer Posts atau postingan terpopuler, Label, Archive, Recent Post, Subscribe box, Author profil dan banayk lagi. Tergantung dari pembuat template itu sendiri, mau memsang apa pada widget template yang dibuatnya. Lalu ada juga yang menciptakan tampilan widgetnya melayang. widget yang melayang ini disebut dengan istilah sticky.
Widget sidebar yang melayang maksudnya yakni apabila kita scroll kebawah pada blog, maka widget tersebut tetap akan mengikut sampai pada titik yang di tentukan. Pada tutorial kali ini, saya akan membagikan cara menciptakan widget melayang pada template blog dan berhenti di footer. Langsung saja kita ke tahapan-tahapannya.
1. Login ke blogger Anda, pilih theme kemudian pilih edit HTML. Letakkan instruksi berikut ini diatas </body>
perhatikan pada area yang dimarking, genti instruksi tersebut dengan instruksi sidebar milik template blog Anda, sebab setiap pemilik template biasanya memperlihatkan nama yang berbeda pada setiap template buatannya.
2. Selanjutnya, lakukan penambahan untuk ukuran width atau lebar sticky yang akan dibuat. Sebaiknya mengikuti ukuran sidebar Anda semoga terlihat lebih rapih. untuk misalnya menyerupai berikut
3. Pada tahapan diatas, kalau Anda sudah melaksanakan semuanya dengan benar maka sticky akan berfungsi. Namun untuk tampilan responsive, sebaiknya tambahkan instruksi CSS berikut ini
Jika pada template Anda sudah ada kode @media only screen and (max-width:768px){ , maka simpan saja instruksi #sticky-widget1{width:100%;max-width:100%} dibawahnya
Untuk Hasilnya, silahkan lihat di Sidebar Recents Post yang saya gunakan.
Sekian untuk totorial kali ini ihwal cara menciptakan widget sticky atau melayang di blogger
Sumber : https://bloglandai.blogspot.com/search?q=cara.membuat.sticky.widget.di.sidebar.blog Sumber https://dewaplokis.blogspot.com/
Widget sidebar merupakan komponen penting pada template, biasanya widget ini terdiri dari Populer Posts atau postingan terpopuler, Label, Archive, Recent Post, Subscribe box, Author profil dan banayk lagi. Tergantung dari pembuat template itu sendiri, mau memsang apa pada widget template yang dibuatnya. Lalu ada juga yang menciptakan tampilan widgetnya melayang. widget yang melayang ini disebut dengan istilah sticky.
Widget sidebar yang melayang maksudnya yakni apabila kita scroll kebawah pada blog, maka widget tersebut tetap akan mengikut sampai pada titik yang di tentukan. Pada tutorial kali ini, saya akan membagikan cara menciptakan widget melayang pada template blog dan berhenti di footer. Langsung saja kita ke tahapan-tahapannya.
1. Login ke blogger Anda, pilih theme kemudian pilih edit HTML. Letakkan instruksi berikut ini diatas </body>
<script type='text/javascript'> //<![CDATA[ $(function() { if ($('#sticky-widget1 ').length) var el = $('#sticky-widget1'); var stickyTop = $('#sticky-widget1').offset().top; var stickyHeight = $('#sticky-widget1').height(); $(window).scroll(function() { var limit = $('#footer-wrapper').offset().top - stickyHeight - 20; var windowTop = $(window).scrollTop(); if (stickyTop < windowTop) {el.css({position: 'fixed', top: 20})else {el.css('position', 'static');} if (limit < windowTop) {var diff = limit - windowTop;el.css({top: diff });}});}}); //]]> </script>perhatikan pada area yang dimarking, genti instruksi tersebut dengan instruksi sidebar milik template blog Anda, sebab setiap pemilik template biasanya memperlihatkan nama yang berbeda pada setiap template buatannya.
#sticky-widget1 yakni widget yang akan di jadikan sticky / melayang
Sedangkan #footer-wrapper yakni titik pemberhentian sticky
2. Selanjutnya, lakukan penambahan untuk ukuran width atau lebar sticky yang akan dibuat. Sebaiknya mengikuti ukuran sidebar Anda semoga terlihat lebih rapih. untuk misalnya menyerupai berikut
#HTML2{width:100%;max-width:276px}#sticky-widget1{width:100%;max-width:276px}max-width yang dipakai yakni lebar sidebar pada template blog Anda, jadi sesuaikan lebarnyaSilahkan check dengan teliti nama widget yang ingin Anda berikan efek sticky semoga penggunaan trik ini dapat berhasil
3. Pada tahapan diatas, kalau Anda sudah melaksanakan semuanya dengan benar maka sticky akan berfungsi. Namun untuk tampilan responsive, sebaiknya tambahkan instruksi CSS berikut ini
@media only screen and (max-width:768px){ #sticky-sidebar{width:100%;max-width:100%}}Jika pada template Anda sudah ada kode @media only screen and (max-width:768px){ , maka simpan saja instruksi #sticky-widget1{width:100%;max-width:100%} dibawahnya
Untuk Hasilnya, silahkan lihat di Sidebar Recents Post yang saya gunakan.
Sekian untuk totorial kali ini ihwal cara menciptakan widget sticky atau melayang di blogger
Sumber : https://bloglandai.blogspot.com/search?q=cara.membuat.sticky.widget.di.sidebar.blog Sumber https://dewaplokis.blogspot.com/