• digg
  • google-plus
  • facebook
  • twitter
  • feed
  • delicious

Cara Buat Sidebar Floating Atau Melayang

Written By Rusman Edi on Tuesday, January 14, 2014 | 8:05 PM
Cara pasang sedebar floating atau sidebar melayang,Baik itu sidebar kiri ataupun kanan bahkan wedget lainya yang ingin di pasang dengan tampilan melayang di hompage blog,Caranya sangat mudaah dan gampang untuk di pahami oleh blogging fomula,Saya sendiri sempai pakai di salah satu blog saya dengan sidebar floating dan ternyata tampilanya oke juga,Bagus.
Dan jika sobat juga ingin menerapkan sidebar floating ini,Ikuti instruksinya di bawah ini,Untuk memasang sidebar floating sebaiknya anda harus tau terlebih dahulu ID sidebar left atau right misalnya lebih kurang seperti begini ( #sidebar-wrapper ),( #sidebar-left-wrapper ) dan lain lain,Sesuai ID sidebar yang ada di blog sobat sendiri.
Akan tetapi sebelum anda memasang code floating sidebar ini terlebih dahulu anda harus memaksimalkan tampilan sidebar right atau left,Baca tutorialnya di "Sidebar Accordion Menu Atau Dropdown Sidebar",Baru sobat bisa menerapkan tahap sidebar floating ini.

Pertama tama sobat harus login terlebih dahulu ke akun blogger kalian :

"Login ke akun blogger" > "Buka dhosbord Edit HTML" > "Cari code </head>" Dan letakan code javascrift di bawah ini tepat di atas code "</head>"
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(function(){var offset=$(&quot;#sidebar-wrapper&quot;).offset();var topPadding=10;$(window).scroll(function(){if($(window).scrollTop()&gt;offset.top){$(&quot;#sidebar-wrapper&quot;).stop().animate({marginTop:$(window).scrollTop()-offset.top+topPadding})}else{$(&quot;#sidebar-wrapper&quot;).stop().animate({marginTop:0})}})});
</script>
Silahkan ganti code "#sidebar-wrapper" sesuai dengan ID SIDEBAR blog anda agar sidebar floating bisa berjalan sesuai dengan tampilan blog anda yang sudah ada,Silahkan tinjau kembali sebelum anda menyimpan Template anda,Dan jika di rasa sudah benar semua penerapanya termasuk menganti Id #sidebar-wrapper maka "Save Template"
Advertisement
*Pilih Tab Komentar Yang Di Inginkan->
Comments
0 Comments

Post a Comment

Berikan Komentar Sesuai Dengan Kebijakan Dan Privasi Kami.!