Menu Hijau Navigasi Dengan CSS Untuk Blogger

Dalam tutorial ini saya akan menjelaskan cara membuat Menu Hijau Navigasi Dengan CSS
Untuk Blogger. Anda dapat menambahkan menu keren ini dalam beberapa waktu.
Semoga menu navigasi ini bekerja dengan baik dengan setiap browser internet modern.
Ini termasuk baik menu dengan drop down. Jadi, Anda dapat menghubungkan dengan
halaman utama Anda dengan menggunakan CSS dalam menu navigasi.

Demo

Menu Hijau Navigasi Dengan CSS Untuk Blogger

1. Masuk ke Blogger anda lalu pilih Dashboard Template
2. Cari kode ]]></b:skin>

3. Berikut ini kodenya yang harus disimpan dibawah kode no 2

CSS

 /* CSS3 Code menu and visit nulispost.com */
 .nulispost-menu{width:950px;background: #7cae15;color:#eee;text-shadow: 1px 1px 1px #495505;display:inline-block;-moz-box-shadow: 3px 3px 4px #007308;
-webkit-box-shadow: 3px 3px 4px #007308;box-shadow: 3px 3px 4px #007308;-moz-border-radius-topleft: 8px;-moz-border-radius-topright:8px;-moz-border-radius-bottomleft:8px;-moz-border-radius-bottomright:8px;-webkit-border-top-left-radius:8px;-webkit-border-top-right-radius:8px;-webkit-border-bottom-left-radius:8px;-webkit-border-bottom-right-radius:8px;border-top-left-radius:8px;border-top-right-radius:8px;border-bottom-left-radius:8px;border-bottom-right-radius:8px;}
.nulispost-menu ul{width:950px;padding:0;margin:0 auto}
.nulispost-menu li:first-child a{padding:7px 10px 3px}
.nulispost-menu li{list-style:none;display:inline-block;float:left}
.nulispost-menu li a{background:#7cae15 right no-repeat;color:#fff;display:block;font:16px Oswald;position:relative;text-decoration:none;padding: 8px 15px;-moz-border-radius-topleft: 8px;-moz-border-radius-topright:8px;-moz-border-radius-bottomleft:8px;-moz-border-radius-bottomright:8px;-webkit-border-top-left-radius:8px;-webkit-border-top-right-radius:8px;-webkit-border-bottom-left-radius:8px;-webkit-border-bottom-right-radius:8px;
border-top-left-radius:8px;border-top-right-radius:8px;border-bottom-left-radius:8px;border-bottom-right-radius:8px;}
.nulispost-menu li a:hover{background:#333;color:#fff;text-shadow: 1px 1px 1px #000;-moz-border-radius-topleft: 8px;-moz-border-radius-topright:8px;-moz-border-radius-bottomleft:8px;-moz-border-radius-bottomright:8px;-webkit-border-top-left-radius:8px;-webkit-border-top-right-radius:8px;-webkit-border-bottom-left-radius:8px;-webkit-border-bottom-right-radius:8px;
border-top-left-radius:8px;
border-top-right-radius:8px;
border-bottom-left-radius:8px;
border-bottom-right-radius:8px;}
.nulispost-menu li a .sf-sub-indicator{overflow:hidden;position:absolute;text-indent:-9999px}
.nulispost-menu li li a,.nulispost-menu li li a:link,.nulispost-menu li li a:visited{background:#439700;border-bottom:1px solid #000;border-right:none;color:#fff;font:12px Arial;position:relative;text-transform:none;width:138px;padding:10px 10px;text-shadow: none;opacity:0.8}
.nulispost-menu li li a:hover,.nulispost-menu li li a:active{background:#444}
.nulispost-menu li ul{height:auto;left:-9999px;position:absolute;width:160px;z-index:9999;margin:0}
.nulispost-menu li ul a{width:140px}
.nulispost-menu li ul ul{margin:-33px 0 0 157px}
.nulispost-menu li:hover&gt;ul,.btrix-greenymenu li.sfHover ul{left:auto}
.menusearch{width:200px;float:right;margin:0 auto;padding:5px 10px 0}
.searchform {margin-top:0px;display: inline-block;*display: inline;padding:0;background:#fff;width:200px;height:23px; overflow:hidden;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;border:1px solid #5c820d;}
.searchform input {font:italic 12px Arial;color:#222;line-height:23px;height:23px;padding:0;margin:0;}
.searchform .searchfield {background:transparent;padding:0 0 0 6px;margin:0;width: 160px;height:23px;border:0px;outline: none;line-height:23px;}
.searchform .searchbutton{border:none;font-size:12px;height:23px;width:23px;margin:0;padding:0}

4. Sekarang masuk ke blogger Tata Letak
5. Klik Tambah Gadget dan pilih HTML / Javascript
6. Paste kode di bawah ini.

HTML

 <div class="nulispost-menu">
<ul class="sf-menu">
<li><a href="http://www.blogger.com/"><img alt="home" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipe0ZUkDqbY8L5Mn6R2CBQYHF-FU21GOzXRwlElQcbS1-GEE2bXfhOt_33yLTHo8DATEyqc_kTTG0oKdSnIHOUjMqApryj0yYA5uPkWE6Dhf4JN2-lyBfk5aWn04kwTSsWlaiJl-sfzds/s1600/home.gif" style="padding: 0px;" /></a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Drop Menu 1</a>
<ul>
<li><a href="#">Sub Menu 1</a></li>
<li><a href="#">Sub Menu 2</a></li>
<li><a href="#">Sub Drop Menu 3</a>
<ul>
<li><a href="#">Sub Drop Menu 3.1</a></li>
<li><a href="#">Sub Drop Menu 3.2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Drop Menu 2</a>
<ul>
<li><a href="#">Sub Menu 1</a></li>
<li><a href="#">Sub Menu 2</a></li>
<li><a href="#">Sub Menu 3</a></li>
</ul>
</li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
<div class="menusearch">
<form action="/search" class="searchform" method="get">
<input class="searchfield" id="q" name="q" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value=''" type="text" value="Search here...." />
    <input class="searchbutton" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNDaQH2-B2fRZfNifx3uPXgYlJr8Mk86sUxHT4ZDwN1BqtUKPQxkVLygnxBnxcaMu2gghkqKiMh8iShTfL5UOf4MgTFF3iM2AepqvZJ1PVZktKqc4pCs3BzcLYXfqg_W341ANvK6P74HM/s1600/tombolcari.gif" style="cursor: pointer; vertical-align: top;" type="image" value="Go" />
</form>
</div>
</div>

7. Simpan HTML/Javascript dan jangan lupa untuk mengganti # dengan link anda.

Itulah tutorial cara membuat Menu Hijau Navigasi Dengan CSS Untuk Blogger semoga bisa bermanfaat untuk anda. Dan silahkan ganti warna sesuai kreasi anda. sekian dan terimakasih