Cara Memasang Menu Generator CCS Menu DropDown (terbaru)

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 :

<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  sampai dengan kode ini 
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 :

<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>


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

Digital Informasi

Cara Memasang Menu Generator CCS Menu DropDown (terbaru)

Artikel Menarik Lainnya