Thursday 17 September 2015

CARA MEMBUAT MENU PADA BLOG



setalah browsing yang lumayan lama, akhirnya saya menemukan blog yang bisa membuat saya mengerti dan faham akan tata cara membuat menu pada blog. dan bagi agan-agan yang belum mengerti boleh ikuti cara membuat menu pada blog.

hal yang pertama yang kamu lakukan adalah pasuk pada blog mu kemudian di Tata letak Klik Widget Kemudian Klik HTML sehingga tampilannya dapat kamu lihat. Copy paste tulisan ini.

<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="http://evazainuddin.blogspot.co.id/2015/09/tentang-saya.html">About</a></li>
<li><a href="http://evazainuddin.blogspot.co.id/search/label/VIDIO%20MENARIK">VIDIO MENARIK</a></li>
<li><a href="http://evazainuddin.blogspot.co.id/search/label/INTERNET">INTERNET</a></li>
<li><a href="http://evazainuddin.blogspot.co.id/search/label/MS.OFFICE">MS.OFFICE</a></li>
<li><a href="#">PRIBAHASA</a></li>
<li><a href="#">PUISI</a></li>
<!-- Mulai Area Menu Dropdown -->
<li><a class="sub" href="#">Menus</a>  <ul class="menus">
<li><a href="#" title="Kode Warna HTML">Menus 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-->

Pada  tulisan http://evazainuddin.blogspot.co.id/2015/09/tentang-saya.html dan bisa kamu buat link alamt blog mu. 
sehingga tampilannya bisa kamu lihat seperti pada blog saya.. terima kasih semoga ini bermanfaat bagi agan-agan semua

No comments: