Cara buat menu dropdown diblog. menu dropdown pada blog merupakan suatu bagian yang penting selain untuk mempermudah pengunjung mencari artikel pada blog kita juga memperindah tampilan blog.
Sudah banyak dibahas oleh para blogger mengenai cara membuat menu dropdown diblog, saya cuma nambain aja , ikut meramaikan saja.
nah blogger cara buat menu dropdown diblog.
ane share ya caranya.
Pertama masuk keblog anda lalu edit template, tapi sebelumnya copy dulu tempale anda dinotepad, buat jaga-jaga, kalau nanti ada yang salah pada penempatan script atau htmlnya.
Lalu Copy kode CSS dibawah dan letakkan tepat di atas kode
]]></b:skin>
Untuk mempermudah pencarian kode html tekan
ctrl+f
@charset "UTF-8";
/* Base Styles */
#cssmenu > ul,
#cssmenu > ul li,
#cssmenu > ul ul {
list-style: none;
margin: 0;
padding: 0;
}
#cssmenu > ul {
position: relative;
z-index: 597;
}
#cssmenu > ul li {
float: left;
min-height: 1px;
line-height: 1.3em;
vertical-align: middle;
}
#cssmenu > ul li.hover,
#cssmenu > ul li:hover {
position: relative;
z-index: 599;
cursor: default;
}
#cssmenu > ul ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 598;
width: 100%;
}
#cssmenu > ul ul li {
float: none;
}
#cssmenu > ul ul ul {
top: 1px;
left: 99%;
}
#cssmenu > ul li:hover > ul {
visibility: visible;
}
/* Align last drop down RTL */
#cssmenu > ul > li.last ul ul {
left: auto !important;
right: 99%;
}
#cssmenu > ul > li.last ul {
left: auto;
right: 0;
}
#cssmenu > ul > li.last {
text-align: right;
}
#cssmenu.align-center > ul > li {
float: none;
display: inline-block;
}
#cssmenu.align-center > ul {
text-align: center;
font-size: 0;
}
#cssmenu > ul > li {
font-size: 14px;
display: block;
}
#cssmenu ul ul {
text-align: left;
}
#cssmenu.align-right > ul > li {
float: right;
}
#cssmenu.align-right > ul ul ul {
top: 1px;
left: auto;
right: 99%;
}
/* Theme Styles */
#cssmenu > ul {
border-top: 4px solid #3fa338;
font-family: Calibri, Tahoma, Arial, sans-serif;
background: #1e1e1e;
background: -moz-linear-gradient(top, #1e1e1e 0%, #040404 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1e1e1e), color-stop(100%, #040404));
background: -webkit-linear-gradient(top, #1e1e1e 0%, #040404 100%);
background: linear-gradient(top, #1e1e1e 0%, #040404 100%);
width: auto;
zoom: 1;
}
#cssmenu > ul:before {
content: '';
display: block;
}
#cssmenu > ul:after {
content: '';
display: table;
clear: both;
}
#cssmenu > ul li a {
display: inline-block;
padding: 10px 22px;
}
#cssmenu > ul > li.active,
#cssmenu > ul > li.active:hover {
background-color: #3fa338;
}
#cssmenu > ul > li > a:link,
#cssmenu > ul > li > a:active,
#cssmenu > ul > li > a:visited {
color: white;
}
#cssmenu > ul > li > a:hover {
color: white;
}
#cssmenu > ul ul ul {
top: 0;
}
#cssmenu > ul li li {
background-color: white;
border-bottom: 1px solid #EBEBEB;
font-size: 12px;
}
#cssmenu > ul li.hover,
#cssmenu > ul li:hover {
background-color: #F5F5F5;
}
#cssmenu > ul > li.hover,
#cssmenu > ul > li:hover {
background-color: #3fa338;
-webkit-box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.15);
-moz-box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.15);
box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.15);
}
#cssmenu > ul a:link,
#cssmenu > ul a:visited {
color: #9A9A9A;
text-decoration: none;
}
#cssmenu > ul a:hover {
color: #9A9A9A;
}
#cssmenu > ul a:active {
color: #9A9A9A;
}
#cssmenu > ul > li > a {
font-size: 14px;
}
#cssmenu > ul ul {
border: 1px solid #CCC \9;
-webkit-box-shadow: 0 0px 2px 1px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 0px 2px 1px rgba(0, 0, 0, 0.15);
box-shadow: 0 0px 2px 1px rgba(0, 0, 0, 0.15);
width: 150px;
}
Lankah kedua
Cari Kode
<div id='content-wrapper'> Atau sejnisnya .
Lalu copy Kode html di bawah dan letakkan tepat di atas kode
<div id='content-wrapper'>
<div id="cssmenu">
<ul>
<li class="active"><a href="#" target="_blank"><i class="fa fa-fw fa-home"></i> Home</a></li>
<li><a href="#"><i class="fa fa-fw fa-bars"></i> Menus</a>
<ul>
<li><a href="#">Menu 1</a>
<ul>
<li><a href="#">Menu 1.1</a></li>
<li><a href="#">Menu 1.2</a></li>
</ul>
</li>
<li><a href="#">Menu 2</a></li>
</ul>
</li>
<li><a href="#"><i class="fa fa-fw fa-cog"></i> Settings</a></li>
<li><a href="#"><i class="fa fa-fw fa-phone"></i> Contact</a></li>
</ul>
</div>
Keterangan : ganti tanda # dengan Link url anda dan tulisan menu ganti sesuai dengan keinginan anda.
nah seleasi klik pratinjau kalau sudah bagus dan tidak ada masalah silahkan disave.
sekedar tambahan jika ingin di edit dan mau ganti css dan html menu dropdownnya. bisa anda
buat di sini anda bisa berkreasi sendiri.
Selamat mencoba semoga bermanfaat.
cara buat menu dropdown diblog
