Menu

Home Sites YTube Loker
Wow, Sudah Larut Malam Anda Masih Sempat Berkunjung, Terima Kasih!

Selasa, 24 November 2015

Tutorial Cara Membuat Menu Di Blog Dengan Mudah

Pertama yang harus di lakukan sbb:
  1. Login www.blogger.com
  2. Klik menu tata letak
  3. Klik tambah gadget
  4. Klik HTML/Javaskript
Kemudian Copy semua Scrtpt di bawah ini lalu SIMPAN.

<style type="text/css">
/*CSS MENU*/
#menu{background:#343434;color:#eee;height:35px;border-bottom:4px 
solid #eeeded}
#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="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Daftar Isi</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Login Admin</a></li>
<!-- Mulai Area Menu Dropdown -->
<li><a class="sub" href="#">Menus</a>  <ul class="menu5">
<li><a href="#" title="Kode Warna HTML">Menu5 1</a></li>
<li><a href="#">Page Protected</a></li>
<li><a href="#">Menus2</a></li>
<li><a href="#">Menus 3</a></li>
<li><a href="#" target="_blank">Menus 4</a></li>
<li><a href="#">Menus 5</a></li>
</ul>
</li>
<!-- Area Dropdown Selesai-->  </ul>
</nav>
<!-- Area Menu Selesai--> 
 
Selesai Semoga bermanfaat 

Tidak ada komentar:

Posting Komentar