NokiaTheme White Black by LA - Nokia N97 and 5800 Xpress Music Theme

Posted by topijrami On January – 6th – 2011

Nokia N97 and 5800 Xpress Music Theme

NokiaTheme

Membuat Navigasi Menu


Kali ini saya akan membahas tutorial bagaimana menggabungkan navigasi menu vertikal sekaligus dengan menu horizontal. Yup, langsung aja…

Peringatan :sebelum mulai backup template blog kamu dulu atau lakukan tutorial ini di blog khusus.

Step 1:
Copy-paste kode ini ke bagian <head> template, sebaiknya diletakkan sebelum </head> .
<script src='http://stubb.fanatic.googlepages.com/chrome.js' type='text/javascript'/>
kalo ingin memodifikasi file Javascript ini, klik kanan di sini lalu save ke hard-drive kamu. Step 2:
Copy-paste satu dari CSS kode ini sebelum ]]></b:skin>CSS style 1: klik di sini untuk download kode

CSS style 2: klik di sini untuk download kode.

CSS style 3: klik di sini untuk download kode

CSS style 4: klik di sini untuk download kode

Step 3:
Masuk ke page elements. Sebaiknya widget ini diletakkan di tempat paling atas dalam blog, Header misalnya. *kalo mau ditaro di header blog, baris ini harus diubah :

<b:section class="header" id="header" maxwidgets="1" showaddelement="no">
jadi:

<b:section class="header" id="header" maxwidgets="10" showaddelement="yes">

Setelah itu klik Add page element trus klik HTML/Javascript. Tambahin kode ini:

<div id="chromemenu" class="chromestyle"><ul>
<li><a href="link1" title="judul1">Link1</a></li>
<li><a href="#" rel="dropmenu1" title="judul2">Link2</a></li>
<li><a href="#" rel="dropmenu2" title="judul3">Link3</a></li>
<li><a href="link2" title="judul4">Link4</a></li>
</ul>
</div>

<!--1st drop down menu -->
<div id="dropmenu1" style="width: 150px;" class="dropmenudiv">
<a href="Alamatlink2.1" title="subJudul2.1">Link2.1<a>
<a href="Alamatlink2.2" title="subJudul2.2">Link2.2</a>
<a href="Alamatlink2.3" title="subJudul2.3">Link2.3</a>

</div>

<!--2nd drop down menu -->
<div id="dropmenu2" style="width: 150px;" class="dropmenudiv">
<a href="Alamatlink3.1" title="subJudul3.1">Nama3.1</a>
<a href="Alamatlink3.2" title="subJudul3.2">Nama3.2</a>
<a href="Alamatlink3.3" title="subJudul3.3">Nama3.3</a>

</div>

<script type="text/javascript">

cssdropdown.startchrome("chromemenu")

</script>

Nah, yang warna merah itu bisa diulang-ulang kalo mo nambahin link.
Source : Vivek Sanghi

3 Response to 'Membuat Navigasi Menu'

  1. Anonymous Said,
    http://topijrami.blogspot.com/2007/07/kali-ini-saya-akan-membahas-tutorial.html?showComment=1220999640000#c2377641611188193826'> September 10, 2008 5:34 AM

    Wah pertamax nich....

     

  2. http://topijrami.blogspot.com/2007/07/kali-ini-saya-akan-membahas-tutorial.html?showComment=1242931361222#c693550148653491612'> May 22, 2009 1:42 AM

    Helo..lam kenal... makasih berat nih infonya... bookmark dulu ah..langsung di coba.. tapi btw.. gimana tuh pinginnya kalau diklik langsung buka halaman baru... tolong ya...

     

  3. http://topijrami.blogspot.com/2007/07/kali-ini-saya-akan-membahas-tutorial.html?showComment=1243966816939#c2308235315489666834'> June 03, 2009 1:20 AM

    makasih banyak tipsnya

     

Post a Comment

    eXTReMe Tracker