Cara Mudah membuat Sidebar Melayang atau Sticky

Cara Mudah membuat Sidebar Melayang atau Sticky

Jalak Ikal 04 November 4 komentar
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.

loading...
Ratings: 
Posted by Jalak Ikal, Published at 04 November and have 4 komentar

I manage this blog and post tutorials related to Blogger, SEO, Software Tools, Windows, CSS and Social Media. Did you find this blog helpful? Please socialize with us !!


Perlihatkan Semua Komentar Tutup Semua Komentar

4 komentar

mantap infonya...ijin nyoba dulu yah...:)

Balas

coba dulu yah. Mudah2an sukses, klo tidak sukses saya balik lagi kesini dan mohon petunjuk... :)

Balas

* Silahkan Berkomentar Tetapi Sopan
* Jangan Meninggalkan Spam atau terkait lain nya
* Jangan Promosi