Bocah Poris Blog's | Pada Siang Cukup Panas ini Saya Berbagi Tutorial Tentang Cara Memasang Menu Bar Simple yang Menarik  Cara ini Hanya Sebuah Kerjaan yang Iseng-Iseng . Tapi Menurut Saya Menu Bar atau Menu Navigasi ini Cukup Bermanfaat dan Menarik Terus Juga Keren . Caranya Juga Cukup Simple. Menu Navigasi atau Menu Bar Simple ini Menurut Saya Punya Fungsi yang Bermanfaat bagi Pengunjung Blog Karena Pengunjung Blog Bisa Merasa Nyaman Dengan Tampilan Blog Yang Cukup Rapi .
Menu Navigasi ini Di Lengkapi Dengan Icon yang Menarik Seperti Icon yang Berada di blogger.com .
Lihat Gambar Menu Navigasi Berikut
Cara Memasang Menu Bar Simple yang Menarik
Kita Langsung Ke Tutorial Membuat Menu Navigasi Simple ini : 

Langkahnya Sebagai Berikut
1. Login Ke Akun Blogger Anda Seperti Biasa

2. Masuk Ke Menu Template Blog Anda Seperti Biasa

3. Klik Edit HTML > Lanjutkan > Centang Expand Template Widget

4. Cari Kode dibawah Untuk Memudahkan Tekan CTRL+F
]]></s:kin>
5. Setelah Ketemu Masukkan Kode dibawah Tepat diatasnya
/* Menu Nav Simple
---------------------------------------------*/
#head-nav {
margin: 0 10px;
border-bottom: 1px dashed #bbb;
border-left: 1px solid #bbb;
border-right: 1px solid #bbb;
-webkit-border-top-left-radius: 2px;
-webkit-border-top-right-radius: 2px;
-moz-border-radius-topleft: 2px;
-moz-border-radius-topright: 2px;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
}
ul#nav li {
float: left;
border-right: 1px solid #bbb;
border-top: 1px solid #bbb;
border-bottom: 1px solid #bbb;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
margin-bottom: 10px;
position:relative;
z-index:1;
background: rgb(247,247,247); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y3ZjdmNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2ZjZmNmYyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background: -moz-linear-gradient(top, rgba(247,247,247,1) 0%, rgba(252,252,252,1) 50%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(247,247,247,1)), color-stop(50%,rgba(252,252,252,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(247,247,247,1) 0%,rgba(252,252,252,1) 50%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(247,247,247,1) 0%,rgba(252,252,252,1) 50%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(247,247,247,1) 0%,rgba(252,252,252,1) 50%); /* IE10+ */
background: linear-gradient(top, rgba(247,247,247,1) 0%,rgba(252,252,252,1) 50%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#fcfcfc',GradientType=0 ); /* IE6-8 */
-webkit-box-shadow: 0 8px 6px -6px #ccc;
-moz-box-shadow: 0 8px 6px -6px #ccc;
box-shadow: 0 8px 6px -6px #ccc;
behavior: url(http://fetchak.com/ie-css3/ie-css3.htc);
}
ul#nav-search li {
float: right;
border-left: 1px solid #bbb;
border-top: 1px solid #bbb;
border-bottom: 1px solid #bbb;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
-webkit-box-shadow: 0 8px 6px -6px #ccc;
-moz-box-shadow: 0 8px 6px -6px #ccc;
box-shadow: 0 8px 6px -6px #ccc;
margin-bottom: 10px;
background: rgb(247,247,247); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y3ZjdmNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2ZjZmNmYyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background: -moz-linear-gradient(top, rgba(247,247,247,1) 0%, rgba(252,252,252,1) 50%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(247,247,247,1)), color-stop(50%,rgba(252,252,252,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(247,247,247,1) 0%,rgba(252,252,252,1) 50%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(247,247,247,1) 0%,rgba(252,252,252,1) 50%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(247,247,247,1) 0%,rgba(252,252,252,1) 50%); /* IE10+ */
background: linear-gradient(top, rgba(247,247,247,1) 0%,rgba(252,252,252,1) 50%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#fcfcfc',GradientType=0 ); /* IE6-8 */
behavior: url(http://fetchak.com/ie-css3/ie-css3.htc);}
ul#nav li a, ul#nav li a:visited {
color: #444;
display: block;
font-size: 1.0em;
font-weight: normal;
line-height: 30px;
padding: 0 15px;
}
ul#nav li a:hover {
-webkit-box-shadow: 0 8px 6px -6px #91D6FF;
-moz-box-shadow: 0 8px 6px -6px #91D6FF;
box-shadow: 0 8px 6px -6px #91D6FF;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
text-decoration: none;
}
ul#nav li ul {
display: none;
}
ul#nav li:hover ul {
background: #;
border: 0px solid #aaa;
display: block;
position: absolute;
margin-top: 2px;
}
ul#nav li ul li {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border: 1px solid #ccc;
float: none;
margin: 5px 0 2px 2px;
behavior: url(http://fetchak.com/ie-css3/ie-css3.htc);
}
ul#nav li ul li a:link, ul#nav li ul li a:visited {
font-family: verdana;
font-size: 0.9em;
font-weight: normal;
line-height: 25px;
margin: 4px;
min-width: 122px;
}
ul#nav li ul li a:hover {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background: #eee;
-webkit-box-shadow: 0 0 0 0 #fff;
-moz-box-shadow: 0 0 0 0 #fff;
box-shadow: 0 0 0 0 #fff;
behavior: url(http://fetchak.com/ie-css3/ie-css3.htc);
}
ul#nav li .tut a{
background: url(http://2.bp.blogspot.com/-TqwxNGdWd9g/TmCau8MMF3I/AAAAAAAAAN0/3DUUOZwcECA/s1600/arrow_down_over.gif) right center no-repeat;
padding-right:20px;
}
ul#nav li .tut a:hover {
background-image: url(http://2.bp.blogspot.com/-TqwxNGdWd9g/TmCau8MMF3I/AAAAAAAAAN0/3DUUOZwcECA/s1600/arrow_down_over.gif) right center no-repeat;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
text-decoration: none;
}
ul#nav li ul li .tor a{
background: url(http://3.bp.blogspot.com/-1q_HtRiK6O0/TmCdF_t5rXI/AAAAAAAAAN8/_1_3K83exrU/s1600/arrow_right_over.gif) right center no-repeat;
}
ul#nav li ul li .tor a:hover {
background: #eee url(http://3.bp.blogspot.com/-1q_HtRiK6O0/TmCdF_t5rXI/AAAAAAAAAN8/_1_3K83exrU/s1600/arrow_right_over.gif) right center no-repeat;
}
#head-nav ul#nav li ul li ul {
display: none;
}
#head-nav ul#nav li ul li:hover ul {
display: block;
margin: -34px 0 0 160px;
}
5. Setelah Cara diatas Dilakukan , Kemudian Cari Kode dibawah
<header>
Kalau Kode diatas Tidak Ada Cari Kode dibawah
<div id='header-wrapper'>

