Pasang Navigation Bar Part II

By AchmadVm

Tag Blogging Css Tutorial

• Share
• Twitter
• Delicious
• Facebook
• Digg
• Reddit

Navigation bar atau singkatnya Navbar adalah bagian dari sebuah layout, silahkan pasang jika Anda belum meiliki navbar atau Bosan dengan Navbar Yg Default/Yg dirasa Kurang manis

Ramainya Blog dan web yg menyemarakan blogging Sekarang ini perlu Magnet yg dapat menarik pengunjung selain Postingan Yg berbobot,juga dengan design blog Yg membuat Pengunjung akan mengunjungi Blog anda lagi...Nahh Untuk itu Pada setiap blog/atau website mestinya sudah mumpuni untuk memiliki Navbar9Navigation bar) selain untuk mencari link Posting (konten berita baik teks dan gambar) juga sebagai Pemanis Blog....Sudahkah blog anda memiliki Navbar,Jika belum atau kurang..silahkan ikuti Langkah-langkah berikut Pada kesempatan ini saya meresources navbar Templates neo.. demo di sini.

Memasang Navigation Bar #01

01. Pilih Template > Edit Html (klick Expand Widget Template). , Cari kode ini :

03. Tambahkan kode ini di atasnya :

#navigationbar01 {
background:#fff;
color:#555;
font-family:Verdana, "BitStream vera Sans", Helvetica, Sans-serif;
font-size:12px;
margin:1px 0;
}
#menus li {
display:inline;
list-style:none;
}
#menus li a {
background:transparent url(http://tinyurl.com/dhvp4h) no-repeat;
color:#382e1f;
display:block;
font-size:11px;
float:left;
height:31px;
line-height:31px;
padding:0 20px;
margin-left:-10px;
text-decoration:none;
z-index:1;
}
#menus li a:hover {
background-position:0 -31px;
}
#menus li.current_page_item a, #menus li.current-cat a {
background-position:0 -62px;
}
#menus li a.home {
background-position:0 -93px;
margin-left:-40px;
padding:0;
text-indent:-999em;
width:45px;
}
#menus li a.home:hover {
background-position:0 -124px;
}
#menus li.current_page_item a.home {
background-position:0 -155px;
}
#menus li a.lastmenu:hover {
background-position:0 0;
}
#searchbox {
float:right;
padding:4px 10px;
width:280px;
}
#searchbox .textfield {
float:right;
line-height:16px;
width:180px;
}
#searchbox .switcher {
background:url(http://tinyurl.com/ceouvs) no-repeat 0 0;
display:block;
float:right;
height:16px;
line-height:16px;
margin-top:3px;
padding:0 2px;
text-indent:-999em;
width:18px;
}
#menus li ul {
background:#f4f5f7;
border:1px solid #ccc;
border-top-color:#a6a6a6;
display:none;
padding:0 5px;
}
#menus li li {
display:block;
float:none;
list-style:none;
margin:0 !important ;
margin:0;
padding:0;
}
#menus li li a {
background-image:none;
border-style:solid;
border-color:#ddd;
border-width:1px 0 0;
display:block;
float:none;
font-size:12px;
height:20px;
line-height:20px;
margin:0;
padding:5px;
text-decoration:none;
width:150px;
}
#menus li li.first a {
border-top:none;
}
#menus li li a:hover {
font-weight:bolder;
}
.fixed, .clear {
clear:both;
}

04. Cari kod ini :

<div id='content-wrapper'>

05. Tambahkan kod ini di atasnya :

<div id='navigation'>

<ul id='menus'>
<li class='current_page_item'><a Title='Home' class='home' href='http://yourblog.blogspot.com/' title='Home'>Home

06. klik Save/simpan

AchmadVM is an indonesian programmer, blogger, Windows user, founder of blogger-creative.blogspot.com. He lives in Sidoarjo, Indonesia. Follow Creative on Twitter or take a look at his Facebook Profile.

Share this post

Share on Facebook Share on Twitter Share on StumbleUpon Share on Delicious Share on Reddit

Share on Digg Share on NegaraKu Share on Technorati Subscribe to Feeds RSS Email to AchmadVm