Menu Navigasi DropDown Dibawah Header

 

Menubar dropdown adalah sebuah baris navigasi yang berada tepat dibawah header. Menubar ini berfungsi untuk mempermudah pengunjung dalam mengexplorasi blog kita. Untuk menubar kali ini saya akan membagikan menubar yang saya pake di blog saya. Sebenernya ada lebih dari 20 menubar yang saya ketahui. Ntar saya akan membagikannya dikesempatan berikutnya. Jika anda tertarik, ikuti step by stepnya :

1. Masuk ke Template > Edit

2. Simpan kode dibawah ini tepat diatas ]]></b:skin>

/* NAVIGATION ------------------*/

#nav {    display:inline-block;    width:1190px;    height: 47px;    margin: 6px 0px 0px 10px;    padding-left:4px;border-top:3px solid #eee;    background:transparent;

    /*some css3*/    -moz-border-radius:10px;    -webkit-border-radius:10px;    box-shadow:0 2px 2px rgba(0,0,0, .5);    -moz-box-shadow:0 2px 2px rgba(0,0,0, .5);    -webkit-box-shadow:0 2px 2px rgba(0,0,0, .5);}#nav li {    margin-top:2px;    margin-right:2px;    float:left;    position:relative;    list-style:none;}#nav a {    font-weight:bold;    color:#333333;    text-decoration:none;    display:block;    padding:8px 15px;    border:1px solid #eee;        /*some css3*/    -moz-border-radius:10px;    -webkit-border-radius:10px;}

/* selected menu element */    #nav .current a, #nav li:hover &gt; a {    background:#7788aa url(../images/bg.png) repeat-x 0 -20px;    color:#000;    border-top:1px solid #f8f8f8;

    box-shadow:0 2px 2px rgba(0,0,0, .7); /*some css3*/    -moz-box-shadow:0 2px 2px rgba(0,0,0, .7);    -webkit-box-shadow:0 2px 2px rgba(0,0,0, .7);    text-shadow:0 2px 2px rgba(255,255,255, 0.7);}

/* sublevels */#nav ul li:hover a, #nav li:hover li a {    background:none;    border:none;    color:#000;}#nav ul li a:hover {    background:#335599 url(../images/bg.png) repeat-x 0 -100px;    color:#fff;

    /*some css3*/    -moz-border-radius:10px;    -webkit-border-radius:10px;    text-shadow:0 2px 2px rgba(0,0,0, 0.7);}

#nav ul li:first-child &gt; a {    -moz-border-radius-topleft:10px; /*some css3*/    -moz-border-radius-topright:10px;    -webkit-border-top-left-radius:10px;    -webkit-border-top-right-radius:10px;}#nav ul li:last-child &gt; a {    -moz-border-radius-bottomleft:10px; /*some css3*/    -moz-border-radius-bottomright:10px;    -webkit-border-bottom-left-radius:10px;    -webkit-border-bottom-right-radius:10px;}

/* drop down */#nav li:hover &gt; ul {    opacity:1;    visibility:visible;}#nav ul {    opacity:0;    visibility:hidden;    padding:0;    width: 185px;    position: absolute;    background:#aabbcc url(../images/bg.png) repeat-x 0 0;    border:1px solid #444;

    border-radius:10px; /*some css3*/    -moz-border-radius:10px;    -webkit-border-radius:10px;    box-shadow:0 2px 2px rgba(0,0,0, .5);    -moz-box-shadow:0 2px 2px rgba(0,0,0, .5);    -webkit-box-shadow:0 2px 2px rgba(0,0,0, .5);

    -moz-transition:opacity .25s linear, visibility .1s linear .1s;    -webkit-transition:opacity .25s linear, visibility .1s linear .1s;    -o-transition:opacity .25s linear, visibility .1s linear .1s;    transition:opacity .25s linear, visibility .1s linear .1s;}#nav ul li {    float:none;    margin:0;}#nav ul a {    font-weight:normal;    text-shadow:0 2px 2px rgba(255,255,255, 0.7);}#nav ul ul {    left:160px;    top:0px; top:0px;}#nav ul li:first-child a:after{    content: &#39;&#39;;    position: absolute;    left: 30px;    top: -8px;    width: 0;    height: 0;    border-left: 5px solid transparent;    border-right: 5px solid transparent;    border-bottom: 8px solid #444;}

