07 March 2014

Cara Membuat Sticky Widget di Sidebar Blog

Sticky Widget

Cara Membuat Sticky Widget di Sidebar Blog - Sekarang jadi jarang update nih gara-gara saya main games terus :D game osu! yang bikin saya jadi jarang ngurusin blog, ok sekarang saya akan membagikan tutorial cara membuat Sticky Widget di Sidebar blog, fungsinya ketika layar di scroll kebawah, widget tersebut akan menempel atau melayang di atas, meskipun di scroll kebawah ok langsung aja ikuti tutorial berikut ini.

[ Demonya bisa sobat lihat di widget Statistik di blog saya... ]

Ikuti tutorial dibawah ini dengan baik :
1. Masuk ke Blogger
2. Dashboard > Klik Template > Edit HTML
3. Tambahkan kode dibawah ini diatas </head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
 4. Tambahkan kode CSS di bawah ini di atas ]]></b:skin>

.sticky {

position:fixed;

top:5px;/* jarak dari atas*/

z-index: 100;

}
5. Letakan kode Javascript dibawah ini di atas </body>
<script type='text/javascript'>

$(document).ready(function() {

var stickyWidgetTop = $('#HTML1').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>
 6. Simpan Template


Tips :
Ganti #HTML1 dengan ID widget yang akan dibuat sticky. ID #HTML1 itu bukan hanya berupa ID, Class pun juga bisa.


Source : http://blogkrizeer.blogspot.com/2013/11/cara-membuat-widget-sticky-di-sidebar.html

Jangan Lupa Share Tutorial ini yaa... 



Rhinokage Rio
Rhinokage Rio

Adalah seorang blogger yang suka mempelajari hal-hal yang baru seputar blog, template, SEO dan Bisnis Online. Untuk mempelajari Hal baru, membutuhkan kesabaran dan ketelitian dalam mempelajarinya.

Add Your Comments

  • Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline silahkan gunakan <u></u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
  • Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.
Konversi Code
Out Of Topic