Cara Memasang Menu Dropdown Horizontall di Blog - Membuat / Memasang Daftar Isi yaitu dengan membuat menu. Contohnya Menu Dropdown Horizontall di Blog dengan cara mudah. Dropdown Menu adalah menu yang jika kita mengarahkan kursor ke menu tersebut maka akan muncul submenu lainnya yang memanjang kebawah. Untuk contohnya anda bisa lihat menu drop down yang terletak di blog saya ini.
Sub Menu tersebut merupakan bagian dari super menu diatasnya. Jadi anda harus menyesuaikan serta memadukan kategori apa yang cocok dan sesuai antara super menu dengan sub menu. Disini anda dapat melakukan pengaturan sendiri yaitu dengan memberikan nama, url link, dan title pada daftar isi menu tersebut.
Berbeda pada tahap sebelumnya yaitu Cara Memasang Menu Playlist Musik MP3 di blog, Menu Dropdown harus diletakkan di dalam pengeditan template bukan sebuah widget. Bagaimana, apakah anda sudah mengerti apa yang dimaksud dengan menu drop down? Saya anggap anda sudah mengetahui dan mengerti tentang apa yang saya maksud. Lalu Bagaimana cara memasang menu drop down di blog kita? Untuk memasang menu drop down di blog kita caranya dapat mengikuti langkah-langkah berikut ini :
Tahap-tahap memasang menu drop down di blog :
1. Login ke akun blogger
2. Klik Template
3. Cari kode ]]></b:skin>
4. Jika kode tersebut sudah ditemukan, copy kode CSS berikut ini diatas kode ]]></b:skin> :
#cssmenu ul,#cssmenu li,#cssmenu span,
#cssmenu a {
margin: 0;
padding: 0;
position: relative;
}
#cssmenu {
height: 35px;
border-radius: 0px 0px 0 0;
-moz-border-radius: 0px 0px 0 0;
-webkit-border-radius: 0px 0px 0 0;
background: #141414;
background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
background: linear-gradient(to bottom, #32323a 0%, #141414 100%);
filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#32323a', EndColorStr='#141414', GradientType=0);
border-bottom: 2px solid #ff4500;
}
#cssmenu:after,
#cssmenu ul:after {
content: '';
display: block;
clear: both;
}
#cssmenu a {
background: #141414;
background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
background: linear-gradient(to bottom, #32323a 0%, #141414 100%);
filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#32323a', EndColorStr='#141414', GradientType=0);
color: #ffffff;
display: inline-block;
font-family: Domine, Arial, Verdana, sans-serif;
font-size: 12px;
line-height: 35px;
padding: 0 20px;
text-decoration: none;
}
#cssmenu ul {
list-style: none;
}
#cssmenu > ul {
float: left;
}
#cssmenu > ul > li {
float: left;
}
#cssmenu > 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 #ff4500;
margin-left: -10px;
}
#cssmenu > ul > li:first-child > a {
border-radius: 0px 0 0 0;
-moz-border-radius: 0px 0 0 0;
-webkit-border-radius: 0px 0 0 0;
}
#cssmenu > ul > li:last-child > a {
border-radius: 0 0px 0 0;
-moz-border-radius: 0 0px 0 0;
-webkit-border-radius: 0 0px 0 0;
}
#cssmenu > ul > li.active > a {
box-shadow: inset 0 0 3px #000000;
-moz-box-shadow: inset 0 0 3px #000000;
-webkit-box-shadow: inset 0 0 3px #000000;
background: #070707;
background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#26262c', EndColorStr='#070707', GradientType=0);
}
#cssmenu > ul > li:hover > a {
background: #070707;
background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#26262c', EndColorStr='#070707', GradientType=0);
box-shadow: inset 0 0 3px #000000;
-moz-box-shadow: inset 0 0 3px #000000;
-webkit-box-shadow: inset 0 0 3px #000000;
}
#cssmenu .has-sub {
z-index: 1;
}
#cssmenu .has-sub:hover > ul {
display: block;
}
#cssmenu .has-sub ul {
display: none;
position: absolute;
width: 200px;
top: 100%;
left: 0;
}
#cssmenu .has-sub ul li {
*margin-bottom: -1px;
}
#cssmenu .has-sub ul li a {
background: #ff4500;
border-bottom: 1px solid #aad06d;
filter: none;
font-size: 11px;
display: block;
line-height: 120%;
padding: 10px;
}
#cssmenu .has-sub ul li:hover a {
background: #ff0000;
}
#cssmenu .has-sub .has-sub:hover > ul {
display: block;
}
#cssmenu .has-sub .has-sub ul {
display: none;
position: absolute;
left: 100%;
top: 0;
}
#cssmenu .has-sub .has-sub ul li a {
background: #ff0000;
border-bottom: 1px solid #97b36b;
}
#cssmenu .has-sub .has-sub ul li a:hover {
background: #345105;
.breadcrumbs{padding:0 5px 5px 0;margin:0 0 5px;font-size:11px;border-bottom:1px double #696969;font-weight:normal}
}
5. Jika telah anda temukan, lanjutkan langkah selanjutnya adalah dengan mencari kode </header>
6. Jika kode tersebut sudah ditemukan, kemudian copy kode dibawah ini, lalu letakan tepat dibawah kode </header> :
<div id='cssmenu'>
<ul>
<li class='active '><a href='/'><span>Home</span></a></li>
<li class='has-sub '><a href='http://impoint.blogspot.com/'><span>BLOG</span></a>
<ul>
<li><a href='http://onbeeblog.blogspot.com/2013/05/cara-mengedit-template-blogger-terbaru.html'><span>Tutorial Blog</span></a></li>
<li><a href='http://impoint.blogspot.com/search/label/Tips%20and%20Trick/'><span>Tips Menu Dropdown</span></a></li>
</ul>
</li>
<li class='has-sub '><a href='http://onbeeblog.blogspot.com/'><span>SEO</span></a>
<ul>
<li><a href='http://onbeeblog.blogspot.com/search/label/SEO%20Friendly'><span>SEO Friendly</span></a></li>
<li><a href='http://onbeeblog.blogspot.com/search/label/Download%20Template'><span>Template SEO</span></a></li>
</ul>
</li>
</ul>
</div>
Ganti Kode HTML tersebut (warna hijau) denegan url blog anda. Ganti kode warna merah dengan Judul Nama Daftar Menu anda.
Demikianlah cara memasang/membuat menu dropdown di blog. Semoga dapat bermanfaat untuk semuanya.
0 comments:
Post a Comment