Membuat Menu Horizontal Bercabang / Dropdown
Sama seperti posting yang dahulu, sekarang saya akan membahas lagi tentang menu horizontal. Tapi menu horizontal kali ini berbeda dari menu horizontal yang dulu saya posting. Menu horizontal kali ini dapat dropdown. Maksudnya jika kursor kita didekatkan pada teks yang berada di menu navigasi, maka nanti akan muncul seperti daftar menu lagi dibawahnya. Contohnya bisa diliat dibawah ini :

Untuk membuat menu seperti diatas, berikut langkah-langkahnya :
1. Login ke blogger anda
2. KLik rancangan
3. KLik edit html
4. Cari kode ]]></b:skin>
5.Diatas kode ]]></b:skin> , pastekan kode berikut :

menu{
border:none;
border:0px;
margin:0px;
padding:0px;
font: 67.5% &quot;Arial&quot;, Arial;
font-size:14px;
font-weight:bold;

}
.menu ul{
background:#333333;
height:35px;
list-style:none;
margin:0;
padding:0;
font-size:14px;
font-weight:bold;
}
.menu li{
float:left;
padding:0px;
}
.menu li a{
background:#333333 url(&quot;http://i47.tinypic.com/qp53sw.jpg&quot;) bottom right no-repeat;
color:#cccccc;
display:block;
font-weight:normal;
line-height:35px;
margin:0px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
.menu li a:hover, .menu ul li:hover a{
background: #2580a2 url(&quot;http://i49.tinypic.com/13zbc53.jpg&quot;) bottom center no-repeat;
color:#FFFFFF;
text-decoration:none;
}
.menu li ul{
background:#333333;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:225px;
z-index:200;
/*top:1em;
/*left:0;*/
}
.menu li:hover ul{
display:block;

}
.menu li li {
background:url('http://i45.tinypic.com/nvxxqg.jpg') bottom left no-repeat;
display:block;
float:none;
margin:0px;
padding:0px;
width:225px;
}
.menu li:hover li a{
background:none;

}
.menu li ul a{
display:block;
height:35px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover, .menu li ul li:hover a{
background:#2580a2 url('http://i50.tinypic.com/66elwh.jpg') center left no-repeat;
border:0px;
color:#ffffff;
text-decoration:none;
}
.menu p{
clear:left;
}
6. Simpan template
7. Kemudian klik elemen laman
8. Klik tambah gadget dan isikan dengan kode dibawah ini :
<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Tutorial</a>
<ul>
<li><a href="#">Windows Tricks</a></li>
<li><a href="#">Internet</a></li>
<li><a href="#">Software</a></li>
<li><a href="#">Microsoft Excel</a></li>
<li><a href="#">Microsoft Word</a></li>
<li><a href="#">Data recovery</a></li>
<li><a href="#">Antivirus</a></li>
</ul>
</li>
<li><a href="#">Blog</a>
<ul>
<li><a href="#">Blog Tips</a></li>
<li><a href="#">SEO Tips</a></li>
<li><a href="#">Adsense</a></li>
<li><a href="#">Feed</a></li>
</ul>
</li>
<li><a href="#">Phone Tips</a>
<ul>
<li><a href="#">Phone Secret Codes</a></li>
<li><a href="#">Phone Screenshot</a></li>
</ul>
</li>
<li><a href="#">Link</a>
<ul>
<li><a href="#">Artikel Komputer</a></li>
<li><a href="#">Panduan SEO</a></li>
</ul>
</li>

<li><a href="#">ArcGIS Tutorial</a></li>
<li><a href="#">Free Translator</a></li>
<li><a href="#">Link Exchange</a></li>
</ul>
</div>

Ganti kode '#' dengan url target anda
Kemudian ganti home,tutorial,dan sebagainya dengan teks yang akan tampil di menu navigasi anda
SEMOGA BERHASIL ! !
Label: , 3 komentar
3 Responses
  1. Anonymous Says:
    November 8, 2011 at 5:10 PM

    Sore kang,, mau berguru dikit nhe,, kan setelah kita mengklik salah satu menu di link menu,kita akan di arahkan ke halamannya, nah gimana biar halaman ini tampilannya seperti tampilan di beranda ( postingan hanya sebagian yang di tampilkan diikuti dengan read more), maksudnya seperti di blog akang ini, di halaman tutorial blog,, nuhun kang,,, mohon pencerahannya,, heheh


  2. Hurri Crescendo Says:
    December 29, 2011 at 3:21 PM

    Sorry gan balasnya lama..
    ane dah jarang nge-blog lg sih..

    ohh..
    gini caranya..
    pada url target diatas, diisi aja dengan url label yg berisi beberapa post yg anda inginkan..

    contoh : http://www.situs-wonosobo.blogspot.com/search/label/Tutorial%20Blog
    (label dr kumpulan beberapa post mengenai tutorial blog)

    jika pd halaman tsb berisi banyak post, maka tambahkan kata '?max-results=5' pd url label anda supaya post dari halaman tsb maksimal 5 post..

    menjadi : http://www.situs-wonosobo.blogspot.com/search/label/Tutorial%20Blog?max-results=5

    sory gan kalo ga jelas,,
    ane bingung mo jelasin gmn..
    hahaha


  3. raka windha Says:
    January 3, 2012 at 5:36 PM

    menu Tutorial akan bercabang
    Windows Tricks
    Internet
    Software
    Microsoft Excel
    Microsoft Word
    Data recovery
    Antivirus

    tapi nda keluar cabangngnya, apakah ada yg salah dengan scriptnya..
    mohon bantuannya...


Subscribe to: Post Comments (Atom)