#nav ul li:first-child a:hover:after{    border-bottom-color: #0186ba;}  /* =============================Search Box============================= */#srcnt {  float:right;  margin:0;  padding-top:8px;    padding-right:13px;  width:auto;  overflow:hidden;}#search input[type=&quot;text&quot;] {  border: 1px solid #6699FF;  border-radius:3px;  color: #777;  width: 160px;  padding: 8px;  font:normal 10px Verdana, Arial;  text-transform:uppercase;  -webkit-transition: all 0.5s ease 0s;  -moz-transition: all 0.5s ease 0s;  -o-transition: all 0.5s ease 0s;  transition: all 0.5s ease 0s;}#search input[type=&quot;text&quot;]:focus {  width: 200px;}

Keterangan : (perhatikan warna bukan tulisan ya)

• Kode berwarna merah adalah ukuran dari menu navigasi dan menu search

3.  Simpan kode dibawah ini tepat diatas <div id='content-wrapper'>

<ul id='nav'>

<li class='current-cat'><a expr:href='data:blog.homepageUrl'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvRatJXlLwmFekBlcueTtxSBq9vrPWedMndcJI-JfYVmCs9Wp2Amfj0TZe1Hate01Lzu2irntcDf90tRjhYh9ydCMLEgo8rmOsM96aZ1dR8LGMm0DR3aja954uXzMB4SFxypzhEJTu2Rk/s1600/Home.png' style='padding:0px;'/>Home</a></li>

<li><a href='LinK'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeZa-Jki_3rOM8R22HoPHNm9EZabJDvtHGDylqppZPflsxbY1gvxg1JuBLlpb4ebi94WMbyKHBQ9lOxSXf-ZkGFJ3hO-BO2gh9hTpApRL672fH3M5kZ3OkwMi6XieQzdCMIqZfAnwc29Q/s1600/PC.png' style='padding-right:3px;'/>Computer</a>

<ul>

<li><a href='http://ujangyoyo.blogspot.com/search/label/PC%20Aplication'>Aplication</a></li>

<li><a href='http://ujangyoyo.blogspot.com/search/label/Bluestacks'>Bluestacks</a></li>

<li><a href='http://ujangyoyo.blogspot.com/search/label/PC%20Game'>Games</a></li>

<li><a href='http://ujangyoyo.blogspot.com/search/label/PC%20Tricks'>Tips dan Trick</a></li>

<li class='hr'/>

</ul>

</li>

<li><a href='LinK'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsRFTmopnvWdGE35fMKEaxwfSs2vGrFkUUWRHjzJjOWuQzTaSKRiVRe0mAItWZxZn4jSFpcDGSjh0a1C195criXigc3NtztLaOU2rTJRLNrfwaXP3s4mfohEwGF0p1mb1GIzjCKzOr3xc/s1600/android.png' style='padding-right:3px;'/>Android</a>

<ul>

<li><a href='http://ujangyoyo.blogspot.com/search/label/Android%20Aplication'>Aplication</a></li>

<li><a href='http://ujangyoyo.blogspot.com/search/label/Android%20Games'>Games</a></li>

<li><a href='http://ujangyoyo.blogspot.com/search/label/Android%20Article'>Tips dan Trick</a></li>

<li class='hr'/>

</ul>

</li>

<li><a href='http://ujangyoyo.blogspot.com/search/label/Tutorial%20Blog'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidlmUu_8V23PPqPL5cxAkAipAm9NqY-FizXkj66kE0BiHU_DjbaGlIxOnUbBVL09NlGcZAmQVyx57lt-Xcx3LQZoSJTUjuhrEyxP400GFiRRTHX7aVwom4AP2sYH7kvNyoBZLSkRjRwOE/s1600/blogger.png' style='padding-right:3px;'/>Blogger</a>

<ul>

<li><a href='http://ujangyoyo.blogspot.com/search/label/Tutorial%20Blog'>Tutorial Blog</a></li>

<li><a href='http://ujangyoyo.blogspot.com/search/label/SEO'>SEO</a></li>

</ul>

</li>

