Untuk para sobat blogger terutama pemula termasuk saya mungkin agak sedikit pusing jika harus mengedit HTML ,seperti yang akan saya posting kali ini tutorial Cara Membuat Drop Down Menu ,oke langsung aja ya tak banyak cakap .
Langkah-langkanya sebagai berikut :
- Login ke blogger sobat
- Klik Tempelate pilih Edit HTML
- Lalu cari kode berikut ]]></b:skin>
- Cara mencari kodenya ,klik kode apa saja pada Edit Template lalu tekan CTRL + F
- Lalu tulisakan kode ]]></b:skin> pada kota pencarian yang berwarna hitam setelah itu sobat akan temukan kode yang sobat cari.
- Jika sudah di temukan kode yang sobat cari lalu silakan kopy paste kode di bawah ini tepat di atas 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}
}
- Kemudian sobat cari kode berikut : </header>
- Seperti biasa cara mencari kodenya tekan CTRL + F
- Lalu tuliskan kode </header> pada kota pencarian yang berwarna hitam maka sobat akan temukan kode yang sobat cari
- Jika sudah di temukan kode yang sobat cari lalu kopy paste kode di bawah ini tepat di bawah kode </header>
<div id='cssmenu'>
<ul>
<li class='active '><a href='/'><span>About me</span></a></li>
<li class='has-sub '><a href=' http://lativaipeh.blogspot.tw /'><span>BLOGGER</span></a>
<ul>
<li><a href=' http://lativaipeh.blogspot.tw/search/label/Tutorial%20Blog '><span>Tutorial Blog</span></a></li>
<li><a href=' http://lativaipeh.blogspot.tw/search/label/Tips%20Blog '><span>Tips Blog</span></a></li>
</ul>
</li>
<li class='has-sub '><a href=' http://lativaipeh.blogspot.tw/'><span>KOMPUTER</span></a>
<ul>
<li><a href=' http://lativaipeh.blogspot.tw/search/label/Komputer '><span>Tips Komputer</span></a></li>
<li><a href=' http://lativaipeh.blogspot.tw/search/label/Theme '><span>Theme PC</span></a></li>
</ul>
</li>
<li><a href=' http://lativaipeh.blogspot.tw/ '><span>CONTACT</span></a></li>
</ul>
</div>
<ul>
<li class='active '><a href='/'><span>About me</span></a></li>
<li class='has-sub '><a href=' http://lativaipeh.blogspot.tw /'><span>BLOGGER</span></a>
<ul>
<li><a href=' http://lativaipeh.blogspot.tw/search/label/Tutorial%20Blog '><span>Tutorial Blog</span></a></li>
<li><a href=' http://lativaipeh.blogspot.tw/search/label/Tips%20Blog '><span>Tips Blog</span></a></li>
</ul>
</li>
<li class='has-sub '><a href=' http://lativaipeh.blogspot.tw/'><span>KOMPUTER</span></a>
<ul>
<li><a href=' http://lativaipeh.blogspot.tw/search/label/Komputer '><span>Tips Komputer</span></a></li>
<li><a href=' http://lativaipeh.blogspot.tw/search/label/Theme '><span>Theme PC</span></a></li>
</ul>
</li>
<li><a href=' http://lativaipeh.blogspot.tw/ '><span>CONTACT</span></a></li>
</ul>
</div>
Note: Tulisan yang berwarna biru ganti dengan url yang sobat inginkan
Tulisan yang berwarna merah ganti dengan judul yang sobat inginkan
Demikian Cara Membuat Drop Down Menu semoga bermanfaat ,terima kasih telah membaca artikel-artikel Lativa Ipeh Blogspot
