Cara Membuat Menu Navigasi Keren Di Bawah Header

Cara Membuat Menu Navigasi Keren Di Bawah Header - ketemu lagi dengan saya setelah sekian banyak saya share tutorial blogger kali ini saya ingin berbagi Cara Membuat Menu Navigasi Keren Di Bawah Header bagi temen2 yang berminat bisa ikuti tutorialnya di bawah ini.

Langkah awal yg harus anda lakukan cari kode ]]></b:skin> Atau </style> dan letakkan kode di bawah ini tepat di atas kode ]]></b:skin> atau </style>

#nav {
clear: both;
width: 940px;
height: 40px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9Y8Welfpie099LyFTsSZK-nccJfhYI6KKI_kyUrZkwaHPGhVUU_y8BLTyDSqcGO9jHky5UPV5QIAswp_8koKlXImnm8dKnhayKIT9MdeX6d2zS6zhV_EP0LyF5K4KU7Qcvh0CqpNbtw/s1600/nav.png);
color: #555555;
margin: 0;
padding: 0;
border-left: 1px solid #DDDDDD;
border-right: 1px solid #DDDDDD;
border-bottom: 1px solid #CCCCCC;
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 0px;
-khtml-border-radius: 10px;
-webkit-border-top-left-radius: 0px;
-webkit-border-top-right-radius: 0px;
-webkit-border-bottom-left-radius: 0;
-webkit-border-bottom-right-radius: 0;
}
#nav .wrap {
}
#nav ul {
width: 100%;
float: left;
list-style: none;
margin: 0;
padding: 0 0 0 10px;
}
#nav li {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#nav li a {
color: #555555;
display: block;
font-size: 12px;
margin: 0;
padding: 10px 20px 10px 20px;
text-decoration: none;
text-shadow: #FFFFFF 1px 1px;
border-right: 1px solid #DDDDDD;
position: relative;
}
#nav li a:hover, #nav li a:active, #nav .current_page_item a {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizA6ii2hWifDkNI3oK77g5wiVbdetQvXPvZTh1r8T8DiHi8n3Me8bX2yViQT4foo3q2JTcuXDKOTuetYvrGBgLRZENzVdXXRSDVV-7fd3CR0CU3dmuUj6GXaPbb1sCcmCA__Fh9AJnikE/s1600/navhov.png);
color: #555555;
}
#nav li a.sf-with-ul {
padding-right: 20px;
}
#nav li a .sf-sub-indicator {
display: block;
width: 10px;
height: 10px;
text-indent: -9999px;
overflow: hidden;
position: absolute;
top: 21px;
right: 5px;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #E8E8E8;
color: #555555;
width: 158px;
font-size: 11px;
margin: 0;
padding: 6px 10px 6px 10px;
border-left: 1px solid #DDDDDD;
border-right: 1px solid #DDDDDD;
border-bottom: 1px solid #DDDDDD;
position: relative;
}
#nav li li a:hover, #nav li li a:active {
background: #FFFFFF;
}
#nav li li a .sf-sub-indicator {
background: url(images/arrow-right.png);
top: 10px;
}
#nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 180px;
margin: 0;
padding: 0;
}
#nav li ul a {
width: 160px;
}
#nav li ul a:hover, #nav li ul a:active {
}
#nav li ul ul {
margin: -33px 0 0 179px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfHover ul ul, #nav li.sfHover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfHover ul, #nav li li.sfHover ul, #nav li li li.sfHover ul {
left: auto;
}
#nav li:hover, #nav li.sfHover {
position: static;
}
#nav li.right {
float: right;
text-shadow: #FFFFFF 1px 1px;
margin: 0 15px 0 0;
padding: 10px 10px 0 0;
}
#nav li.right a {
display: inline;
margin: 0;
padding: 0;
border: none;
background: none;
color: #555555;
font-weight: normal;
text-decoration: none;
text-shadow: #FFFFFF 1px 1px;
}
#nav li.right a:hover {
color: #555555;
text-decoration: underline;
}
#nav li.date {
padding: 10px 10px 0 0;
}

Selanjutnya cari kode letakan kode di bawah ini di bawah kode header.

<div>
<div itemscope='' itemtype='http://data-vocabulary.org/Review'>
<div class='container'>
<div class='widget-area'>
<div id='nav'>
<ul class='nav superfish'>
<li class='Template'><a class='Template-link' href='http://sociti.blogspot.com/search/label/Template'>Template</a></li>
<li class='page_item page-item-374'><a href='http://sociti.blogspot.com/search/label/Tips%20dan%20Trik'>Tips dan Trik</a></li>
<li class='page_item page-item-374'><a href='http://sociti.blogspot.com/search/label/Kata%20kata'>Kata Kata</a></li>
<li class='page_item page-item-374'><a href='http://sociti.blogspot.com/search/label/Software'>Software</a></li>
<li class='page_item page-item-374'><a href='http://sociti.blogspot.com/search/label/Review' title='Review'><b>Review</b></a></li>
  <li class='right rss'><a href='/' rel='nofollow'></a></li>
</ul></div>
</div></div>
</div></div>

Lalu save template anda.

Bagai mana untuk Cara Membuat Menu Navigasi Keren Di Bawah Header cukup mudah bukan sekian dari saya semoga tutorial di atas bisa bermanfaat buat temen2 semua.