Cara Membuat Menu Tab Pada Blogspot

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 ke II
Selama ini mungkin kita hanya tahu bagaimana cara menambah Gadget di halaman bagian samping atau bagian bawah. Tapi bagaimana caranya kalau kita pingin menambah Gadget di bagian atas...?

Untuk mengetahuinya, silahkan ikuti langkah-langkah berikut ini :

1. Masuk ke Dasbor
2. Klik Tata Letak
3. Klik Edit HTML
4. Beri tanda centang pada kotak kecil Expand Template Widget
5. Silahkan cari kode berikut ini di dalam template anda

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

6. Jika sudah ketemu, silahkan ganti semua kode tersebut dengan kode berikut ini

<b:section class='header' id='header' preferred='yes'>

7. Klik Simpan Template
8. Selesai


Langkah ke III
1. Masuk ke Dasbor
2. Klik Tab Tata Letak
3. Klik Tab Element Halaman>tambah gatget
4. Klik pilihan menu HTML/JavaScript
5. 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