Dropdown menu yang akan kita buat berbeda dengan menu dropdown pendahulunya. kali ini dropdown menu tampil keren dan menarik. posisi ploating sehingga akan selalu terlihat dan mudah diases pengunjung blog. Contoh Menu Navigasi yang akan kita buat bisa sobat Dapur Tutorial Blogspot dan Seo Lihat dibawah ini. jika ingin melihat Demonya Klik saja pada Teks Link Demo dibawah gambar
Nah gimana keren kan ?. Bagai mana caranya, langsung saja ikuti resep dari Master Chef berikut ini :
- Pastikan kamu sudah login ke Dashbord Blog kamu
- Dari Dashbord blog kamu Pilih Templete untuk mengakses halaman Edit HTML ( Baca : Cara Mengakses Halaman Edit HTML Blogspot)
- Jangan lupa untuk Download Lengkap Template terlebih dahulu ( Baca : Cara Back-Up dan Upload Template Blogger)
- Jika semua sudah sekarang Cari Kode ]]>
/* Horyzontal Droupdown menu
----------------------------------------------- */
#top-wrapper{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw66evGSf_p_lSan68sGI0ap5Ga3Ln3DUyUe17CZRyjp26P5QZAmJebxh7cHs94nXKAKJDHAderlBl-XGHAkjXI2sdRj_a6vZupLl-jKTQJ8betWiZzAuPcStinE8venDDAsXoSDmKHkwj/s1600/menutop.png) repeat-x;width:100%;margin:0 auto;padding:0 auto;-moz-box-shadow:0 3px 3px 3px rgba(0,0,0,0.4);-webkit-box-shadow:0 3px 3px 3px rgba(0,0,0,0.4);border-bottom:1px solid #444;border-top:3px solid #f1c822}
#topbar{width:980px;height:40px;margin:0 auto}
#top{width:100%}
#top,#top ul{list-style:none;font-family:Arial, serif;margin:0;padding:0}
#top a{display:block;text-decoration:none;font:normal 11px Arial;text-transform:none;color:#CECECF;border-right:1px solid #484747;border-left:1px solid #191919;padding:7px 10px 7px}
#top a.arrow{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFVZk6tMNGQlcqaDMGkApytB7MJ0_tNZXFkKo4g7hfIYQBWgGGn9ilNb-V_qYf0SwGeelPR6YZTuxg0gu1prNP1PHA23-o5rQfso0gKsYM7tjS5KC9OsN0fQALfrJW7VHDD8epi8XQvkE/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:7px 24px 7px 10px}
#top li{float:left;position:static;width:auto}
#top li ul,#top ul li{width:170px}
#top ul li a{text-align:left;color:#fff;font-size:12px;font-weight:400;text-transform:none;font-family:Arial;border:none;padding:5px 10px}
#top li ul{z-index:100;position:absolute;display:none;background:#222;padding-bottom:0px;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.4);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.4)}
#top li:hover a,#top a:active,#top a:focus,#top li.hvr a{background-color:#222;color:#fff}
#top li:hover ul,#top li.hvr ul{display:block}
#top li:hover ul a,#top li.hvr ul a{color:#edfdfd;background-color:transparent;text-decoration:none}
#top li ul li.hr{border-bottom:1px solid #333;border-top:1px solid #000;display:block;font-size:1px;height:0;line-height:0;margin:0px 0}
#top ul a:hover{background-color:#555!important;color:#fff!important;text-decoration:none}
#top a span,#top a.arrow span{font:bold 12px Arial;color:#888;display:block;line-height:16px;text-transform:uppercase;text-shadow: 1px 2px 2px #000}
#top li:hover a span,#top li:hover a.arrow span{color:#f1c822}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{display:inline-block}
#inner{padding-top:40px;}
#fixed {position:fixed;top:0;left:0;width:100%;height:40px;z-index:999;}
#fixedinner{text-align:center;background:transparent;height:40px;position:relative;z-index:999;}
* html, * html body{overflow-y:hidden;height:100%;}
* html #fixedinner{margin-right:-143px;voice-family: "\"}\""; voice-family:inherit; }
* html #fixedinner{margin-right:17px;}
* html #fixed {position:absolute;}
(disini nanti letak kode menu dropdown)
Jika Tidak Ketemu Kode Diatas Cari Kode Yang Ini
(disini nanti posisi kode menu dropdown)
0 comments:
Speak up your mind
Tell us what you're thinking... !