Cara Membuat Horisontal Drop Down Menu di Blogspot

Sebelumnya saya sudah menjelaskan bagaimana cara membuat kolom gadget di bawah header, kasus kali ini berhubungan dengan bahasan saya sebelumnya. Bagi yang belum mengetahui cara memasang Gadget di bawah kolom header silahkan klik disini. Bagi yang sudah yoooux kita langsung aja cara membuat horisonta drop down menu.

1.Seperti biasa login bloger sobat.

2. Cari tata letak atau layout, pilih Edit HTML.

3. Klik Download Template Lengkap (wajib untuk membackup template sobat)



4. Cari kode ]]></b:skin>,agar lebih mudah sobat bisa menekan Ctrl + F, kemudian paste kode tersebut di sebelah tulisan Find.

6. Paste copy CSS kode berikut dan paste diatas kode ]]></b:skin>

.mainmenu{
    float: left;
    width: 100%;
    padding: 0;
}
.mainmenu ul {
    float: left;
    width: 100%;
    list-style: none;
    line-height: 1;
    color:#FFFFFF;
    background: #000000;
    padding: 0;
    border: solid #B90000;
    border-width: 1px 0;
    margin: 0 0 1em 0;
}

.mainmenu a, .mainmenu a:visited {
    display: block;
font-family:Arial, Helvetica, sans-serif;font-size:0.8em;font-weight:bold;font-style:normal;text-decoration:underline;
    color: #FFFFFF;
    text-decoration: none;
    padding: 1em 1em;
}
.mainmenu ul ul a{
    width:100%;
    height:100%;
}
.mainmenu ul a{
    width:1%;
}


.mainmenu li  {
    float: left;
    margin:0;
    padding:0;
}

.mainmenu ul li {float:left; position:relative;  }
.mainmenu ul li a {white-space:nowrap;}
   
.mainmenu li ul {
    position: absolute;
    left: -999em;
    height: auto;
    width:15em;   
   
    background: #444444;
    font-weight: normal;
    border-width: 1px;
    margin: 0;
}

.mainmenu li li {
    width:15em ;
}

.mainmenu li li a{
    width:13em ;
}

.mainmenu li ul  {
    margin: 0;
}
.mainmenu li ul ul {
    margin: -2.8em 0 0 13.5em;
}
.ul_ch,
.mainmenu li:hover ul ul,
.mainmenu li li:hover ul ul,
.mainmenu li li li:hover ul ul,
.mainmenu li li li li:hover ul ul,
.mainmenu li li li li li:hover ul ul
{
    left: -999em;
}
.mainmenu li:hover ul,
.mainmenu li li:hover ul,
.mainmenu li li li:hover ul,
.mainmenu li li li li:hover ul,
.mainmenu li li li li li:hover ul
{
    left: auto;
}
.mainmenu li:hover>ul.ul_ch  
{
    left: auto;
}

.mainmenu li:hover{
    background: #A0A0A4;
}

.mainmenu li:hover a,.mainmenu li:hover a:visited,.mainmenu li:hover a:hover,.mainmenu li a:hover{
    color:#800000;
}
.mainmenu li:hover li a, .mainmenu li li:hover li a,
.mainmenu li li li:hover li a, .mainmenu li li li li:hover li a,
.mainmenu li:hover li a:visited, .mainmenu li li:hover li a:visited,
.mainmenu li li li:hover li a:visited, .mainmenu li li li li:hover li a:visited
{
    color:#FFFFFF;
}
.mainmenu li li:hover, .mainmenu li li li:hover,
.mainmenu li li li li:hover , .mainmenu li li li li li:hover , .mainmenu li li li li li li:hover
{
    background: #A0A0A4;
    z-index:9999;
}
.mainmenu li li:hover a,.mainmenu li li li:hover a,
.mainmenu li li li li:hover a, .mainmenu li li li li li:hover a
{
    color: #800000;
}

