Batam Souvenir: TIPS MEMBUAT MENU HORIZONTAL SEDERHANA

Menu Horizontal pada blog selain memperindah penampilan blog juga akan mempermudah teman-teman blogger membuka dan atau mengakses semua artikel yang ada pada blok kita. Kali ini saya akan membantu menjawab pertanyaan dari saudara saya yang disampaikannya beberapa waktu yang lalu pada artikel " Perancang Template Baru Pada Blog " saudara " Septian " namun untuk tahap awal saya akan mengajak teman-teman untuk membuat menu horizontal yang sederhana, kenapa ? untuk teman-teman pemula seperti saya tentu masih awam dengan yang namanya " HTML" atau " CSS " dengan harapan setelah mencoba, memperhatikan, dan mempelajari step by step mudah-mudahan akan sampai pada penggunaan html dan atau css seperti teman-teman lain yang sudah Master, maka dari itu khusus untuk saudaraku Septian tentu untuk teman-teman pengunjung lain yang telah sudi mampir walau mungkin hanya sekedar lewat, saya bagikan pengetahuan saya yang sdikit ini kepada teman-teman tentang bagaimana caranya membuat menu horizontal tanpa harus mengubah html atau css. Agar semakin mudah menentukan pilihan saya suguhkan dua model yang berbeda untuk teman-teman tampilkan pada blog teman-taman.

Caranya pun amat sangat mudah, login ke blog teman-teman jangan lupa untuk selalu menggunakan " http://draft.blogger.com/ " agar tidak mempengaruhi blog yang telah teman-teman simpan sebelumnya. Rancangan, klik" tata letak " kemudian klik " Add Gadget/tambah laman " lalu pilih HTML/Java Script.

Copy Paste code dibawah :

ul.menu
{
margin:0px;
padding:0px;
}

ul.menu li
{
   list-style:none;
   float:left;
   width:100px;
   text-align:center;
   font:11px/25px verdana,arial,sans-serif;
   height:auto !important;
   height:25px;
}

ul.menu li a
{
   display:block;
   text-decoration:none;
   background:#EFEFEF;
   color:#000000;
}

ul.menu li a:hover
{
background:#000000;
color:#FFFFFF;
}

</style>

<ul class="menu">
<li><a href="http://earning-news.blogspot.com/"target="_blank">HOME</a></li>
<li><a href=”http://earning-news.blogspot.com/search?max-results=200”/"target="_blank>DAFTAR ISI</a></li>
<li><a href="http://earning-news.blogspot.com/search/label/BLOG%20TUTORIAL"target="_blank">TUTORIAL BLOG</a></li>
<li><a href="http://earning-news.blogspot.com/search/label/LABUHAN%20BATU"target="_blank">LAB.BATU</a></li>
</ul>

Kemudian ganti alamat link dengan link teman-teman sendiri, ganti juga huruf kapital seperti pada kata " HOME ", " DAFTAR ISI " dan atau yang lain sesuai dengan apa yang akan teman-teman tampilkan pada menu horizontal teman-teman. Selesai ? klik Pratinjau untuk melihat hasil, jika dirasa kurang cocok lakukan beberapa perubahan, atau gunakan alternatif seperti di bawah ini :

<a href="http://t4belajarblogger.blogspot.com/" title="Home"><span style="background-color:#CCCCCC;">HOME</span></a> | <a href="http://t4belajarblogger.blogspot.com/2009/11/bagaimana-kalau-seorang-seniman-lagi.html" title="Daftar Isi"><span style="background-color:#CCCCCC;">DAFTAR ISI</span></a> | <a href="http://t4belajarblogger.blogspot.com/2009/12/sekilas-info.html" title="Sekilas Info"><span style="background-color:#CCCCCC;">SEKILAS INFO</span></a> | <a href="http://t4belajarblogger.blogspot.com/2009/11/free-link-exchange.html" title="Link Exchange"><span style="background-color:#FF9933;">TUKAR LINK YO!</span></a>

Caranya sama persis dengan yang diatas, bila warna background kurang cocok dapat dilakukan dengan mengubah code " #CCCCCC; " seperti diatas dengan warna lain sesuai dengan keinginan. ( Kode Warna akan di bahas lain waktu. Maaf ). Jika telah selesai, langkah terakhir adalah klik " Save ".

Demikian untuk kali ini semoga bermanfaat.