Membuat Menu Tab 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 Dashboard
2. Klik Tab Layout
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 SaveTemplate

Langkah II :

1. Masuk ke Dashboard
2. Klik Tab Layout
3. Klik Tab Element Page
4. Klik addGadget yang berada di posisi header ( atas )
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://justblogger.blogspot.com";>HOME</a>

<a href="http://www.blogcatalog.com/blogs/justblogger.html" target="_blank";>Blog Catalog</a>

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

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

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

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

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

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

7. Silahkan ganti script URL yang di Bold dengan URL milik anda
8. Silahkan ganti script tulisan Home,dll ( setelah code target="_blank">) dengan kata pilihan anda
9. Klik Save
10. Selesai

Selamat mencoba, semoga bermanfaat


sumber : http://pinginbelajar.blogspot.com/