Categories
- Activator
- BackUp
- CAD Collection 2D & 3D
- CD DVD
- Compression
- Converter
- Desktop
- Driver
- Freeware
- Games
- Graphic
- Internet
- MacOSX
- Multimedia
- Office
- Operating System
- Security
- Software Indonesia
- Support Developer
- Utilities
- Web Design
- Apple
- All Software PLUGIN & TEMPLATE
- PlugIn Template MUSE
- PlugIn Temp Blogger
- PlugIn Temp WordPress
- All PlugIn Template Tutorial
- Tutorial Web Design
- Tutorial Blogger
- Book Magazine
- Tips & Trik Excel
- All Other MOBILE PHONE
- iOS
- Android
- Windows
- Nokia
- Black Berry
- All Mobile Phone Uncategorized
- Islam
- Kesehatan
- Font
- Contoh Surat
- Subtitle
- Musik Video
- Lyrics
- All unrcategorized
Labels
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...
Cari Blog Ini
Entri Populer
- 001. Koleksi Door (Door Collection)_AndiCang_01 Keterangan : Pintu 600, Pintu 650, Pintu 700, Pintu 800, Pintu 900, Pintu 1000. P...
- 01. CRYPTO Actions PlugIn For Autoplay Media Sudio Klik Show untuk ScreenShoot Klik Show untuk Detail "This plugin expands th...
- Legacy Family Tree Deluxe 7Introduction: Legacy Family Tree Deluxe 7.5.0.278 Legacy Family Tree Deluxe 7 Legacy Family Tree Deluxe 7.5.0....
- EPUB Converter is a tool that offers an easy, efficient and quick way to help you convert EPUB files to other formats, and vice versa. EPUB...
Blogger+Followers

0 komentar:
Posting Komentar