IT club: Membuat Menu Dropdown

A. Dropdown Level 2

1. Login blog
2. buka menu design, klik menu template dan edit HTML
3. Selanjutnya cari kode "]]></b:skin>"
4. Sematkan atau copy kode berikut sebelum kode "]]></b:skin>"

/* Start Code Dropdown Menu*/

#pad {height:100px;}

#hmenu {padding:0; margin:0; list-style:none; height:30px; position:relative; z-index:500; font-family:arial, verdana, sans-serif;}

#hmenu li {float:left; margin-right:1px;}

#hmenu li a {display:block; float:left; height:30px; line-height:30px; background:#333; color:#ccc; text-decoration:none; font-size:11px; font-weight:bold;

padding:0 25px 0 10px;}

#hmenu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}

/* Default link styling */

/* Style the list OR link hover. Depends on which browser is used */

#hmenu li a:hover {z-index:200; position:relative;color:#fff; background-color:#c60;}

#hmenu li:hover {position:relative; z-index:200;}

#hmenu li:hover > a {

color:#fff;/* Menu Font Color */

background:#840; /* Menu mouse over Color */

}

#hmenu li:hover > a.sub {

color:#fff; /* Drop down item mouse over font Color */

background-color:#840; /* Drop down item mouse over background Color */

}

*/

#hmenu li.current a {color:#fff; background:#840;}

#hmenu li a.sub {

background: #333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi3nu8q4-nxNIRidIE0RapFPg0sSPYmvsyKF7frkTGbrFH_TrjimqUnvvkWZVJPJEe9GC0TFsYcifMBQabqlb1ThH3LrScNythb_z8miicRo-0rDlNezk1bv4bHvff2leAnXRBa_lTs40/) /* Down arrow image */

no-repeat right center;

}

#hmenu :hover ul {left:0; top:30px; width:120px; background:#444;}

/* keep the 'next' level invisible by placing it off screen. */

#hmenu ul,

#hmenu :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

#hmenu :hover ul :hover ul

{left:120px; top:-1px; background:#222; white-space:nowrap; width:100px; z-index:200; height:auto;}

#hmenu :hover ul li {margin:0; border-top:1px solid #666;}

#hmenu :hover ul li a {

width:150px; /* Width of sub menu item */

padding:0; text-indent:10px;

background:#333; /* Drop down background color */

color:#ccc; /* Drop down item font Color */

height:30px; line-height:30px;}

#hmenu :hover ul li a.fly {background:#333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixnV1le6k6FmHjeDpVfeUzDwYgxTx_Me7Oo8TAZNTsQdt4oo7tGJGJmGx8TUbHvnNa7E-xg91Z0Oau9OKpIDdBRFIYQeATtbLhFjkwOlYfxKpL9DQg0LGYxdm3BS-GsLyTV5e4omXPrQ0/) no-repeat right

center;}

#hmenu :hover ul :hover {background-color:#c60; color:#fff;}

#hmenu :hover ul :hover a.fly {background-color:#c60; color:#fff;}

#hmenu :hover ul :hover ul li a {width:150px; padding:0; text-indent:10px; background:#333; /* Dropdown Sub Menu background color */

color:#ccc; /* Dropdown Sub Menu font color */

}

#hmenu :hover ul :hover ul :hover {

background-color:#c60; /* Dropdown Sub Menu mouse over color */

color:#fff;/* Dropdown Sub Menu mouse over font color */

}

/* End code dropdown menu */

5. Selanjutnya cari kode html "</header>"
6. Sematkan kode berikut setelah kode "</header>"

<ul id='hmenu'>

<li><a href='http://itclubwhaterbat.blogspot.com/'><b>Beranda</b></a><ul>

<li><a href='http://itclubwhaterbat.blogspot.com/2014/09/it-club-menjadi-semangat-baru.html'>Profil</a></li>

<li><a href='http://itclubwhaterbat.blogspot.com/2014/09/pengelola-teknis.html'>Pengelola Teknis</a></li>

<li><a href='http://itclubwhaterbat.blogspot.com/2014/09/program-kerja.html'>Program Kerja</a></li>

<li><a href='http://itclubwhaterbat.blogspot.com/2014/09/materi-tutorial.html'>Materi Tutorial</a></li>

<li><a href='http://blogpraktikum-itclub.blogspot.com/'>Blog Praktikum</a></li>

</ul>

</li>

<li><a href='#url'><b>Tutor</b></a>



<ul>

