Cara Membuat Widget Melayang di Blog

Sticky Widget adalah widget pada posisi tertentu yang akan selalu mengikuti tampilan monitor walaupun tampilan halaman terus digulung namun akan berhenti pada posisi awal yang telah ditentukan. Untuk lebih jelasnya, perhatikan gambar yang ada diatas. Baiklah bagi Anda yang ingin memakai widget sticky ini maka  ikutilah langkah-langkah sebagai berikut:

Screen Shot

Versi Kesatu:
1. Login ke blogger
2. Klik Template > Edit HTML
3. Cari kode </head> (agar lebih cepat tekan Ctrl+F)
4. Copy dan Pastekan kode/script dibawah ini diatas/sebelum </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=144;$(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>

5. Simpan dan Keterangan:
- Kode yang berwarna merah (JQuery), bila kode tersebut sudah ada di template blog Anda maka kode warna merah tersebut tidak perlu digunakan.
- Kode yang berwarna biru adalah kode css atau ID untuk sidebar, namun kode css atau ID sidebar tiap template berbeda-beda silahkan sesuaikan dengan kode css atau ID sidebar blog Anda.
- Keutungan jika memakai Sticky versi kesatu, widget yang akan melayangnya bisa 2, 3, 4  sesuai dengan keinginan anda.

Screen Shot

Versi Kedua:
1. Login ke Blogger
2. Klik Template > Edit HTML
3. Tambahkan kode CSS di bawah ini di atas ]]></b:skin>

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

4. Jangan dulu disimpan, Simpan kode ini di atas </body>

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

Keterangan:
- Ganti #HTML7 dengan ID widget yang akan dibuat sticky.
- Keuntungan mengunakan sticky versi kedua ini yaitu bukan hanya widget yang bisa melayang, melainkan menu barnya juga bisa melayang. hanya dengan mengatur ID widgetnya saja.

Apabila kurang jelas maka silakan Anda berkomentar dibawah postingan ini!

Tags: #Blogger