Menu scrolling unik

Gadget untuk menu ini cukup cantik di pasang di blog.  karena area ini akan selalu tampil di monitor tanpa terpengaruh oleh scrolling.
Contohnya seperti tab menu di blog saya ini

Cara pembuatannyapun tergolong cukup mudah, seperti biasa tinggal copas saja kode dibawah ini :    

<style type='text/css'> #fixme { position: absolute; left: 12px; top: 12px;text-align:left; width: 900px; } #fixmetoo { position: absolute; left: 0px; bottom: 3px;text-align:left; width:900px; } div > div#fixme { position: fixed; } div > div#fixmetoo { position: fixed; } pre.fixit { overflow:auto;border-left:1px dashed #000;border-right:1px dashed #000;padding-left:2px; } </style> <!--[if gte IE 5.5]><![if lt IE 7]> <style type="text/css"> div#fixme { left: expression( ( 0 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' ); top: expression( ( 0 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' ); } div#fixmetoo { right: auto; bottom: auto; left: expression( ( 0 - fixmetoo.offsetWidth + ( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth ) + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' ); top: expression( ( 0 - fixmetoo.offsetHeight + ( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' ); } body{ width:expression(document.documentElement.clientWidth); } #wrapper{ width:1000px; overflow:visible; } </style> <![endif]><![endif]--


Kemudian buka Blogger
--> Layout
--> Edit HTML dan pastekan kode diatas tepat di bawah kode

      </head>
--> kemudian disimpan.

Selanjutnya penentuan posisinya apakah diatas atau dibawah.halaman blog anda

Diatas, kodenya

<div id="fixme"><b>Posisi ini akan selalu berada di atas</b></div>


Dibawah, kodenya :

<div id="fixmetoo"><b>Posisi ini akan selalu berada di bawah</b></div>


Setelah Posisi sudah ditentukan, buka

--> Layout
--> Page Element dan tambahkan Add Gadget
--> HTML/Javascript dibawah header untuk posisi diatas atau footer untuk posisi dibawah.

Selanjutnya pastekan kode fixme diatas sesuai posisi,


Contoh untuk posisi di atas  ;



<div id="fixme"><b> <ul id="navlist"> <a href="http://LINK ANDA/"><img src="http://LINK GAMBAR. png "title="JUDUL LINK"/></a> <a href"http://LINK ANDA/"><img src="http://LINK GAMBAR. png "title="JUDUL LINK" /></a> <a href="http://LINK ANDA/"><img src="http://LINK GAMBAR. png "title="JUDUL LINK" /></a> <a href="http://LINK ANDA/"><img src="http://LINK GAMBAR. png"title="JUDUL LINK" /></a> <a href"http://LINK ANDA/"><img src="http://LINK GAMBAR. png "title="JUDUL LINK" /></a> <a href"http://LINK ANDA/" onmouseover="window.location=this.href"><img src="http://LINK GAMBAR. png "title="JUDUL LINK" /></a> <a href="http://LINK ANDA/"><img src="http://LINK GAMBAR. png "title="JUDUL LINK" /></a> </ul></b></div

contohnya

<div id="fixme"><b> <ul id="navlist"> <a href="http://indradeni27.blogspot.com/"><img src="http://signatures.mylivesignature.com/54488/396/5444937A414F8C9D56F448583B637CB2.png "title="DEPAN"/></a> <a href"http://indradeni27.blogspot.com/"><img src="http://signatures.mylivesignature.com/54488/396/7BB6B3E51DC97966CA8B43BF6E6F4316.png "title="ALBUM" /></a> <a href="http://indradeni27.blogspot.com/"><img src="http://signatures.mylivesignature.com/54488/396/6A65A353A0232318F2E18F303E3F3584.png "title="BACAAN" /></a> <a href="http://indradeni27.blogspot.com/"><img src="http://signatures.mylivesignature.com/54488/396/2E4747D0BDC807932DCD383206885FDB.png"title="ART" /></a> <a href"http://indradeni27.blogspot.com/"><img src="http://signatures.mylivesignature.com/54488/396/DFD5F5386B758974960 CF325C3B4F1B8.png "title="AKUN" /></a> <a href"http://achiyak.blogspot.com/" onmouseover="window.location=this.href"><img src="http://signatures.mylivesignature.com/54488/396/820060D2C4A19A5FB41F78EBD9830B47.png "title="my BLOG" /></a> <a href="http://indradeni27.blogspot.com/2010/12/blabla.html"><img src="http://signatures.mylivesignature.com/54488/396/CDC596072B4C85B8D28C5CCAA71DDBB1.png "title="GADGET" /></a> </ul></b></div>

SELAMAT MENCOBA
Mudah mudahan dapat bermanfaat
Jangan lupa tingalkan jejak anda di buku tamu

Anda sedang membaca artikel tentang Menu scrolling unik dan bila berkenan Anda bisa share artikel Menu scrolling unik ini dengan tombol share di bawah. Bila Anda bermaksud COPAS artikel Menu scrolling unik untuk diposting di blog Anda, mohon untuk meletakkan link Menu scrolling unik sebagai Sumbernya dengan mengcopy kode di bawah ini.

<small><a href='http://indradeni27.blogspot.com/2011/01/menu-scrolling-unik.html'target='_blank'><strong><i>Sumber</i></strong></a></small>

Get this widget

Voting Anda

Rating:9.5
Reviewer: Unknown
Description: Menu scrolling unik
ItemReviewed: Menu scrolling unik