<li><a href='http://jokoendutz.blogspot.com/'>Joko Waskito</a></li>

<li><a href='http://masruri-whaterbat.blogspot.com/'>Masruri, S.Pd.I</a></li>

<li><a href='http://abdulmalik-whaterbat.blogspot.com/'>Abdul Malik, S.Pd.Kim</a></li>

<li><a href='http://adiibnufariz.blogspot.com/'>Adi Ibnu Fariz, S.Pd</a></li>

<li><a href='#url'>Jazi Aqiyas</a></li>

<li><a href='http://hamidbelajar.blogspot.com/'>Nurhamid</a></li>

</ul>

</li>

<li><a href='#'><b>Anggota</b></a>



<ul>

<li><a class='fly' href='#url'>Angkatan I</a>



<ul>

<li><a href='http://mailmergeiix.blogspot.com/'>Ahmad Fairuza Iqbal</a></li>

<li><a href='http://ahmadsirojudin1.blogspot.com/'>Ahmad Sirojudin</a></li>

<li><a href='http://fifiayulestari.blogspot.com/'>Fifi Ayu Lestari</a></li>

<li><a href='http://fikarajin.blogspot.com/'>Fika Qurratul Aini</a></li>

<li><a href='http://yachdayah.blogspot.com/'>Hidayatur Rokhmah</a></li>

<li><a href='http://ifanasafit.blogspot.com/'>Ifana Safitri</a></li>

<li><a href='http://mizanyayan.blogspot.com/'>Mizan Alfath</a></li>

<li><a href='http://cintaselamat.blogspot.com'>Nuril Munajah</a></li>

<li><a href='http://hidayatera.blogspot.com/'>Rahmat Hidayat</a></li>

<li><a href='http://rinafitrianira.blogspot.com/'>Rina Fitriani</a></li>

<li><a href='http://nithybelajar.blogspot.com/'>Suniti</a></li>

<li><a href='http://santiagetha.blogspot.com/'>Susanti</a></li>

<li><a href='http://threesiwi.blogspot.com/'>Tri Siwi Adityas, S.Pd</a></li>

<li><a href='http://ulilokta4.blogspot.com/'>Ulil Ifadah</a></li>

<li><a href='http://yuni-aprilia.blogspot.com/'>Yuni Apriliani</a></li>

</ul>



</li>

<li class='sub'><a class='fly' href='#url'>Angkatan II</a>



<ul>

<li><a href='#url'>---</a></li>

</ul>



</li>

<li><a class='fly' href='#url'>Angkatan III</a>



<ul>

<li><a href='#url'>---</a></li>

</ul>



</li>

</ul>



</li>

<li><a href='#'><b>Gallery</b></a>



<ul>

<li><a href='#url'>Kegiatan Tutorial</a></li>

<li><a href='#url'>Kegiatan Praktikum</a></li>

</ul>



</li>

<li><a href='#'><b>Download</b></a>



<ul>

<li><a href='http://itclubwhaterbat.blogspot.com/2014/09/tips-tricks.html'>Tips dan Tricks</a></li>

<li><a href='http://itclubwhaterbat.blogspot.com/2014/09/download-software.html'>Software</a></li>

<li><a href='https://plus.google.com/photos/103495535227723043594/albums/5980574204496278177'>Logo</a></li>

</ul>



</li>

<li><a href='#'><b>Registrasi</b></a>



<ul>

<li><a href='http://itclubwhaterbat.blogspot.com/2014/08/memuat.html'>Formulir Registrasi</a></li>

<li><a href='http://itclubwhaterbat.blogspot.com/2014/08/persyaratan-menjadi-anggota.html'>Persyaratan</a></li>

</ul>



</li>

<li id='support'><a href='#'><b>Admin</b></a>



<ul>

<li><a href='https://www.blogger.com/blogger.g?blogID=822508567940952770#editor/src=sidebar'>New Entry</a></li>

<li><a href='https://www.blogger.com/blogger.g?blogID=822508567940952770#pageelements'>Layout</a></li>

<li><a href='https://www.blogger.com/home'>Login</a></li>

<li><a href='http://jokoendutz.blogspot.com/logout?d=http://www.blogger.com/logout-redirect.g?blogID%3D5543261573105473200'>Logout</a></li>

</ul>

</li>

</ul>

7. Sebelum simpan template, klik pratinjau template terlebih dahulu, untuk melihat hasil sementara apakah sudah sesuai atau belum hasilnya

B. Dropdown Level 3/> (multiple)