.mainmenu ul ul a, .mainmenu ul ul a:visited,
.mainmenu li li a, .mainmenu li li a:visited
{
    color: #FFFFFF;
}
.mainmenu ul ul a:hover,
.mainmenu li:hover li:hover a,.mainmenu li:hover li:hover a:visited ,
.mainmenu li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover a:visited,
.mainmenu li:hover li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover li:hover a:visited ,
.mainmenu li:hover li:hover li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover li:hover li:hover a:visited,
.mainmenu li:hover li:hover li:hover li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover li:hover li:hover li:hover a:visited{
    color: #800000;
}
.mainmenu li:hover li:hover li a,.mainmenu li:hover li:hover li a:visited ,
.mainmenu li:hover li:hover li:hover li a,.mainmenu li:hover li:hover li:hover li a:visited,
.mainmenu li:hover li:hover li:hover li:hover li a,.mainmenu li:hover li:hover li:hover li:hover li a:visited,
.mainmenu li:hover li:hover li:hover li:hover li:hover li a,.mainmenu li:hover li:hover li:hover li:hover li:hover li a:visited{
    color: #FFFFFF;
}

catatan :

• warna orange adalah warna untuk teks pada main menu.
• warna merah adalah warna kode warna background menu sobat, sobat bisa mengganti kode tersebut dengan warna yang sobat sukai, jika sobat belum mengerti tentang kode warna silahkan klik disini
• jika sobat ingin mengubahnya menjadi image seperti punya saya copy kode ini :  url(http://i848.photobucket.com/albums/ab48/chuckysharpeye/bg-1.gif) repeat-x#000000; kemudian ganti kode yang berwarna merah. misalkan sobat ingin menggantinya dengan milik sobat sendiri tinggal ganti URLnya.
• warna biru adalah adalah kode warna ketika mouse sobat berada tepat di atas / hover link sobat.

7. Klik simpan template.

8 Kembali ke Elemen Laman

9. Pilih Tambah Gadget yang berada tepat di bawah header sobat, sekali lagi jika sobat belum mengerti cara menambah gadget di bawah header sobat bisa klik disini

10.  Pilih HTML/JavaScript

11. Copy kemudia paste kode XHTML berikut :

<div class="mainmenu">


<ul>
      <li class="li_nc"><a href="ganti url blog sobat" target="_self" >HOME</a></li>
      <li class="li_hc"><a href="alamat link menu sobat" target="_self" >TUTORIAL</a><ul class="ul_ch">
         <li class="li_nc"><a href="alamat link menu sobat" target="_self" >Nama Link</a></li>
         <li class="li_nc"><a href="alamat link menu sobat" target="_self" >Nama Link</a></li>
      </ul></li>
      <li class="li_hc"><a href="alamat link menu sobat" target="_self" >INFO</a><ul class="ul_ch">
         <li class="li_nc"><a href="alamat link menu sobat" target="_self" >Nama Link</a></li>
      </ul></li>
      <li class="li_nc"><a href="alamat link menu sobat" target="_self" >CONTACT</a></li>
</ul>




</div>

Catatan :

• Tulisan yang berwarna biru itu diganti dengan url milik sobat misalnya pada main menu home :"http://www.chuckysharpeye.co.cc"dan pada main menu tutorial "http://www.chuckysharpeye.co.cc/search/label/Tutorial%20Blog "
• Tulisan yang berwarna merah gantikan dengan nama / judul link sobat, misalnya Tutorial bisa di ganti menjadi About Me
• Untuk menambahkan main menu sobat tinggan menambahkan kode yang seperti ini "<li class="li_hc"><a href="alamat link menu sobat" target="_self" >INFO</a><ul class="ul_ch">"
• Untuk menambahkan sub menu sobat copy kode yang seperti ini "<li class="li_nc"><a href="alamat link menu sobat" target="_self" >Nama Link</a></li>" dan paste tepat di bawah main menu yang sobat inginkan.

12. Pilih simpan, kemudian lihat blog sobat.

Sobat bisa juga melakukan eksperimen sendiri, seperti saya yang tidak tahu apa-apa ini, pada mulanya mumet banget rasanya ngelihat kode-kode banyak seperti itu, namun setelah saya melakukan eksperimen sendiri jadi ngerasa ketagihan, hehehehehe.
Sering kali jika sobat mengklik gadget HTML/JAVA SCRIP, maka akan muncul dalam window baru dan kolom untuk mengedit kode-kode pun ruang lingkupnya lebih sempit jadi terkadang membuat bingung, triknya adalah sobat buka Notepad kemudian pindahkan kode-kode tersebut kedalam Notepad maka akan terlihat dalam bentuk susunan sempurna.

Jika sobat menemukan kesalahan atau sobat punya kritik dan saran tolong beritahu saya melalui kolom komentar atau klik disini.

cari artikel lainnya, klik yang di bawah