Mungkin diluar sana banyak tutorial bagaimana cara membuat menu dropdown untuk BLOG, oke no problem siapa tau tutorial yang kita buat disini ternyata yang membantu para BLOGGER untuk memperindah tampilan BLOG nya.
Kita ke pembahasan, masuk dalam menu TEMA kemudian pilih EDIT HTML.
Jika sudah masuk kedalam halaman Edit HTML cari code berikut ]]></b:skin> bisa menggunakan fungsi CTRL+F. kemudian langsung aja copy-paste code dibawah ini diatas code ]]></b:skin>.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114#menutop ul,
#menutop li,
#menutop span,
#menutop a {
margin: 0;
padding: 0;
position: relative;
}
#menutop {
height: 49px;
background: #D5D5D5;
border-bottom: 4px solid #59c5ff;
width: auto;
}
#menutop:after,
#menutop ul:after {
content: '';
display: block;
clear: both;
}
#menutop a {
background: #D5D5D5;
color: #000;
display: inline-block;
font-family: Helvetica, Arial, Verdana, sans-serif;
font-size: 12px;
line-height: 49px;
padding: 0 20px;
text-decoration: none;
}
#menutop ul {
list-style: none;
}
#menutop > ul,#menutop > ul > li {
float: left;
}
#menutop > ul > li > a {
color: #000;
font-size: 12px;
}
#menutop > ul > li:hover:after {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
left: 50%;
bottom: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #59c5ff;
margin-left: -10px;
}
#menutop > ul > li.active:after {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
left: 50%;
bottom: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #59c5ff;
margin-left: -10px;
}
#menutop > ul > li.active > a,#menutop > ul > li:hover > a {
background: #ececec;
}
#menutop .menu-sub {
z-index: 1;
}
#menutop .menu-sub:hover > ul {
display: block;
}
#menutop .menu-sub ul {
display: none;
position: absolute;
width: 200px;
top: 100%;
left: 0;
}
#menutop .menu-sub ul li {
margin-bottom: 0px;
}
#menutop .menu-sub ul li a {
background: #59c5ff;
border-bottom: 1px solid #8cd7ff;
filter: none;
font-size: 11px;
display: block;
line-height: 120%;
padding: 10px;
color: #ffffff;
}
#menutop .menu-sub ul li:hover a {
background: #26b3ff;
}
#menutop .menu-sub .menu-sub:hover > ul {
display: block;
}
#menutop .menu-sub .menu-sub ul {
display: none;
position: absolute;
left: 100%;
top: 0;
}
#menutop .menu-sub .menu-sub ul li a {
background: #26b3ff;
border-bottom: 1px solid #8cd7ff;
}
#menutop .menu-sub .menu-sub ul li a:hover {
background: #0daaff;
} Pertanyaan nya kenapa kita harus masuk ke edit HTML, kan seharusnya di BLOG sendiri itu ada cara untuk membuat menu bar? Jawabannya karena kita ingin tampilan BLOG yang kita punya adalah hasil dari imajinasi kita sendiri.
Baca Juga --> Cara Membuat Headline Breaking News Pada Blog
Baca Juga --> Cara Membuat Headline Breaking News Pada Blog
Masih di dalam Edit HTML, sekarang cari kode </header> , copy-paste code dibawah ini tepat diatas code </header> .
123456789101112131415161718192021222324252627282930313233343536373839<div id='menutop'>
<ul>
<li class='active'><a href='#' target='_blank'><span>Home</span></a></li>
<li class='menu-sub'><a href='#'><span>Menu</span></a>
<ul>
<li class='menu-sub'><a href='#'><span>Menu</span></a>
<ul>
<li><a href='#'><span>Sub Item</span></a></li>
<li class='last'><a href='#'><span>Sub Item</span></a></li>
</ul>
</li>
<li class='menu-sub'><a href='#'><span>Menu 2</span></a>
<ul>
<li><a href='#'><span>Sub Item</span></a></li>
<li class='last'><a href='#'><span>Sub Item</span></a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'><span>About</span></a></li>
<li class='last'><a href='#'><span>Contact</span></a></li>
<li class='menu-sub'><a href='#'><span>Menu 3</span></a>
<ul>
<li class='menu-sub'><a href='#'><span>Menu 3</span></a>
<ul>
<li><a href='#'><span>Sub Menu </span></a></li>
<li class='last'><a href='#'><span>Sub Menu </span></a></li>
</ul>
</li>
<li class='menu-sub'><a href='#'><span>Menu 4</span></a>
<ul>
<li><a href='#'><span>Sub Item</span></a></li>
<li class='last'><a href='#'><span>Sub Item</span></a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>Sekarang menu dropdown telah berhasil kita buat. Sedikit tambahan, ganti code # menjadi link BLOG kalian dan didalam code <span></span> ganti menjadi nama menu kalian, contoh: <li class='menu-sub'><a href='https://penyaircoding.blogspot.com/'><span>penyaircoding</span></a>
