Cara Membuat Sticky Widget di Sidebar Blog

adscblog

Tidak sedikit Para Blogger Untuk mempercantik Blog nya sendiri dengan berbagai Variasi yang di inginkan nya melalui penambahan Breaking Nes,Headline News dan Pemasangan Sticky Widget di blog yang brflatform Blogger

Sticky Widget Alias Widget Melayang yang dimana widget tersebut apabila Postingan blog terlalu panjang dan Kursor di seret kebawah maka widget tersebut akan tetap di tempat nya tanpa harus terhalang oleh widget lain nya

Biasanya Sticky Widget ini komponen penting yang di pasang di bagian sidebar dan memudahkan para pengujung blog untuk tidak ketinggalan Postingan Postingan lain nya yang bersangkutan dengan artikel yang di sedang di baca nya

Biasanya Yang di pasang di Widget Sticky ini antara lain Popular Post atau Random Artikel atau sesuatu yang di inginkan oleh pemilik Blog tersebut,dan cara memasang Sticky Widget di sidebar blog tersebut masih banyak yang menggunakan nya

Cara membuat atau memasang sticky widget atau widget melayang di blog

Sticky Widget atau WIdget yang melayang Maksud nya adalah apabila kita scroll ke bagian bawah blog dan berada di bagian postingan maka Widget tersebut akan tetap berada di tempat nya tersebut sampai pada titik yang telah di tentukan oleh Pemilik blog

Dan apabila sobat tertarik Untuk memasang Sticky widget tersebut,sobat bisa mengikuti langkah-langkah pembuatan nya di bawah ini di antara nya

• Seperti biasa silahkan masuk ke bagian blogger
• Lalu pilih blog sobat kemudian klik Tema > Edit HTML
• Setelah berada di edit html silahkan sobat letakan kode berikut sebelum kode </head>

<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>

 Keterangan : sticky-widget1 adalah widget yang akan di buat sticky atau melayang
sedangakan footer-wrapper adalah titik pemberhentian sticky tersebut

• Kemudian Save Template

Untuk Tampilan Yang maksimal silahkan sesuaikan Sticky widget tersebut dengan lebar widget blog sobat seperti

#sticky-widget {width:100%;max-width:300px;}

Cara di atas sudah bisa di gunakan dan sudah sesuai maka untuk bisa tampil responsive silahkan masukan kode css berikut

@media only screen and (max-width:768px){
#sticky-sidebar{width:100%;max-width:100%}}

Nah itulah cara membuat sticky widget di blogger semoga artikel ini bisa membantu sobat blogger semua selamat mencoba dan salam blogger

adscblog

Recommendation Apps

ads1

Previous

Posting Lebih Baru

Next

Posting Lama

Posted by Dede Ubed, Published at 18 Agustus and have 0 komentar