Cara Mudah Membuat Menu Tab Horizontal Cantik di Blogger

Tidak semua template blog dilengkapi dengan menu bawaan, baik yang horizontal maupun vertikal. Padahal menu pada blog ataupun website mempunyai manfaat yang besar bagi pengunjung. Menu ibaratnya shortcut atau tombol yang berisi link untuk jalan pintas bagi pengunjung mencari informasi-informasi tertentu yang diperlukan. Menu horizontal biasanya diletakkan di bawah atau di atas header tepatnya di bagian atas blog, sedangkan menu vertikal biasanya diletakkan di sidebar kiri. Di luar sana banyak sekali kita jumpai berbagai model menu. Tetapi kali ini saya hanya akan mencontohkan satu cara membuat menu yang sederhana seperti pada blog ini, sehingga sobat pemula mudah untuk menerapkannya.

Inilah contoh menu horizontalny;

Jika berminat Anda bisa memasang di blog Anda. Langkah-langkahnya cukup mudah, begini;
1. Login ke Account Blogger sobat.
2. Pilih menu Tata Letak  >> Edit HTML >> Lanjutkan dan beri tanda centang  
    Expand Template Widget.
3. Cari kode ]]></b:skin> dengan Ctrl F atau F3.
4. Letakkan kode dibawah ini diatas /sebelum  ]]></b:skin>

.menu-solid{
margin: 0;

padding: 0;

float: left;

font: bold 12px Arial;

width: 100%;

border: 1px solid #625e00;

border-width: 1px 0;

background: #ebf225 ;

-moz-border-radius-topleft:7px;

-moz-border-radius-topright:7px;

-moz-border-radius-bottomleft:7px;

-moz-border-radius-bottomright:7px;

}

.menu-solid {

display: inline;

}

.menu-solid a{

float: left;

color: #000;

padding: 9px 11px;

text-decoration: none;

}

.menu-solid a:visited{

color: #cc0000;

}

.menu-solid a:hover, .menu-solid .current{

color: #ffffff;

background: #800000;

text-decoration:none;

-moz-border-radius-topleft:10px;

-moz-border-radius-topright:10px;

-moz-border-radius-bottomleft:10px;

-moz-border-radius-bottomright:10px;

}

Yang berwarna merah adalah kode warna. Anda bisa mengganti sesuai keinginan anda.

5. Simpan / Save
6. Selanjutnya Copy kode dibawah ini dan simpan di Rancangan >> Tambah Gadget >>  
    HTML/JavaScript (kolom judul kosongkan saja).
 

<div class='menu-solid'>
<a href='Link'>Home</a>
<a href='Link'>Tab 2</a>
<a href='Link'target="_blank">Tab 3</a>
<a href='Link'target="_blank">Tab 4</a>
<a href='Link'target="_blank">Tab 5</a> 
</div>

7. Sebelum disimpan, ganti dulu tulisan yang berwarna merah sesuai kebutuhan. 
8. target="_blank" maksudnya jika link/tab ini diklik maka akan terbuka di Tab Baru / New Tab
    kalau tidak mau seperti itu, dihapus saja. 
9. Simpan, lihat hasilnya

Selamat mencoba, semoga berhasil