Membuat menu dropdown di blog

Pernahkah terpikir dibenak kita "bagaimanakah caranya ya" saat melihat blog teman memiliki menu dropdown yang lebih praktis dan tentunya membuat penambilan blog lebih cantik.. nah jika ingin kita ikuti sj yuk tutorial berikut ini




1. Langkah pertama adalah kita tambahkan widget di bawah tajuk/ header dengan widget HTML/ JavaScript 


2. Setelah itu kita pilih HTML/ JavaScript 


3. Ketikkan sript berikut ini di content



<style type="text/css">
/*CSS MENU*/
#menu{background:#3691ce;color:#eee;height:35px;border-bottom:4px solid #3691ce}
#menu ul,#menu li{margin:0 0;padding:0 0;list-style:none;z-index:9999;}
#menu ul{height:35px}
#menu li{float:left;display:inline;position:relative;font:bold 12px Arial;text-shadow: 0 -1px 0 #000;border-right: 1px solid #444;border-left: 1px solid #111;text-transform:uppercase}
#menu li:first-child{border-left: none}
#menu a{display:block;line-height:35px;padding:0 14px;text-decoration:none;color:#eee;}
#menu li:hover > a,#menu li a:hover{background:#111}
#menu input{display:none;margin:0 0;padding:0 0;width:80px;height:35px;opacity:0;cursor:pointer}
#menu label{font:bold 30px Arial;display:none;width:35px;height:36px;line-height:36px;text-align:center}
#menu label span{font-size:12px;position:absolute;left:35px}
#menu ul.menus{height:auto;overflow:hidden;width:180px;background:#111;position:absolute;z-index:99;display:none;border:0;}
#menu ul.menus li{display:block;width:100%;font:12px Arial;text-transform:none;}
#menu li:hover ul.menus{display:block}
#menu a.home {background: #c00;}
#menu a.sub{padding:0 27px 0 14px}
#menu a.sub::after{content:"";width:0;height:0;border-width:6px 5px;border-style:solid;border-color:#eee transparent transparent transparent;position:absolute;top:15px;right:9px}
#menu ul.menus a:hover{background:#333;}
</style>
<!--Mulai Area Menu-->
<nav id="menu">
<input type="checkbox" />
<label>≡Navigation</label>
<ul>
<li><a class="Home" href="http://cacaraica.blogspot.com/">Home</a></li>
<li><a href="https://cacaraica.blogspot.com/p/login.html">Login</a></li>
<li><a href="#">Kontak</a></li>

<!--Mulai Menu Dropdown-->
<li><a class="sub" href="#">Menu</a>  <ul class="menus">
<li><a href="#" title="Kode Warna HTML">Sub Menu 0</a></li>
<li><a href="#">Blog Tutorial</a></li>
<li><a href="#">Kajian</a></li>
<li><a href="#">Sekolah</a></li>

</ul>
</li>
<!--Selesai Menu Dropdown-->  </ul>
</nav>
<!--Area Menu Selesai-->



4. Nah hasil akhirnya seperti ini ya


Posting Komentar

0 Komentar