Laman

  • HOME
  • LOMBA BLOG
  • ARTIKEL
  • TUTORIAL
  • JUAL SUPERGREENFOOD

Cara Memasang Menu Navigasi Horisontal

Moocen Susan | Jumat, September 13, 2013 |
Pada tutorial yang lalu, saya pernah berbagi cara membuat menu dari label disini. Sebenarnya fungsinya sama, yaitu untuk mengelompokkan postingan berdasarkan label yang Anda buat. Nah, hari ini saya akan berbagi cara memasang menu navigasi horizontal di blog seperti ini:


 tapi tanpa perlu mengedit template Anda karena kode ini dapat dipasang melalui gadget blog Anda. Berikut ini caranya:

1. Log in ke www.blogger.com
2. Klik Tata Letak

3. Klik Tambah Gadget

4. Klik HTML/ Java Script

5. Copy dan Paste (Ctrl+C→Ctrl+V)kode dibawah ini ke dalam kotak HTML
<style> #tabs11 img { border: none; } #tabs11 { float:left; width:965px;margin-left:-30px; background:#7C3200; font: bold 8.5pt Verdana; line-height:normal; border-bottom:1px solid #C2BDAE;margin-top:-29px;margin-bottom:6px } #tabs11 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs11 li { display:inline; margin:0; padding:10; } #tabs11 a { float:left; background:url(http://3.bp.blogspot.com/_7wsQzULWIwo/Szu_vcwCwaI/AAAAAAAACu8/HPBTqfggop8/s1600/tableft11.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs11 a span { float:left; display:block; background:url(http://3.bp.blogspot.com/_7wsQzULWIwo/Szu_vbDU2PI/AAAAAAAACvA/k6O6JwDg614/s1600/tabright11.png) no-repeat right top; padding:5px 15px 4px 6px; color:#9F9584; } /* Commented Backslash Hack hides rule from IE5-Mac */ #tabs11 a span {float:none;} /* End IE5-Mac hack */ #tabs11 a:hover span { color:#FFF; } #tabs11 a:hover { background-position:0% -42px; } #tabs11 a:hover span { background-position:100% -42px; } #tabs11 #current a { background-position:0% -42px; } #tabs11 #current a span { background-position:100% -42px; } </style> <div id="tabs11"> <ul> <li><a href=" URL BLOG ANDA/"><span>HOME</span></a></li> <li><a href=" # "><span>LINK1</span></a></li> <li><a href=" # "><span>LINK2</span></a></li> <li><a href=" # "><span>LINK3</span></a></li> <li><a href=" # "><span> LINK4</span></a></li> <li><a href=" # "><span>LINK5</span></a></li> <li><a href=" # " ><span> LINK6</span></a></li><li><a href=" # "><span> LINK7</span></a></li></ul> </div>
6. Perhatikan kode berikut ini :
<li><a href="#" ><span>LINK n</span></a></li>
Keterangan : 
- Ganti tulisan warna merah dengan alamat URL Blog Anda.
- Ganti kode (#) dengan link halaman blog Anda, misalnya   http://moocensusan.blogspot.com/2013/07/daftar-isi.html
- Ganti tulisan Link n dengan judul menu link Anda, misalnya Daftar Isi, Artikel, Tutorial, Cerpen, dll.
- Anda juga dapat mengubah warna background sesuai selera Anda disini.

7. Seret Gadget tadi hingga letaknya berada tepat dibawah header blog Anda → Simpan → Lihat Blog Anda

6 komentar:

  1. alhamdulillah dapat ilmu dari mamak cantik makasih yah mak

    BalasHapus
  2. mbak gimana caranya biar link halaman blog'nya itu connect langsung ke halaman yang kita inginkan ?

    BalasHapus
  3. mbak Susan kok ga bisa mengatur tinggi menu barnya, jadi mendelep tuuuh

    BalasHapus
    Balasan
    1. mbak mungkin templatenya ga cocok, ini buat template yang simple atau kalau gak pages/ lamannya dihapus dulu yang dari bawaan templatenya

      Hapus

Terima kasih sudah berkunjung. Silakan tuliskan komentar Anda di bawah ini. Komentar Anda sangat bermanfaat dan sangat saya hargai atau jika ada pertanyaan silakan tinggalkan pesan di livechat saya (sidebar kiri bawah)
Perhatian: saya akan menghapus otomatis komentar yang ada link hidupnya :D

Related Posts Plugin for WordPress, Blogger...