Hi , all
Kesempatan kali ini saya ingin memberi tau tentan cara menambahkan menu navigasi dropdown pada blog.
Example :
cara menambahkan menu navigasi dropdown pada blog :
1. Login Blogger
2. Pilih mode Template > Edit Html
3. Cari code
<body>
4. Letakkan code berikut di bawah code
<body>
--------------------------------------------------------------------------
<nav id='menu'>
<input type='checkbox'/>
<label>≡<span>Navigasi Menu</span></label>
<ul>
<li><a href='URL KALIAN'>Home</a></li>
<li><a href='URL KALIAN'>TEKS KALIAN</a></li>
<li><a href='URL KALIAN'>TEKS KALIAN</a></li>
<li><a href='URL KALIAN'>TEKS KALIAN</a></li>
<li><a href='URL KALIAN>TEKS KALIAN</a></li>
<li><a href='URL KALIAN'>TEKS KALIAN<font size='1'>▼</font></a>
<ul class='menus'>
<li><a href='http://www.unandmen.blogspot.com'>TEKS KALIAN</a></li>
<li><a href='URL KALIAN'>TEKS KALIAN</a></li>
<li><a href='URL KALIAN'>TEKS KALIAN</a></li>
</ul>
</li>
<li><a href='URL KALIAN'>TEKS KALIAN</a></li>
</ul>
</nav>
--------------------------------------------------------------------------
5. Setelah sudah di masukan , lalu kalian cari lagi code berikut
<b:skin>
6. Letakkan code berikut di bawah code
<b:skin>
--------------------------------------------------------------------------
/*-----Responsive Menu ----*/
body {margin: 0px;}
#menu {background: #198dc9;color: #eee;height: 40px;margin: 2px 0px 0px 5px;width: 99%;}
#menu ul,#menu li{margin:0 auto;padding:0 0;list-style:none}
#menu ul{height:45px;width:100%}
#menu li{float:left;display:inline;position:relative;font:bold 0.9em Arial;text-transform: uppercase;}
#menu a{display: block;line-height: 40px;padding: 0 14px;text-decoration: none;color: #FFF;}
#menu li a:hover{
color: #E4E4E4;-webkit-transition: all .1s ease-in-out;-moz-transition: all .1s ease-in-out;-ms-transition: all .1s ease-in-out;-o-transition: all .1s ease-in-out;transition: all .1s ease-in-out;
background: #c00;}
#menu input{display:none;margin:0 0;padding:0 0;width:80px;height:30px;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:16px;position:absolute;left:35px}
#menu ul.menus{height: auto;overflow: hidden;width: 170px;background: #50B7DC;position: absolute;z-index: 99;display: none;}
#menu ul.menus li{display: block;width: 100%;font:normal 0.9em Arial;text-transform: uppercase;border-bottom: 1px dashed #31AFDB;}
#menu a.home {background: #c00;padding: inherit;}
#menu ul.menus a{color: #FFF;line-height: 35px;}
#menu li:hover ul.menus{display:block}
#menu ul.menus a:hover{background: #c00;color: #FFF;-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;-ms-transition: all .1s ease-in-out;-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;}
@media screen and (max-width: 800px){
#menu{position:relative}
#menu ul{background:#111;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none}
#menu ul.menus{width:100%;position:static;padding-left:20px}
#menu li{display:block;float:none;width:auto; font:normal 0.8em Arial;}
#menu input,#menu label{position:absolute;top:0;left:0;display:block}
#menu input{z-index:4}
#menu input:checked + label{color:white}
#menu input:checked ~ ul{display:block}
}
--------------------------------------------------------------------------
7. Jika sudah, Kalian Save Template / Simpan Template
Sekian tutorial
cara menambahkan menu navigasi dropdown pada blog .
Semoga bermanfaat dan Semoga Berhasil ^_^
Jika kalian keliru mohon masukkan keluhan kalian di komentar bawah , Terimakasih ^_^
Writer : KD BOOK
Sumber : KD BOOK , kedebook.blogspot.com
Bila kalian copas artikel saya , biasakan memberi sumber artikelnya.