Total Tayang
Cara Membuat Menu Horisontal Drop Down Keren di Blog
Petunjuknya seperti ini:
Anda tambahkan gadget pada posisi yang diinginkan. Caranya Anda klik menu Tambah Gadget yang ada halaman tata letak.
Selanjutnya Anda pilih Gadget HTML/JavaScript.
Kemudian Anda ketik atau salin kode berikut ini.
@import url(http://fonts.googleapis.com/css?family=Open+Sans:600);
/* Menu CSS */#cssmenu,
#cssmenu > ul {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgASvVJGPH6oSYWKMlBqHW_K1qCIttT5dXEE6ycHKhwLCrU807LSji46DVuzPSjjGz78iFd5Zi3uMBi5a3F3873XKwr4SCe28WZrAlN6s77asz4KDFTvJHJjD6_q4zGQYFYxwbiC1AALk2G/h120/highlight-bg.png) repeat;
padding-bottom: 3px;
font-family: 'Open Sans', sans-serif;
font-weight: 600;
}
#cssmenu:before,
#cssmenu:after,
#cssmenu > ul:before,
#cssmenu > ul:after {
content: '';
display: table;
}
#cssmenu:after,
#cssmenu > ul:after {
clear: both;
}
#cssmenu {
width: 960px;
zoom: 1;
}
#cssmenu > ul {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMQzI-DJr4m-IaYhyphenhyphen9XAoFuRxwhRHdvncnsIkn_2Y4QIaSMZM2tDdOueQ6sg_vcXgaSsh2CFcsGglSkSFMiqtRxTjkIocep1nGwy0XMDmbOPFoqNe1snaIQqSKq-yISqJJHHBpXIn3XuSw/h120/menu-bg) repeat;
margin: 0;
padding: 0;
position: relative;
}
#cssmenu > ul li {
margin: 0;
padding: 0;
list-style: none;
}
#cssmenu > ul > li {
float: left;
position: relative;
}
#cssmenu > ul > li > a {
padding: 23px 26px;
display: block;
color: white;
font-size: 13px;
text-decoration: none;
text-transform: uppercase;
text-shadow: 0 -1px 0 #c28130;
text-shadow: 0 -1px 0 rgba(151, 99, 33, 0.43);
line-height: 18px;
}
#cssmenu > ul > li:hover > a {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheqiunYwzB6vL1i-7XVPkxgQJEJdfNuosQyTYElXcbSCRmMIU4uecxdVz_tbQ3OWBzCaJfO0g1BcGHxZmAnqo7_g1_EJ_VylG7xDKItRbSQO0rlLOFcVRnSDlPb4haSlrpnRLHGw8chfu1/h120/hover.png) repeat;
}
#cssmenu > ul > li > a > span {
line-height: 18px;
}
#cssmenu > ul > li.active > a,
#cssmenu > ul > li > a:active {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgASvVJGPH6oSYWKMlBqHW_K1qCIttT5dXEE6ycHKhwLCrU807LSji46DVuzPSjjGz78iFd5Zi3uMBi5a3F3873XKwr4SCe28WZrAlN6s77asz4KDFTvJHJjD6_q4zGQYFYxwbiC1AALk2G/h120/highlight-bg.png) repeat;
}
/* Childs */
#cssmenu > ul ul {
opacity: 0;
visibility: hidden;
position: absolute;
top: 120px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheqiunYwzB6vL1i-7XVPkxgQJEJdfNuosQyTYElXcbSCRmMIU4uecxdVz_tbQ3OWBzCaJfO0g1BcGHxZmAnqo7_g1_EJ_VylG7xDKItRbSQO0rlLOFcVRnSDlPb4haSlrpnRLHGw8chfu1/h120/hover.png) repeat;
margin: 0;
padding: 0;
z-index: -1;
-webkit-transition: all 0.35s 0.2s ease-in-out;
-moz-transition: all 0.35s 0.2s ease-in-out;
-ms-transition: all 0.35s 0.2s ease-in-out;
transition: all 0.35s 0.2s ease-in-out;
}
#cssmenu > ul li:hover ul {
opacity: 1;
visibility: visible;
margin: 0;
color: #000;
z-index: 2;
top: 64px;
left: 0;
}
#cssmenu > ul ul:before {
content: '';
position: absolute;
top: -10px;
width: 100%;
height: 20px;
background: transparent;
}
#cssmenu > ul ul li {
list-style: none;
padding: 0;
margin: 0;
width: 100%;
}
#cssmenu > ul ul li a {
padding: 18px 26px;
display: block;
color: white;
font-size: 13px;
text-decoration: none;
text-transform: uppercase;
width: 150px;
border-left: 4px solid transparent;
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
-ms-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
text-shadow: 0 -1px 0 #c28130;
text-shadow: 0 -1px 0 rgba(151, 99, 33, 0.43);
}
#cssmenu > ul ul li a:hover {
border-left: 4px solid #055988;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgASvVJGPH6oSYWKMlBqHW_K1qCIttT5dXEE6ycHKhwLCrU807LSji46DVuzPSjjGz78iFd5Zi3uMBi5a3F3873XKwr4SCe28WZrAlN6s77asz4KDFTvJHJjD6_q4zGQYFYxwbiC1AALk2G/h120/highlight-bg.png) repeat;
}
#cssmenu > ul ul li a:active {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMQzI-DJr4m-IaYhyphenhyphen9XAoFuRxwhRHdvncnsIkn_2Y4QIaSMZM2tDdOueQ6sg_vcXgaSsh2CFcsGglSkSFMiqtRxTjkIocep1nGwy0XMDmbOPFoqNe1snaIQqSKq-yISqJJHHBpXIn3XuSw/h120/menu-bg) repeat;
}
<!—andicang.blogspot.com –>
</style>
<div id='cssmenu'>
<ul>
<li class='active'><a href='index.html'><span>Home</span></a></li>
<li class='has-sub'><a href='#'><span>Products</span></a>
<ul>
<li><a href='#'><span>Widgets</span></a></li>
<li><a href='#'><span>Menus</span></a></li>
<li class='last'><a href='#'><span>Products</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>Company</span></a>
<ul>
<li><a href='#'><span>About</span></a></li>
<li class='last'><a href='#'><span>Location</span></a></li>
</ul>
</li>
<li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
<!— andicang.blogspot.com —>
</div>
Catatan
Warna Merah (#) : isi dengan alamat milik Anda
Maka tampil kode pada jendela gadget seperti gambar dibawah ini. Lalu klik tombol Simpan
Apabila proses berhasil, maka secara otomatis akan tercipta gadget baru pada halaman Anda.
kemudian pada blog Anda telah bertambah gadget baru yang berfungsi untuk menampilkan Menu Horisontal seperti ini.
atau anda bisa melalui edit HTML …….. tetapi sebelum melakukan ini Anda BackUp dulu…. supaya apabila ada kesalahan bisa anda kembalikan kekondisi semula.
Terimakasih Anda telah membaca artikel ini, Selamat Mencoba Semoga Berhasil dan Bermanfaat, jika Anda berkenan, tinggalkan komentar Anda untuk Artikel ini. AndiCang...
Google Follower
0 komentar:
Posting Komentar