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://sinma68.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

Menarik untuk Dibaca:

Tutorial

• Akibat Jarang Update Blog
• Cara Membuat Email Khusus PNS
• Menampilkan Data Dengan Memasukkan PIN
• Memproteksi dan Menyembunyikan Formula Excel
• Membuat Background pada Excel
• Membuat Tombol Menu Pada Excel
• Menyembunyikan Tab Sheet pada Excel
• Memberi Warna Angka Otomatis di Excel
• Memberi Warna Otomatis pada Cell
• Membuat Widget Label dalam Scrolbar
• Membuat Breadcrumbs Terindeks Google
• Tutorial Melakukan Disput Payza
• Membuat Widget Entri Populer Cantik
• Segera Nonaktifkan Arsip Blog Anda
• Cara Ampuh Melindungi Acoount Gmail
• Menambahkan Rekening Bank ke Payza
• Transfer Saldo Egopay ke Payza
• Menambahkan Kartu Debet Payza ke Akun Paypal
• Cara Membuat Akun Egopay
• Cara Aktivasi Kartu Debit Payza

Gadget

• Cara Memasang Buku Tamu Keren di Blogspot
• Memasang Gadget Hari dan Tanggal pada Blog
• Trik Mudah Memasang Artikel Terpopuler Bawaan Blogger
• Cara Keren Membuat Ucapan Selamat Datang
• Penterjemah Keren Google Translate
• Membuat Daftar Isi Dalam Kotak Scrol Bar
• Cara Memasang Google Translate
• Membuat Ucapan Terima Kasih
• Memasang Statistik Pengunjung Blog
• Memasang Live Traffic Feed di Blogspot
• Cara Pasang Kalender di Blogspot