Cara Mudah Membuat Menu Horizontal Cantik

Para sobat blogger, selamat jumpa lagi ya, meski hanya di media maya. Saya ingin sharing tentang Cara Membuat Menu Horizontal Cantik, karena 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. Copy dulu script di bawah ini, .

.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;

}

2. Kemudian bawalah copian itu ke blog Anda, caranya masuk ke blogger dengan ID anda
3. Di halaman Dasbor klik Rancangan

4. Klik edit html  kemudian cari kode --->  ]]></b:skin>  letakkan scrip yang sudah anda kopi di nomor 1 tersebut tepat di atas kode  ]]></b:skin>  lalu klik simpan. (Anda bisa merubah kode yang berwarna kuning)
Setelah langkah ini selesai lanjutkan ke langkah no 5.

5. Selanjutnya copy kode html berikut ini ;
<div class='menu-solid'>
<a href='http://jss-triplernews.blogspot.com'target="_blank">Home</a>
<a href='http://jss-triplernews.blogspot.com/p/cara-daftar-jss-tripler.html'target="_blank">Cara Daftar</a>
<a href='http://jss-triplernews.blogspot.com/p/cara-membeli-posisi-jss-tripler.html'target="_blank">Beli Posisi</a>
<a href='http://belajarabadi.blogspot.com/2010/09/membuat-acoount-alertpay.html'target="_blank">Daftar AlertPay</a>

</div>

6. Kembali ke Rancangan dan klik tambah gadget, tempat dimana akan Anda letakkan Menu tersebut, (umumnya di bawah header) lalu klik Tambah Gadget
7. Setelah terbuka halaman konfigurasi html, cari dan temukan HTML/JavaScript dan klik


8. Kolom judul; tidak perlu diisi, terus  paste kode script /html nomor 5 di tempat yang tersedia 
9. Sebelum Anda melanjutkan, ganti dulu kode/tulisan yang berwarna merah, sesuai dengan link yang akan anda pasang. Yang berwarna biru adalah nama menu yang akan tampil, silahka diganti sesuai dengan nama menu yang anda inginkan.. Jumlah menu bisa Anda tambah /kurangi sesuai kebutuhan Anda.
8. Jika semua sudah anda kerjakan, terakhir klik tombol Simpan dan sekarang klik lihat blog.

Selesai, di blog Anda sudah bertambah satu lai gadget yang akan semakin mempermudah pengunjung blog Anda mendapatkan informasi dengan cepat.

Selamat mencoba, semoga berhasil