Kalau kedua Kode diatas Tidak Ada di Template Anda Lakukan Cara Berikut

Anda Bisa Lewat Tata Letak > Tambah Gadget > HTML/JavaScript


6. Setelah Salah Satu Langkah diatas Di Lakukan Masukkan Kode Berikut

<div id='head-nav'>
<ul id='nav'>
<li><a class='current' href='/' title='home'><img src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAABEElEQVR42t2UzQmDQBCFU0JKSQleREXRiKIiKot/daQTS0gJW4KlWMJknrAH0SS7OQUXBoR98znOvPFyOcVxHGfyPG+2LOvquq4VhiHleU6+75MxjJOmqqqoaRpKkmS+88HzOI4rVBuEariSGcl939MwDNS2LQkhqOs6MyBgXMiMZICQfBRaQF2YFtAEhkBvbdu+HcJwEcexNgyBnmZZtvDkxQ7GlS1qADowBLQoIE1T2kDZZ0+2h2RbyLquFx0oNNAiJwgCyQx5+OkQKFt8Cmig/TrlKIokeqOqQBuKolgDQ1AvgwZaIyD6w719qDusndqSn4BIZsgGWJbl2YAYP3yFtWKj74Dq1wXNW6v89XkB6E5tY/X2XroAAAAASUVORK5CYII='/>
<span>Beranda</span></a></li>
<li><a href='#' target='_blank' title='Daftar Seluruh Artikel'><img src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAT0lEQVR42mNgoBdIS0v7jw9D1exMTU1NoKaB/4k2lAQDwYZSxUCiDSHGQKIsoIuBeHzTMDhcSHMvo3t1BHgZn54h7mW6lIFkFw5UM5AaAACyqLNEs75CTgAAAABJRU5ErkJggg=='/>
<span>Sitemap</span></a></li>
<li><a href='#' target='_blank'><img src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAABGUlEQVR42sWUyQ3CMBBFKSElUAIlpIQcsiv71k5KoQRKoBRKMHkICyteknCASKMgz/9vhrHj0+lfTxAEfp7noqoqsbzvURQ134IuvMMw9JumEdM0iWEYBL8By7zzoTpiusmyTKyBMgAXRfGwQkkAwogYE1AbUELxGGFUkyAZW0CCdW2mVFnD9gK1LqHbxHuAqs7ZnSpUj40p0jT9AFmwVa7rWhw+ay5g27ZU9/nLpqDzQ0BG0XXdaydNwRg0YFmWYhxHK9QWePBqwOVruPZ9fxiIB68GZBYM/0iXaPHgNW5MkiRXZrUXiBaP61bxOI8IXZ2SQ/O+abytq8pbqs7sOiZ2WA3WyKHZhK3A5ziO52XgNzVYI/fTm/0JRK7gq7QtxhcAAAAASUVORK5CYII='/>
<span>Disclaimer</span></a></li>
<li><a href='#'><img src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAqklEQVR42mNgGEiQkJAgkJaW1g/E74H4f0ZGhgKlhp0HGQTCqampCRS5DmhIA8wwkCsp9i7MmyCcnp4+H10e6GIDUg38j4yRvQxig8RINfA+FkP3g1wL5b8n2jCYCwjgBqoZhi1MSTHsPcirMC8TnXzwGGZAchIZvIZB8ynlhoHyKSygqeWy91AcAMTrKTIM2UBQcQQ1kHzDYBkbOfNTXDTBDIWGYwPDYAIA3aDvqiyIricAAAAASUVORK5CYII='/>
<span>
                  Kontak
                </span></a></li>
