Selo Aji

Tips Unik dan Menarik

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!

Baca juga:

Tags:

12 komentar

avatar

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

Balas delete
avatar

iya sama-sama gan, silakan langsung dicoba aja :)

Balas delete
avatar

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

Balas delete
avatar

Makasih dan silakan langsung dicoba aja gan. :)

Balas delete
avatar

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

Balas delete
avatar

iya gan silakan dicoba tutorialnya :)
silakan bang (y)

Balas delete
avatar

Nice gan , boleh juga dicoba :D

Balas delete
avatar

iya silakan dicoba aja gan :)

Balas delete
avatar

mantab sob, makasih banyak tutorialnya..

http://landongobatherbal.com/

Balas delete
avatar

iya sama-sama gan :D

Balas delete
avatar

nyari id nya di mana gan?

Balas delete
avatar

Terimakasih infonya gan....salam kenal...



ONLINE MUSIC ARRANGER

www.musicarranger.id

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

Balas delete