Cara Memasang Menu Generator CCS Menu DropDown (terbaru)

Satria Perwira    6/12/2011    Trixs Blogging   

Cara Memasang Menu Generator CCS Menu DropDown (terbaru)

Sebelumnya saya sudah menerangkan bagaimana cara membuat menu di CSS Menu Generator, sekarang bagaimana cara memasangnya? oke, langsung saja,

1. Jika sebelumnya sobat sudah menyimpan file sobat sekarang tinggal load ulang saja. Jika sobat belum membuatnya silahkan klik disini untuk melihat cara membuatnya.


2. Klik Get the Files kemudian klik HTML/CSS code, disana akan terlihat kode XHTML dan di sebelahnya ada CSS code, nah itu yang akan kita pasang pada blog kita. Jangan ditutup, biarkan saja terbuka seperti itu.


3. Login bloger sobat.


4. Klik tata letak atau layout.


5. Pilih Edit HTML.


6. Sebelum memulai pengeditan alahkah baiknya sobat membackup data sobat terlebih dahulu, caranya pilih Download Template Lengkap.

7. Cari kode ]]></b:skin> gar lebih mudah sobat bisa menekan Ctrl + F

8. Copy CSS code mulai dari kode ini /* pull-down mainmenu css */ sampai kode ini
/* end of mainmenu css */ kira-kira kodenya seperti itu paste di atas kode ]]></b:skin>


9. Simpan template. kemudian

8 Kembali ke Elemen Laman

9. Pilih Tambah Gadget yang berada tepat di bawah header sobat, jika sobat tidak memiliki kolom dibawah header coba lakukan langkah dibawah ini dahulu sebelum menuju ke langkah selanjutnya :

1. Masuk ke Edit HTML, terus tekan CTRL + F

2. Masukkan code berikut :

<div id='header-wrapper'>

<b:section class='header' id='header' maxwidget="1" showaddelement="no">

<b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>

</b:section>

</div>

Ganti Tulisan yang hitam&tebal seperti ini :

1 menjadi 3

no menjadi yes

true menjadi false

Kemudian simpan..

Lanjutkan langkah brikutnya :

10.  Pilih HTML/JavaScript

11. Copy XHTML Code  yang ada di CSS Menu Generator, mulai dari kode ini <!-- PULL DOWN MENU - BEGIN --> sampai dengan kode ini  <!-- END OF PULL DOWN MENU -->
kemudia paste di dalam kolom edit HTML.


12. Simpan, apakah berhasil? heheheh,

gampang bukan? kita tidak usah repot-repot baca kode-kode yang memusingkan kepala, tinggal copas saja beseres!, toh ada yang simple kenapa harus repot, hehehhe, untuk yang masih bingung dengan kode CSS dan XHTML di CSS Menu Generator berikut adalah contohnya :

XHTML code :
<!-- PULL DOWN MENU - BEGIN -->
<div class="mainmenu">
<ul>
      <li class="li_nc"><a href="ganti url blog sobat ini" target="_self" >HOME</a></li>
      <li class="li_hc"><a href="#" 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_hc"><a href="ganti dengan url milik sobat" target="_self" >Nama Link</a><ul class="ul_ch">
            <li class="li_nc"><a href="#"  >nama link 2</a></li>
         </ul></li>
      </ul></li>
      <li class="li_hc"><a href="#" target="_self" >INFO</a><ul class="ul_ch">
         <li class="li_nc"><a href="ganti dengan url milik sobat"  >Nama Link</a></li>
      </ul></li>
      <li class="li_nc"><a href="ganti dengan url milik sobat" target="_self" >CONTACT</a></li>
</ul>
</div>
<!-- END OF PULL DOWN MENU -->


CSS Code :
/* pull-down mainmenu css */
.mainmenu{
    float: left;
    width: 100%;
    padding: 0;
}
.mainmenu ul {
    float: left;
    width: 100%;
    list-style: none;
    line-height: 1;
    color:#FFFF00;
    background: #000080;
    padding: 0;
    border: solid #A0A0A4;
    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: #FFFF00;
    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: #000080;
    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: #FF0000;
}

.mainmenu li:hover a,.mainmenu li:hover a:visited,.mainmenu li:hover a:hover,.mainmenu li a:hover{
    color:#FFFF00;
}
.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:#FFFF00;
}
.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: #B90000;
    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: #FFFF00;
}

.mainmenu ul ul a, .mainmenu ul ul a:visited,
.mainmenu li li a, .mainmenu li li a:visited
{
    color: #FFFF00;
}
.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: #FFFF00;
}
.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: #FFFF00;
}
/* end of mainmenu css */

Kira-kira seperti itu, silahkan di coba....!! Jika ada pertanyaan jangan malu-malu bertanya saya juga masih belajar, dan kalau ada yang salah tolong di koreksi.

Artikel Dilindungi

by Rafi Aldiansyah Asikin