© 2014 by Andi Cang. Selamat Datang di Website ANDICANG Anda bebas masuk ke situs ini menggunakan satu gambar dan penjelasan singkat untuk link kembali ke posting apapun. publikasi ulang posting secara utuh dengan mencantumkan link pemilik andicang.blogspot.com
Kamis, 01 Mei 2014

Cara Membuat Menu Horisontal Drop Down Keren di Blog

Nav_hor

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.

 

Nav_hor

 

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...

0 komentar:

Posting Komentar

Semoga Bermanfaat. Nikmati koleksi saya dan sering-seringlah berkunjung lagi, saya akan melakukan yang terbaik agar koleksi ini senantiasa selalu menawan buat Anda. Terima kasih atas waktu Anda!

Cari Blog Ini

Entri Populer

Blogger+Followers

Google Follower

Back To Top