Cara Membuat Tab Menu Navigator Horizontal

Setiap kali anda blogwalking ke beberapa site, pasti anda akan melihat sebagian dari site tersebut mempunyai tab menu navigator horizontal pada headernya. Tab menu tersebut tentunya sangat berfungsi sekali, karena anda bisa menyimpan URL penting di sana, dan para visitor andapun bisa langsung masuk ke halaman tersebut hanya dengan satu kali klik saja. Pada umumnya tab menu tersebut selalu diletakkan pada header dan posisinya disetting merapat ke sisi kiri.

Pada template-template baru yang anda temukan saat ini tab menu tersebut sudah tersedia, sehingga andapun tidak direpotkan lagi untuk membuatnya, tapi bagi anda yang tetap ingin mempertahankan template anda saat ini tapi masih belum mempunyai tab menu tersebut, saya akan mencoba menjelaskan cara membuatnya agar blog anda juga terlihat menarik tentunya.

Untuk contohnya anda bisa lihat contohnya pada blog saya ini, saya letakkan di header dan saya susun rapat ke posisi kiri, karena memang posisi inilah pada umunya tab menu tersebut diletakkan.



Bagi anda yang pada saat ini belum mempunyai tab tersebut, ataupun yang sudah mempunyai, tetapi tertarik untuk menggunakan seperti yang saya miliki ini, silahkan anda ikuti langkah-langkah berikut :

Langkah I :

1. Masuk ke Dasbor
2. Klik Tab Tata Letak
3. Klik Tab Edit HTML
4. Silahkan cari di dalam template anda kode ]]></b:skin>
5. Persis sebelum kode tersebut pastekan script di bawah ini

.menuhorisontal{width:100%; overflow:hidden; border-bottom:0px solid #000000;}
.menuhorisontal ul{margin:0; padding:0; padding-left:0px; font:13px Arial; list-style-type:none}
.menuhorisontal li{display:inline; margin:0}
.menuhorisontal li a{float:left; display:block; text-decoration:none; margin-right:2px; padding:2px 2px 2px 2px; color:#000000; background:#CCCCCC;}
.menuhorisontal li a:hover{color:#FFFFFF; background:#2E2EFE}

6. Klik Simpan Template

Langkah II :

1. Masuk ke Dasbor
2. Klik Tab Tata Letak
3. Klik Tab Element Halaman
4. Klik Tambah Gadget yang berada di posisi header ( atas )
Jika pada saat ini template anda belum disetting untuk bisa menambah gadget pada header, silahkan anda surfing terlebih dahulu [ di sini ]
5. Klik pilihan menu HTML/JavaScript
6. Pastekan script berikut ini ke dalam kolom konten tersebut

<div style="overflow:no; width:100%px; height:100%px; padding:0px; border:0px solid #FFFFFF; background:#FFFFFF;">

<div class="menuhorisontal">
<li>

<a href="http://pinginbelajar.blogspot.com">HOME</a>

<a href="http://www.blogcatalog.com/blogs/pingin-belajar.html" target="_blank">Blog Catalog</a>

<a href="http://technorati.com/blogs/pinginbelajar.blogspot.com" target="_blank">Technorati</a>

<a href="http://feeds2.feedburner.com/PinginBelajar" target="_blank">Feed Burner</a>

<a href="http://pinginbelajar.blogspot.com/2008/12/automatic-exchange-link-columns.html" target="_blank">Exchange Link</a>

<a href="http://pinginbelajar.blogspot.com/2008/12/comment-box.html" target="_blank">Comment Box</a>

<a href="http://pinginbelajar.blogspot.com/2009/05/promosikan-blog-anda-sekarang-juga.html" target="_blank">Buruan Daftar</a>

</li>
</div>
</div>

7. Untuk script yang berwarna merah di atas menandakan warna latarnya, silahkan ganti dengan warna pilihan anda agar sesuai dengan warna site anda. Untuk mendapatkan variasi kode warna, silahkan terlebih dahulu surfing di sini [ html-color-codes ]
8. Silahkan ganti script URL yang berwarna coklat dengan URL milik anda
9. Silahkan ganti script yang berwarna hijau dengan kata pilihan anda
10. Klik Simpan
11. Selesai

Selamat mencoba, semoga bermanfaat

Posted in: Tips Mempercantik Blog