Kamis, 19 April 2012

Cara Membuat Menu Horizontal Part 3

Kali ini bagi para Sobat Bithoo kita akan membuat Menu Horizontal Part 3 yaitu... Menu Horizontal 3D Button blog. emmm cara buatnya gimana yah....??? yuk kita langsung aja...

Menu/navigasi horizontal Blogger/Blogspot ini juga dibuat dengan HTML dan CSS murni tanpa sentuhan javascript maupun jquery., sama seperti menu/navigasi horizontal sebelumnya. Cara membuat dan memasangnya pun sangat sederhana dan tanpa mengedit template HTML, karena aturan CSS saya buat menyatu dengan HTML nya.


Cara membuat/memasang widget horizontal menu/mavigation 3d button Blogger/Blogspot:
1.  Copy dan edit kode di bawah ini:

Kode:


<style> #navcontainer { background: #369; border-top: 1px solid #9CC; margin-top: 20px; font: normal normal 11px Verdana, Geneva, Arial, Helvetica, sans-serif; } #navlist { list-style: none outside none; margin: 0; padding: 0; } @media all { #navlist { text-align: center } } #navlist li { bottom: 11px; display: inline; line-height: 1.2em; margin: 0; padding: 0; position: relative; } html>body #navlist li { background: #000; margin: 0 3px 0 0; padding: 4px 0px 4px 0; } #navlist a, #navlist a:link, #navlist a:visited { background: #900; border: 1px solid #FFF; bottom: 2px; color: #FFF; cursor: pointer; display: inline; height: 1em; margin: 0; padding: 3px 5px 3px 5px; position: relative; right: 2px; text-decoration: none; } #navlist a:hover { background: #C00; bottom: 1px; color: #FFF; position: relative; right: 1px; } #navlist a:active { background: #999; bottom: 0px; color: #FFF; position: relative; right: 0px; } #navlist li#active { background: #369; bottom: 13px; display: inline; margin: 0 3px 0 0; padding: 0; position: relative; } html>body #navlist li#active { background: #000; margin: 0 4px 0 4px; } #navlist #active a, #navlist #active a:link, #navlist #active a:visited, #navlist #active a:hover { background: #369; border-bottom: none; border-left: 1px solid #9CC; border-right: 1px solid #9CC; border-top: 1px solid #9CC; bottom: 0; color: #FFF; cursor: text; margin: 0; padding: 2px 5px 0 5px; position: relative; right: 0; } </style>
<div id="navcontainer">
<ul id="navlist">
<li><a href="#"><span>Link 1</span></a></li>
<li><a href="#"><span>Link 2</span></a></li>
<li><a href="#"><span>Link 3</span></a></li>
<li><a href="#"><span>Link 4</span></a></li>
<li><a href="#"><span>Link 5</span></a></li>
<li><a href="#"><span>Link 6</span></a></li>
</ul>
</div>

- Ganti  # dengan url yang ingin anda pasang di menu, misalnya url homepage, daftar isi, label, dan lain-lain.
- Ganti Link 1, Link 2, Link 3, dan seterusnya dengan nama menu/anchor text sesuai dengan yang anda inginkan, misalnya Home, Daftar Isi, Tips, dan seterusnya.
- Jika ingin menambah/menghapus daftar menu, tambahkan/hapus baris:

<li><a href="#"><span>Link</span></a></li> sebelum </ul>.

2. Masuk ke dashboard > Design/Rancangan > Klik Add a Gadget
3. Setelah pop up window muncul, pilih opsi HTML/Javascript
4. Kemudian masukkan Kode yang sudah diedit tersebut ke kolom configure HTML/Javascript.
5. Klik save.
6. Drag/geser widget menu horizontal tersebut ke bawah/atas header (letakkan pada slot gadget).
7. Save lagi.
8. Done! menu/navigasi horizontal Blog Blogger anda siap digunakan.

Ditulis Oleh : Unknown ~ Bithoo Trik dan Tips

Anda sedang membaca sebuah artikel yang berjudul Cara Membuat Menu Horizontal Part 3,, Semoga artikel tersebut bermanfaat untuk anda, Dan mohon maaf karena Bithoo dalam pengembangan jadi maaf klau ada yang kurang berkenan. Dan apa bila sobat Bithoo ingin artikel ini di blog sobat Bithoo silahkan menggunakan kode dibawah ini.

:: Thank you for visiting ! ::

0 komentar:

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Posting Komentar

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Design by Bithoo | Bloggerized by Lasantha - Premium Blogger Themes | Bluehost