1. Login blog
2. buka menu design, klik menu template dan edit HTML
3. Selanjutnya cari kode "]]></b:skin>"
4. Sematkan atau copy kode berikut sebelum kode "]]></b:skin>"

.ddsmoothmenu{
font: bold 12px Verdana;
background: #414141; /*background of menu bar (default state)*/
width: 100%;
}
.ddsmoothmenu ul{
z-index:100;
margin: 0;
padding: 0;
list-style-type: none;
}
/*Top level list items*/
.ddsmoothmenu ul li{
position: relative;
display: inline;
float: left;
}
/*Top level menu link items style*/
.ddsmoothmenu ul li a{
display: block;
background: #414141; /*background of menu items (default state)*/
color: white;
padding: 8px 10px;
border-right: 1px solid #778;
color: #2d2b2b;
text-decoration: none;
}
* html .ddsmoothmenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}
.ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited{
color: white;
}
.ddsmoothmenu ul li a.selected{ /*CSS class that's dynamically added to the currently active menu items' LI A element*/
background: black;
color: white;
}
.ddsmoothmenu ul li a:hover{
background: black; /*background of menu items during onmouseover (hover state)*/
color: white;
}
/*1st sub level menu*/
.ddsmoothmenu ul li ul{
position: absolute;
left: 0;
display: none; /*collapse all sub menus to begin with*/
visibility: hidden;
}
/*Sub level menu list items (undo style from Top level List Items)*/
.ddsmoothmenu ul li ul li{
display: list-item;
float: none;
}
/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.ddsmoothmenu ul li ul li ul{
top: 0;
}
/* Sub level menu links style */
.ddsmoothmenu ul li ul li a{
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}
/* Holly Hack for IE \*/
* html .ddsmoothmenu{height: 1%;} /*Holly Hack for IE7 and below*/

/* ######### CSS classes applied to down and right arrow images ######### */
.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}
.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}
/* ######### CSS for shadow added to sub menus ######### */
.ddshadow{
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
background: silver;
}
.toplevelshadow{ /*shadow opacity. Doesn't work in IE*/
opacity: 0.8;
}

5. Selanjutnya cari kode html "</header>"
6. Sematkan kode berikut setelah kode "</header>"

