Tutorial Cara Membuat Widget Sticky Keren di Blogger

Tutorial Cara Membuat Widget Sticky Keren di Blogger - Saya akan menjelaskan sedikit tentang Sticky Sticky widget merupakan widget yang melayang jika layar akan melewati widget tersebut dan melayang mengikuti layar. Setelah layar kembali ke atas sampai ke letak awal widget, widget tidak akan ikut melayang lagi. Biasanya widget yang sticky ini diletakkan di posisi paling bawah. Aneh, jika widget ini diletakkan di posisi paling atas dari widget-widget yang lain, karena akan bentrok jika layar ke bawah. Cara membuat sticky widget ini tidak lah sulit, anda hanya perlu ramuan javascript, CSS dan HTML. Sedikit kok tutorialnya mudah-mudahan.

Screenshoot :


Java Script

Letakkan JavaScript berikut tepat di atas </body>
<script src='http://yourjavascript.com/47203410510/hack4rt.us-sticky.js' type='text/javascript'/>
Kalau pada template anda belum terpasang JQuery, silahkan letakkan JQuery berikut tepat di atas </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
CSS

Letakkan CSS berikut tepat di atas ]]</b:skin>
#sticky{margin-top:10px; width:300px;}
Sesuaikan ukuran width dengan ukuran widget anda.

HTML

Widget yang paling atas menjadi catcher dan anda akan membuat widget elemen baru di bawahnya. Dalam Tampilan EDIT HTML Blogger Baru, akan lebih mudah untuk membuat widget sticky ini karena <b:section> dapat dirampingkan menjadi <b:section>....</b:section>

kode HTML akan seperti ini
<div id='catcher'>
Widget 1
</div>
<div id='sticky'>
ISI KODE WIDGET ATAU IKLAN
</div>
Dan Selesai . Selamat mencoba sobat Racara
jika ada permasalahan silahkan komentar di bawah ini

Berlangganan : Masukan e-mail Anda untuk mendapatkan kiriman artikel terbaru dari Ali Maghfur langsung di pesan kotak masuk.

feedburner
26 Komentar untuk "Tutorial Cara Membuat Widget Sticky Keren di Blogger"

keren gan, adsnya bisa ngikutin gitu. lebih besar peluang dikliknya.

iya ganterimakasih atas kunjungannya..

keren kykny tuh sob.nyimak dlu ya.
comment back ya.. :D

oke mas terimakasih atas kunjungannya..

barang contoh yang dah jadi ada ga gan? keren banget ne masalahnya

ada gan tinggal kamu scroll kebawah kelihatan iklan Google Adsense yg melayang itu contohnya..

menarik mas tutorialnya, untuk yang menggunakan iklan di blognya cocok banget kalo menggunakan widget sticky ini

iya mas ..
makasih atas kunjungannya..

tapi kasian gan kalo pake widget melayang2 gtu, bikin pusing pengunjung :D

gpp gan yang pnting engga jatuh aja..hehhehe :D

Biasanya sama orang" ditaruh widget populer post ini toh rahasianya :D hahha

iya mas silahkan di coba..hehehe

ane terkesan ama logo ente gan.. hehe.. mantab.. masalah artikelnya ane ikutan dah ya :D

wah...bagus d coba nih..thx tutorialnya bang


komen back yeee

Keren, tapi kurang jelas sob caranya

Wah keren nih kyknya ijin nyoba bro :v

kayaknya boleh dicoba nih tutorial...

ikuti dari atas saja nanti faham kug..

Wihh Keren Gan Toturialnyaa (Y) Ditunngu Yoo Toturial Selanjutnya :)
Oh iyaa Saya Tunggu FollBacknya :D

Ini yang saya cari ... :)

Saya coba dulu tutornya..
Terimakasih sob

Back To Top