Cara Mudah membuat Sidebar Melayang atau Sticky

adscblog

Cara mudah membuat sticky pada sidebar - Mungkin bagi anda para blogger pernah melihat ketika anda mengunjungi suatu blog,anda pernah melihat baik itu sidebar ataupun menu yang melayang atau sticky,namun sebelum nya apakah anda tahu apa yang di maksud Sticky pada sidebar?

Sidebar Sticky yaitu sidebar yang selalu melayang walaupun mouse komputer anda di arahkan ke bawah,dan biasa nya sidebar sticky ini sidebar yang di anggap penting atau pun khusus sehingga di buatkan Sticky

Dan biasanya sticky ini di buat oleh pembuat blog agar para penggunjung dengan jelas sidebar sidebar tertentu yang di jadikan sticky tersebut misalkan sidebar follower,fanspage ataupun yang lain nya,atau anda juga pernah mungkin melihat menu suatu blog di jadikan sticky atau melayang walauun mouse komputer anda di arahkan ke bawah

Cara Mudah membuat Sticky pada widget blog

Sticky ini sangat lah unik dan bahkan sebagian blogger menggunakan trik sticky ini,dan cara pembuatan sticky ini pun sangatlah simple tidak begitu banyak menggunakan script sehingga tidak mengganggu terhadap loading blog sobat

Jika anda tertarik dengan sidebar/widget sticky ini anda dapat mengikuti langkah langkah pembuatan nya di bawah ini

Tutorial pembuatan Sticky pada sidebar blog dengan mudah

Silahkan anda login ke blogger anda
Setelah itu masuk ke Edit Html
kemudian silahkan anda cari kode </b:skin> pada template anda kemudian letakan kode berikut sebelum kode tersebut,untuk memudahkan pencarian anda silahkan anda tekan Ctrl+F secara bersamaan

.sticky {
  position:fixed;
  top:10px;/* jarak dari atas*/
  z-index: 100;
}

Setelah itu silahkan anda carilagi kode </body> dan letakan kode berikut sebelum kode </body> tersebut

<script type='text/javascript'>
$(document).ready(function() {
var stickyWidgetTop = $('#HTML7').offset().top; 
var stickyWidget = function(){
var scrollTop = $(window).scrollTop();     
if (scrollTop > stickyWidgetTop) { 
    $('#HTML1').addClass('sticky');
} else {
    $('#HTML1').removeClass('sticky'); 
}
};
stickyWidget();
$(window).scroll(function() {
    stickyWidget();
});
});
</script>

Kemudian Save template dan silahkan anda lihat hasil di blog sobat

- Untuk pada bagian Html5 silahkan anda ganti dengan kode widget anda yang ingin di jadikan sticky tersebut
Nah itulah cara membuat Sticky pada sidebar anda semoga berhasil dan semoga tutorial pembuatan sticky ini bermanfaat untuk sobat blogger.

adscblog

ads1