Home » » Cara Membuat Widget Melayang di Blog

Cara Membuat Widget Melayang di Blog

Written By Selo Aji on Friday, December 13, 2013 | 3:27 PM


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!

12 komentar:

  1. MANTAB gan!
    ini yang ane cari-cari..
    thanks infonya ya

    ReplyDelete
    Replies
    1. iya sama-sama gan, silakan langsung dicoba aja :)

      Delete
  2. Mantaps Bro :D Tips nya sangat membantu.. Thanks Gan :) (y)

    ReplyDelete
    Replies
    1. Makasih dan silakan langsung dicoba aja gan. :)

      Delete
  3. lumayanlah buat tambah ilmu :)
    eh gan , ane boleh ADD akun FBmu g ??

    ReplyDelete
    Replies
    1. iya gan silakan dicoba tutorialnya :)
      silakan bang (y)

      Delete
  4. mantab sob, makasih banyak tutorialnya..

    http://landongobatherbal.com/

    ReplyDelete
  5. Terimakasih infonya gan....salam kenal...



    ONLINE MUSIC ARRANGER

    www.musicarranger.id

    Jasa Aransemen Musik, Pembuatan Lagu, Jingle / Spot Iklan dan Soundtrack secara ONLINE.

    ReplyDelete


SEO Reports for selo-aji.blogspot.com Free PageRank Checker