<li><a href='#'><img height='18' src='https://ssl.gstatic.com/s2/oz/images/settings/privacy/vis-profile.png' width='18'/>
<span>
                  Tentang
                </span></a></li>
<li><a href='#' target='_blank'><img src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAW0lEQVR42mNgoAVIS0v7Tw2MYmBGRoYDpY7CaiCIJgUnJCQI4DWQVG8i6xuiBlI9UoDsBlwYqEYBXQ2SGOlexqaGojAcNXC4GEi1hA3EBaSWNMgYm4HUK2CpCQCGR+p8xh3nEAAAAABJRU5ErkJggg=='/>
<span>
                  Tukar Link                </span></a></li>
</ul>
<div class='clear'/>
</div>
Keterangan :

  • Ganti Tulisan yang Berwarna Merah Sesuai Kemauan Anda
  • Ganti Kode # Dengan Link Blog Anda Atau Link Apapun Sesuai Kemauan Anda 
6. Terakhir Klik Simpan dan Lihat Hasilnya Pada blog Anda.

Selamat Anda Telah Sukses

Semoga Tutorial Kali Ini Mengenai Cara Memasang Menu Bar Simple yang Menarik Bermanfaat Bagi Anda Termasuk Para Pengunjung Yang Semakin Penasaran Dengan Isi Blog Anda Sendiri.

Happy Blogging!
Baca Tutorial Berikut Juga ya

Judul : Cara Memasang Menu Bar Simple yang Menarik
Di Tulis Oleh:MRizal Wrc
URL : http://bocahporis.blogspot.com/2013/03/memasang-menu-bar-simple-yang-keren.html
Date Published : 16:39
Desription : Bocah Poris Blog's  | Pada Siang Cukup Panas ini Saya Berbagi Tutorial Tentang Cara Memasang Menu Bar Simple yang Menarik    Cara ini H...
Rating Blog: 5 dari 5