Cara Membuat Sticky Widget Keren di Blog

| Minggu, 02 Juni 2013



Cara Membuat Sticky Widget Keren di Blog


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

JavaScript

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>
Dalam pengaplikasian

Cara Membuat Sticky Widget Keren di Blog

0 komentar:

Posting Komentar

Next Prev
▲Top▲
Selamat Datang Di Blog Aku Yang Sederhana Tapi Bermanfaat......ferdiansyah My Facebook