PENDIDIKAN UNTUK NEGERI KITA: Membuat Menu Navbar Keren Di Blogger

Neh gan, ane punya menunavbar yg keren nih, mudah2 an bermanfaat. Ane membuatnya/men-cracknya dri CSS3, dua hari ane otak atik, alhamdulillah ktemu, kalo minat ya tinggl kopi aza gan en jngn lupa bintangnya ya gan..wikikiki, gini cara en kodenya :

1. taruh kode dibawah ini sebelum : <b:skin>

<link rel='StyleSheet' href='http://sites.google.com/site/gurukusakti/model/navmenu.css' type='text/css'/>

ATAU download dlu kode style css nya di "http" style di atas
kemudian copy code didalmnya dn paste sebelum ]]></b:skin>

2. Perhatikan dlu ilustrasi menu <ul> dan <li> berikut ini :

Setiap <li> harus ditutup dg </li>, dan setiap <ul> harus ditutup dgn </ul>
kya gini contoh ilustrasinya :

<ul>---bukapaling awal

<li>buka---MENU UTAMA1
<ul>buka---
<li>buka-----
----tambahin subnya menu disini----
---tutup</li>
---tutup</ul>
---tutup</li>

<li>MENU UTAMA2
<ul>
<li>
-----tambahin subnya menu disini----
</li>
</ul>
</li>

<li>MENU UTAMA3
<ul>
<li>
-----tambahin subnya menu disini----
</li>
</ul>
</li>

---tutup paling akhir</ul>

KOPIKAN kode dibawah ini ke setelah <body>, atau gantikan kode HTML sampean yg ada di dalam pertanyaan sampean tdi dengan kode di bawah ini :

<ul class='topmenu' id='css3menu1' style='border-width:1px 1px 0 1px;border-style:solid;border-color:#fffff;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;'>
<li class='topmenu'><a href='' title='HOME'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQd0dhJ0f3fVskpyrunhq-rTOENJ8CwAvx__7LhwLAZUBO8I5DaOeuVPHQ5EeK9uumCK2gwDUSagM3XkItnj3o_q9lfiJk9fA9sZ2GKPzQBQXJwJ5w127OfA4oC4fFvgiNZQmRiUi6CD8/s1600-r/blue_circle+-+home2.png'/>HOME</a></li>
<li class='toproot'><a href='#' title='Lihat Semua Posting di TIPS DAN TRIK '><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4kXIG-WII7T02IIqxe8CsktL9_bDINRDfv1eXdxx_yjYwK2KY5jig9E1SXIQTTLF8Une0Mu_Qc6BPSOk0lDOslUJnlv3D9UiBQyrixQ4ll2p3_dvkU43KCcpTh0NeCtjCr_QMeTto-gk/s1600-r/blue_circle+-+info.png'/>TIPS DAN TRIK</a>
<ul>
<li> <a href='#' title='Trik Blogging '><span>Trik Blogging</span></a>
<ul>
<li><a href='link-sampean'>Trik Blogging 2.1.1</a></li>
<li><a href='link-sampean'>Trik Blogging 2.1.2</a></li>
<li><a href='link-sampean'>Trik Blogging 2.1.3</a></li>
</ul>
</li>

<li> <a href='#' title='Trik Komputer '><span>Trik Komputer</span></a>
<ul>
<li><a href='link-sampean'>Trik Komputer 2.1.1</a></li>
<li><a href='link-sampean'>Trik Komputer 2.1.2</a></li>
<li><a href='link-sampean'>Trik Komputer 2.1.3</a></li>
</ul>
</li>
</ul></li>
<li class='toproot'><a href='#' title='Lihat Semua Posting di Label Download '><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4kXIG-WII7T02IIqxe8CsktL9_bDINRDfv1eXdxx_yjYwK2KY5jig9E1SXIQTTLF8Une0Mu_Qc6BPSOk0lDOslUJnlv3D9UiBQyrixQ4ll2p3_dvkU43KCcpTh0NeCtjCr_QMeTto-gk/s1600-r/blue_circle+-+info.png'/>Download</a>
<ul>
<li><a href='link-sampean'>Download Script</a></li>
<li><a href='link-sampean'>Download Gratis</a></li>
<li><a href='link-sampean'>Download Gratis lagi</a></li>
</ul></li>