<div class='ddsmoothmenu' id='smoothmenu1'>
<ul>
<li><a href='http://smawahidhasyimtersono.blogspot.com/'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0f1c9Y4sGnh7m9hzEuKMdLv7rFfZw23ybcmuWftNEFhGpZBVHvhgJgUld5ABu1ZJC1YVG8GTSeZM_vF3yfsxyRVapLHiX-kYFF5fPu4ut1RCWPYSZJ5nHm3vev9K8E9QtqZjys98HNCEU/s1600/Home.png' style='padding:0px;'/> Beranda</a></li>
<li><a href='#'>Profil</a>
<ul>
<li><a href='http://smawahidhasyimtersono.blogspot.com/2010/01/sambutan-kepala-sekolah.html'>Sambutan Ka. Sekolah</a></li>
<li><a href='http://smawahidhasyimtersono.blogspot.com/2008/01/profil-sma-wahid-hasyim-tersono.html'>Profil Sekolah</a></li>
<li><a href='http://smawahidhasyimtersono.blogspot.com/2008/08/visi-misi-dan-tujuan-sekolah.html'>Visi, Misi dan Tujuan</a></li>
<li><a href='#'>Program Kerja Sekolah</a>
<ul>
<li><a href='#'>Jangka Pendek</a></li>
<li><a href='#'>Jangka Menengah</a></li>
<li><a href='#'>Jangka Panjang</a></li>
</ul>
</li>
<li><a href='#'>Struktur Organisasi</a>
<ul>
<li><a href='http://smawahidhasyimtersono.blogspot.com/2009/08/blog-post.html'>Jabatan Struktural</a></li>
<li><a href='http://smawahidhasyimtersono.blogspot.com/2008/08/pengurus-yayasan-sma-wahid-hasyim.html'>Pengurus dan Komite</a></li>
<li><a href='http://smawahidhasyimtersono.blogspot.com/2009/12/nama-nim-afidatun-nisa-076011386-ahmad.html'>Tenaga Pendidik dan Kependidikan</a></li>
</ul></li>
<li><a href='#'>Prestasi Sekolah</a>
<ul>
<li><a href='http://smawahidhasyimtersono.blogspot.com/2008/01/prestasi-sekolah.html'>Akademik</a></li>
<li><a href='http://smawahidhasyimtersono.blogspot.com/2009/09/non-akademik.html'>Non Akademik</a></li>
</ul>
</li>
<li><a href='http://smawahidhasyimtersono.blogspot.com/2009/12/lokasi-whaterbat.html'>Lokasi Sekolah</a></li>
</ul>
</li>
<li><a href='#'>Waka. Sekolah</a>
<ul>
<li><a href='#'>Waka. Kurikulum</a>
<ul>
<li><a href='http://smawahidhasyimtersono.blogspot.com/2009/09/program-kerja-waka-kurikulum.html'>Program Kerja</a></li>
<li><a href='#'>Perangkat Pembelajaran</a>
<ul>
<li><a href='http://smawahidhasyimtersono.blogspot.com/2014/02/perangkat-pembelajaran.html'>Semester 1</a></li>
<li><a href='http://smawahidhasyimtersono.blogspot.com/2014/02/perangkat-kelas-x-semester-2.html'>Semester 2</a></li>
</ul>
</li>
<li><a href='#'>Jadwal KBM</a></li>
<li><a href='#'>Latihan Soal Online</a>
<ul>
<li><a href='http://bomsoal.blogspot.com/'>Soal Ujian Evaluasi SMA</a></li>
</ul>
</li>
<li><a href='http://smawahidhasyimtersono.blogspot.com/2009/09/arsip-kurikulum.html'>Arsip</a></li>
</ul>
</li>
<li><a href='#'>Waka. Kesiswaan</a>
<ul>
<li><a href='http://smawahidhasyimtersono.blogspot.com/2009/09/program-kerja-waka-kesiswaan.html'>Program Kerja</a></li>
<li><a href='http://smawahidhasyimtersono.blogspot.com/2014/02/ppdb-online.html'>PPDB Online</a></li>
<li><a href='#'>Organisasi</a>
<ul>
<li><a href='#'>OSIS</a>
<ul>
<li><a href='http://smawahidhasyimtersono.blogspot.com/2014/02/pengurus-osis.html'>Susunan Pengurus</a></li>
<li><a href='#'>Program Kerja</a></li>
</ul>
</li>
<li><a href='#'>PK. IPNU-IPPNU</a>
<ul>
<li><a href='http://smawahidhasyimtersono.blogspot.com/2014/02/pengurus-pk-ipnu-ippnu.html'>Susunan Pengurus</a></li>
<li><a href='#'>Program Kerja</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>Ekstrakurikuler</a>
<ul>
<li><a href='#'>Pramuka</a></li>
<li><a href='#'>Olahraga</a></li>
<li><a href='http://smawahidhasyimtersono.blogspot.com/2014/01/formulir-ujian-komputer.html'>Komputer</a></li>
<li><a href='#'>PMR</a></li>
<li><a href='http://smawahidhasyimtersono.blogspot.com/2014/02/majalah-masinis-masinis-report-mengeja.html'>Jurnalis</a></li>
<li><a href='#'>Simtudduror</a></li>
<li><a href='#'>Marchingband</a></li>
<li><a href='#'>Musik</a></li>
<li><a href='#'>Keputrian</a></li>
</ul>
</li>
<li><a href='http://smawahidhasyimtersono.blogspot.com/2009/09/arsip-waka-kesiswaan.html'>Arsip</a></li>
</ul>
</li>
<li><a href='#'>Waka. Sarpras</a>
<ul>
<li><a href='http://smawahidhasyimtersono.blogspot.com/2014/02/program-kerja-waka-sarpras.html'>Program Kerja</a></li>
<li><a href='http://smawahidhasyimtersono.blogspot.com/2014/02/arsip-waka-sarpras.html'>Arsip</a></li>
</ul>
</li>
<li><a href='#'>Waka. Humas</a>
<ul>
<li><a href='http://smawahidhasyimtersono.blogspot.com/2014/02/program-kerja-waka-humas.html'>Program Kerja</a></li>
<li><a href='http://smawahidhasyimtersono.blogspot.com/2009/09/arsip-waka-humas.html'>Arsip</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>Fasilitas</a>
<ul>
<li><a href='http://whaterbat-perpustakaandigital.blogspot.com/'>Perpustakaan Online</a>
<ul>
<li><a href='http://whaterbat-perpustakaandigital.blogspot.com/2010/02/buku-sekolah-elektronik-bse.html'>Buku Sekolah Elektronik</a></li>
<li><a href='http://whaterbat-perpustakaandigital.blogspot.com/2010/02/karya-tulis-siswa.html'>Karya Tulis Siswa</a></li>
<li><a href='http://whaterbat-perpustakaandigital.blogspot.com/2010/10/referensi-islami.html'>Referensi Islami</a></li>
<li><a href='http://whaterbat-perpustakaandigital.blogspot.com/2010/02/cara-mudah-belajar-buat-bogger-blogspot.html'>Referensi Techno</a></li>
<li><a href='http://whaterbat-perpustakaandigital.blogspot.com/2010/10/referensi-umum.html'>Referensi Umum</a></li>
<li><a href='http://whaterbat-perpustakaandigital.blogspot.com/2010/10/artikel.html'>Artikel Anda</a></li>
</ul>
</li>
<li><a href='http://smawahidhasyimtersono.blogspot.com/2014/02/ppdb-online.html'>PPDB Online</a></li>
</ul>
</li>
<li><a href='#'>Forum</a>
<ul>
<li><a href='http://smawahidhasyimtersono.blogspot.com/2008/08/alumni-guru-sma-wahid-hasyim-tersono.html'>Alumni Tenaga Pendidik dan Kependidikan</a></li>
<li><a href='#'>Alumni Peserta Didik</a> <ul>
<li><a href='http://smawahidhasyimtersono.blogspot.com/2008/10/memuat.html'>Pendataan Alumni</a></li>
<li><a href='http://alumniwhaterbat.blogspot.com/'>Blogsite Alumni</a></li>
</ul></li>
<li><a href='#'>Album Kenangan</a>
<ul>
<li><a href='http://smawahidhasyimtersono.blogspot.com/2014/03/album-kenangan.html'>Tahun Pelajaran 2012/2013</a></li>
<li><a href='http://smawahidhasyimtersono.blogspot.com/2014/03/album-kenangan-tahun-pelajaran-20132014.html'>Tahun Pelajaran 2013/2014</a></li>
</ul>
</li>
<li><a href='http://smawahidhasyimtersono.blogspot.com/2014/02/kritik-saran-orang-tua-wali-tokoh.html'>Orang Tua/Wali dan Tokoh Masyarakat</a></li>
</ul>
</li>
<li><a href='#'>Gallery</a>
<ul>
<li><a href='http://smawahidhasyimtersono.blogspot.com/2014/02/blog-post.html'>Kegiatan Sekolah</a></li>
<li><a href='http://smawahidhasyimtersono.blogspot.com/2014/02/majalah-masinis-masinis-report-mengeja.html'>Masinis Report</a></li>
<li><a href='http://dinamika-whaterbat.blogspot.com/'>Mading Online</a></li>
<li><a href='https://plus.google.com/photos/103495535227723043594/albums/5980574204496278177'>Download Logo</a></li>
</ul>
</li>
<li><a href='http://headlinenewswhaterbat.blogspot.com/'>Info</a></li>
<li><a href='http://smawahidhasyimtersono.blogspot.com/2009/09/arsip-kurikulum.html'>Download</a></li>
<li><a href='#'>Admin</a>
<ul>
<li><a href='http://jokoendutz.blogspot.com/'>Operator Whaterbat</a>
<ul>
<li><a href='http://tableizer.journalistopia.com/'>Tableizer</a></li>
<li><a href='http://www.textfixer.com/html/html-table-generator.php'>Tableizer_2</a></li>
<li><a href='http://situseo.blogspot.com/2012/02/menggabungkan-kolom-dan-baris-dalam.html'>Tableizer_3</a></li>
<li><a href='https://plus.google.com/'>Picasa Foto's</a></li>
</ul>
</li>
<li><a href='http://www.blogger.com/post-create.g?blogID=4550491298229478314'>Entri Baru</a></li>
<li><a href='http://www.blogger.com/blogger.g?blogID=4550491298229478314#allposts/src=dashboard'>Posting</a></li>
<li><a href='http://www.blogger.com/blogger.g?blogID=4550491298229478314#pageelements'>Tata Letak</a></li>
<li><a href='http://www.blogger.com/home'>Masuk</a></li>
<li><a href='http://www.blogger.com/logout.g'>Keluar</a></li>
</ul>
</li>
</ul>

7. Sebelum simpan template, klik pratinjau template terlebih dahulu, untuk melihat hasil sementara apakah sudah sesuai atau belum hasilnya

Membuat Menu Dropdown

0 komentar:

Posting Komentar

my sponsor

Total Tayangan Halaman

Pengunjung

Like's

Blog Archive

Admin