Warung Bebas
kc17

Senin, 08 Oktober 2012

Membuat Menu Navigasi Vertikal Melayang

Setelah membuat tulisan Membuat Show/Hide Menu Navigasi Horizontal, sekarang saya akan memberikan tips yang hampirsama kepada sobat blogger. Menu navigasi vertikal yang biasa sobat lihat pada situs-situs atau blog mungkin ditempatkan pada sidebarnya. Sehingga sangat memakan tempat yang banyak untuk meletakkan menu tersebut. Pada tips kali ini, menu yang akan kita buata lebih tepatnya diletakkan melayang pada blog, sehingga kemungkinan tidak memakan tempat banyak pada blog sobat. Namun demikian kelemahan dari menu ini mungkin kurang terlihat nantinya oleh penginjung blog sobat, dikarenakan menu ini penempatannya melayang. Oke,tetapi
hal itu tidak apa-apa sobat blogger. Yang pentina bagaimana anada mengtur dalam penempatannya.
Untuk lebih jelasnya, kurang lebih tampilan dari menu navigasi tersebut bisa sobat blog lihat di pratinjau (Demo) blog kami.


Setelah melihat demonya, mungkin sobat blogger tertarik dengan tampilan menu tersebut. Jika ingin menampilkan menu tersebut dalam blog sobat, anda hanya butuh menambahkan kode script berikut ini:
<script src='http://elmubarok.googlecode.com/files/floating1.js' type='text/javascript'/>
<script>
YOffset=150;
XOffset=0;
staticYOffset=30;
slideSpeed=20
waitTime=100;
menuBGColor=&quot;#cc0000&quot;;
menuIsStatic=&quot;yes&quot;;
menuWidth=120;
menuCols=3;

hdrFontFamily=&quot;verdana&quot;;
hdrFontSize=&quot;2&quot;;
hdrFontColor=&quot;black&quot;;
hdrBGColor=&quot;#cc0000&quot;;
hdrAlign=&quot;left&quot;;
hdrVAlign=&quot;center&quot;;
hdrHeight=&quot;15&quot;;

linkFontFamily=&quot;Verdana&quot;;
linkFontSize=&quot;2&quot;;
linkBGColor=&quot;white&quot;;
linkOverBGColor=&quot;#cc0000&quot;;
linkTarget=&quot;_top&quot;;
linkAlign=&quot;Left&quot;;

barBGColor=&quot;#cc0000&quot;;
barFontFamily=&quot;Verdana&quot;;
barFontSize=&quot;2&quot;;
barFontColor=&quot;white&quot;;
barVAlign=&quot;center&quot;;
barWidth=20; // no quotes!!
barText=&quot;MENU&quot;;

// ----- Mulai Edit Menu

ssmItems[0]=[&quot;OPTION :&quot;] //Header Menu
ssmItems[1]=[&quot; Home&quot;, &quot;/&quot;, &quot;&quot;]
ssmItems[2]=[&quot; Daftar Isi&quot;, &quot;http://demo-situs.blogspot.com/2012/08/daftar-isi-berdasarkan-bulan.html&quot;,&quot;&quot;]
ssmItems[3]=[&quot; Link Exchange Blog&quot;, &quot;http://tips-untuk-blogger.blogspot.com/2012/01/tukaran-link.html&quot;,&quot;&quot;]
ssmItems[4]=[&quot; Banner Exchange&quot;, &quot;http://tips-untuk-blogger.blogspot.com/2012/01/tukaran-link.html&quot;,&quot;&quot;]
ssmItems[5]=[&quot; Kode Warna&quot;, &quot;http://tips-untuk-blogger.blogspot.com/2012/01/kode-html-warna.html&quot;, &quot;&quot;]
ssmItems[6]=[&quot; Parse HTML&quot;, &quot;http://demo-situs.blogspot.com/2012/08/parse-kode-html.html&quot;, &quot;&quot;]
ssmItems[7]=[&quot; Dapatkan TIPSnya&quot;, &quot;http://tips-untuk-blogger.blogspot.com/2012/10/membuat-menu-navigasi-vertikal-melayang.html&quot;, &quot;&quot;]
buildMenu();
//----- Selesai Edit Menu
</script>
Note: Silahkan edit atribut dari menu navigasi di atas. Mungkin anda sudah mengerti maksudnya. Jika belum mengerti silahkan tinggalkan komentar atau surati saya lewat email.

Sekarang untuk menampilkannya pada blog adalah anda hanya butuh mletakkan kode di atas tepat sebelum kode </head> pada kode template blog anda. Kemudian silahkan anda Simpan Template dan lihat perubahan yang terjadi pada blog anda.
Selamat mencoba, semoga berhasil dan bermanfaat. Mohon maaf jika ada kesalahan (Jkt/2012)

0 komentar em “Membuat Menu Navigasi Vertikal Melayang”

Posting Komentar

Adversite

 

YHS Rider_Community Copyright © 2012 Fast Loading -- Powered by Blogger