<li><a href='LinK'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiEfrXVeIoD58177WE9K6h0MSVA2z3vPGadWAtijYbdSQKU1KAIZlNppWmtvsGjV9tHWPjO5zP9K4kg3klSzkHqh9jTejsrr-WCghqX-bCjrDA3Lf0-jwH5wZSKhxkY3J0w3oBUfmcIIQ/s1600/Knowledge.png' style='padding-right:3px;'/>Knowladge</a>

<ul>

<li><a href='http://ujangyoyo.blogspot.com/search/label/Bahasa%20Indonesia'>B. Indonesia</a></li>

<li><a href='http://ujangyoyo.blogspot.com/search/label/Bahasa%20Inggris'>B.Inggris</a></li>

<li><a href='http://ujangyoyo.blogspot.com/search/label/Islam'>Islam</a></li>

<li><a href='http://ujangyoyo.blogspot.com/search/label/Matematika'>Matematika</a></li>

<li><a href='http://ujangyoyo.blogspot.com/search/label/Tips%20dan%20Info'>Tips dan Info</a></li>

</ul>

</li>

<li><a href='http://ujangyoyo.blogspot.com/search/label/Make%20Money'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCiE5gnw_ocEpXxf0ZtffCVKIusapneCPTsBgI1LZIMlTUoe6x4qOzYflXJzyGYUJA-agj11P3dTANq4ENtO4xKxj-LTMJdw8hieI6qpqG0H_uUc9Jw7gcLkBxaWsHF6803jWVsPhd5fs/s1600/money.png' style='padding-right:3px;'/>Make Money</a>

</li>

<li><a href='http://ujangyoyo.blogspot.com/2013/03/sitemap-blog.html'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioST49_aloaAFd5Cmcmt2EisQ-DO01U4WtLzXp1mLFPoLRiEbuX3YFhtCD8M1CkApVw8XUE-DSQOA35CONeZ2oK9yi_zNdYcWCgzmXkB3l0n0zpoQdogKFbEmTGysxWq8nQ6nh7JbDMjo/s1600/Sitemap.png' style='padding-right:3px;'/>Daftar Isi</a>

</li>

<li><a href='http://ujangyoyo.blogspot.com/2013/03/pasang-iklan-murah-di.html'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-fGaCaZnuK-l-3RrYJ4SOJgJFx_IKCFYRMQOUpJjZDVownidKcONu2MZeHdKl-eS3iB0wHYteVZDWdsc0jGJZ73qtX1X2fio2xCJDsUkKM1XBU7oEYuXpc9gjpEJkAg4dzZxJsfmq7Ig/s1600/Iklan.png' style='padding-right:3px;'/>Pasang Iklan</a>

</li>

<li class='current-cat'><a href=LinK'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpEDTmpmdOMFye0ZEZRZAZF4ddPQuo8czAoFUOPwE_yMW3Y6k-ZXIJMKrskINXJa1LW-hx5sVWtt08kNV4xp6EzKAS4U0IYYCVSq5pJc3RMvxW6GWKLGkMh98vU0mg_cTgHSO7S_8xtZs/s1600/Help.png' style='padding-right:3px;'/>Help</a>

<ul>

<li><a href='http://ujangyoyo.blogspot.com/2012/12/about-us.html'>About Us</a></li>

<li><a href='http://ujangyoyo.blogspot.com/2012/12/announcement.html'>Anouncement</a></li>

<li><a href='http://ujangyoyo.blogspot.com/2012/12/contact-me.html'>Contact Us</a></li>

<li><a href='http://ujangyoyo.blogspot.com/2013/04/privasi-policy.html'>Privasi Policy</a></li>

</ul>

</li>

  <div id='srcnt'>

<form action='/search' id='search' method='get'>

  <input name='q' placeholder='looking for something?' size='40' type='text'/>

</form>

  </div>

</ul>

Keterangan : (perhatikan warna bukan tulisan ya)

• Kode berwarna biru adalah alamat url gambar, anda dapat mengkreasikannya tetapi dengan syarat ukurannya harus 32x32 px
• Kode berwarna orange adalah alamat url yang dituju (url dari menu).
• Kode berwarna Hijau adalah nama dari menu anda.

 Lalu Pilih pratinjau, jika sudah 100% jadi
selanjutnya pilih simpan
###ENJOY....