Cara Membuat Menu Bar Di Blog

Pada postingan pertama saya kali ini,saya akan memberikan tutorial membuat menu bar
apa itu menu bar?menu bar adalah menu yang menuntun kita untuk mencari link di blog
agar tidak susah,Langsung saja simak tutorialnya

1. Buka Blogger Home kalian.
2. Kemudian pilih Template » Edit HTML.
3. Lalu Cari Kode <b:skin><![CDATA[/*
4. Kemudian Copy Kode dibawah ini dan Paste di BAWAH kode <b:skin><![CDATA[/*

#menu{background:#444;border:1px solid #222;color:#fff;height:42px;font-family:'Oswald', Arial, sans-serif;width:970px;margin:0 auto;}
#menu ul,#menu li{margin:0 auto;padding:0 0;list-style:none}
#menu ul{height:42px;width:980px}
#menu li{float:left;display:inline;position:relative;font:bold 14px Arial;text-transform:uppercase;font-weight:normal}
#menu a{display:block;line-height:42px;padding:0 14px;text-decoration:none;color:#fff;font-family:'Oswald', Arial, sans-serif;text-shadow: 0 -1px 0 #222;}
#menu li a{border-right:1px solid #222;}
#menu li a:hover {color:#fff;background-color:#222;-webkit-transition: all 0.3s ease-in;-moz-transition: all 0.3s ease-in;-o-transition: all 0.3s ease-in;transition: all 0.3s ease-in;}
#menu input{display:none;margin:0 0;padding:0 0;width:80px;height:30px;opacity:0;cursor:pointer}
#menu label{font-size:20px;display:none;width:35px;height:20px;line-height:20px;text-align:center;color:#fff}
#menu label span{font:normal 14px Oswald;position:absolute;left:35px;}
#menu ul.menus{height:auto;overflow:hidden;width:180px;background:#444;border-top:1px solid #222;border-left:1px solid #000;border-bottom:1px solid #000;position:absolute;z-index:99;display:none;left:-1px;}
#menu ul.menus li{display:block;width:100%;font-size:13px;text-transform:none;text-shadow:none}
#menu ul.menus a{color:#fff;text-transform:uppercase}
#menu li:hover ul.menus{display:block}
#menu a.dropdown{padding:0 27px 0 14px}
#menu a.dropdown::after{content:"";width:0;height:0;border-width:6px 5px;border-style:solid;border-color:#f0f0f0 transparent transparent transparent;position:absolute;top:16px;right:9px}
#menu ul.menus a:hover{background:#222;color:#fff}

5. Kemudian Copy Kode HTML dibawah Kode <div id='header-wrapper'>

<nav id='menu'>
<ul>
<li><a href='#'>Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Sitemap</a></li>
<li><a href='#'>Disclaimer</a></li>
<li><a class='dropdown'>Contact</a>
<ul class='menus'>
<li><a href='#'>Facebook</a></li>
<li><a href='#'>Twitter</a></li>
<li><a href='#'>Pinterest</a></li>
</ul>
</li>
<li><a href='/'></a></li>
</ul>
</nav>

Keterangan
6.Ganti Tanda Pagar (#) Dengan Link Agan
7.Kemudian Save/Simpan.

Demikian Artikel Zuckberg Kali Ini Semoga Bermanfaat Untuk Agan Semua