<li class='topmenu'><a href='#' title='Lihat Semua Posting di Label Software '><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1pBZC5ibix7NQpem1Dts1cBxcfHw4Re70LFQs_GI6mwHvAAi9xbwH45oJlXlQgUE8rlusVw-xAxPxuhnT3vjJ-dgZ1IzihOOyRyJEsZfQbECZurYRgNT_hN9vVMK-w8cp8mMyarPah24/s187/blue_circle+-+star.png'/>SOFTWARE</a></li>

<li class='topmenu'><a href='#' title='Lihat Semua Posting di Label Internet '><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtuJuoAFTeyD6ntWunZeDfJlGt06CE-Tfu8x8-UwHlxwiW6KAzv-C-PtawVWPgCemt8g5LoSru9HrdGiXa4PaCT00KFdV4cV-VCI7gJZZHwxDPYzv7SC1XcE4oHNAitlg2f-mD35I1WQc/s1600-r/blue_circle+-+ok.png'/>INTERNET</a></li>

<li class='topmenu'><a href='#' title='Lihat Semua Posting di Label About Me'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3Wdfcy7-SbBtKMGtwczzv7LtG07kXb7eVez7qeQPIrnxp0svRL6cculmBdO9dtq1j7dJFxO6HMng0VOS79OQGSh7Gl1tUMqVhMytu8EKApf3Dd45lga0bf-2XQIq_5_QuTpUsGtHW1NU/s187/tech.png'/>ABOUT ME</a></li>

<li class='topmenu'><a href='#' title='Lihat Semua Posting di MODELS OF LEARNING '><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4kXIG-WII7T02IIqxe8CsktL9_bDINRDfv1eXdxx_yjYwK2KY5jig9E1SXIQTTLF8Une0Mu_Qc6BPSOk0lDOslUJnlv3D9UiBQyrixQ4ll2p3_dvkU43KCcpTh0NeCtjCr_QMeTto-gk/s1600-r/blue_circle+-+info.png'/>CONTACT</a></li>

</ul>

3. Cara mensettingnya :
a. Merubah gambar menu dgn cara ganti link yg ada didlm image ( <img src="http://2.bp.blogspot.com/.................

b. Setiap "class="topmenu" digunkan untk menu utama yg tidak ada dropdwonnya ( kalo disorot mouse tidak muncul sub menu). Dan Setiap "class="toproot" dignkan untuk menu utama yg ada drop down SUB MENUnya ( kalo disorot mouse muncul drop down sub menunya)

c. Untuk lebarnya disesuaikan dengan blog sampean, caranya: tulisan HOME, DOWNLOAD diatur sendiri, contohnya misal kalo kepanjangan nav nya , tulisan huruf "HOME" bisa dijadikan kecil aza "home". Bgitu jg kalo navihasinya kependekan, brrti ada huruf yg di panjangkan misalnya "HOME" menjdi "MY HOME"
dsttt...

d. Untk menambahkan menu utama nya silahkan copy aza dari <li> ke penutup </li>

e. cara menghapus sub menu jg sama, hapus mulai dari <li> sampai ke </li> penutupnya. ato dri <ul> smpai ke </ul> penutupnya.

4. Terserah sampean az ya gan, di ikutin juga boleh, ga juga boleh, kalo aza bermanfaat bagi yg lain... contohnya bisa diliat disini :

Semoga bermanfaat bagi semuanya...
Ok.. Sekian TAMAT...

Lihat posting lainnya :
http://www.papantulisku.com/2011/02/belajar-membuat-blog.html
http://www.papantulisku.com/2011/02/apa-itu-domain-hosting-mengenal-domains.html
http://www.papantulisku.com/2011/01/cari-dollar-di-internet-dengan-google.html