Membuat Menu di Blogger dengan List-O-Matic

Nah, ini dia yang akhirnya aku temukan, yaitu cara membuat menu yang sederhana pada blogger. Sebelumnya aku pun sudah menemukan caranya, namun cara tersebut cukup agak sulit untuk aku yang masih buta dengan script css. Dan kali ini aku mendapatkan cara yang lebih mudah ;). Berdasarkan hasil searching-searching di Mbah Google, menu-menu itu disebut dengan List-O-Matic.
Jika kalian bingung menu-menu tersebut akan berbentuk seperti apa, maka lihat saja ke bagian atas blogku ini, pasti ada menu-menu berwarna pink, nah seperti itu lah bentuknya ;). Ok, Anda berminat???

1. Sebelumnya kita harus menentukan nama untuk menu-menu yang akan kita buat, misalnya dua menu yaitu Home dan About
2. Kemudian pada Layout--Page Element pilih Add Gadget--Html/Java Script, masukkan script berikut, jika tidak ingin lelah menulis manual silahkan dicopy-paste :D

<div id="navcontainer">
<ul id="navlist">
<li><a href="http://nama.blogspot.com/home.html">Home</a></li>
<li><a href="http://nama.blogspot.com/about.html">About</a></li>
</ul>

3. Letakkan ditempat yang diinginkan lalu klik Save. Tulisan yang berwarna pink dapat Anda ganti dengan link tujuan Anda
4. Kemudian pada bagian Edit Html cari kode ]]></b:skin> dan letakkan script berikut sebelum kode tersebut

#navlist ul
{
margin-left: 0;
padding-left: 0;
white-space: nowrap;
}
#navlist li
{
display: inline;
list-style-type: none;
}
#navlist a { padding: 3px 10px; }
#navlist a:link, #navlist a:visited
{
color: #fff;
background-color: #036;
text-decoration: none;
}
#navlist a:hover
{
color: #fff;
background-color: #369;
text-decoration: none;
}

5. Kemudian klik Save. Tulisan yang berwarn pink adalah kode warna dasar menu, Anda dapat menggantinya dengan warna yang Anda inginkan, tentu saja dengan menuliskan kode warnanya ;). Silahkan mencoba :).


1 comment:

  1. carane buat menu categories bisa di link juga gak? scriptnya bagaimana

    ReplyDelete

Silahkan sampaikan tanggapan, opini, saran ataupun kritik Anda sebelum meninggalkan blog ini...

Know us

Our Team

Contact us

Name

Email *

Message *