Web Counter

Jumat, 01 Juli 2011

Cara buat Navbar di blogger

Sekarang kita akan bahas topic tentang Cara Buat Navbar di blogger bagi yang udah tau abaikan yang ini dan lihat yg di bawah ok.

Pertama Kita buat Navbar normal dari blogger
Langkah pertama buka tab posting lalu Edit Laman
setelah itu Laman baru selesai

Sekarang cara buat Navbar lain pastinya yg lebih keren

Horizontal tab menu 10 :




Untuk membuatnya, silahkan klik di sini.

Horizontal Tab menu J :



Untuk membuatnya, silahkan klik di sini.


Free Horizontal Tab Menu F :




Untuk membuatnya, silahkan klik di sini.

Menu Drop down dengan CSS :



Untuk membuatnya, silahkan klik di sini.

Menu navigasi-dengan-css-2 :



Untuk membuatnya, silahkan klik di sini.

Menu Navigasi Css 6 :



Untuk membuatnya, silahkan klik disini.

Menu Navigasi Link List :



Untuk membuatnya, sobat bisa mendownload templet Elegant Style & SEO Friendly, kemudian improvisasikan dengan blog ini. Atau sobat bisa menambahkan kode Css sebelum tag dan id navbar pada bagian body.

Kode CSS :


/*-- (Menu/Nav) --*/
#nav{background:#fff url(http://i290.photobucket.com/albums/ll256/angkatan2006/untuk%20header/topmenubgrhy3.gif) no-repeat; height:32px; padding:4px 0 0; margin-bottom:0px}
#nav-left{float:left; display:inline; width:660px; padding-left:6px}
#nav-right{float:right; display:inline; width:200px}
#nav ul{position:relative; overflow:hidden; padding-left:0px; margin:0; font:1.0em Verdana,Arial,Helvetica,sans-serif;font-weight:bold;}
#nav ul li{float:left; list-style:none}
#nav ul li a, #nav ul li a:visited{display:block; color:#fff; margin:0 5px; padding:5px 4px; text-decoration:none}
#nav ul li a:hover{color:#800000; background-color:#fff; margin:0 5px; padding:5px 4px}
#nav ul li a.current, #nav ul li a.current:visited, #nav ul li a.current:hover{margin:0 8px; background-color:#fff; color:#fff; padding:5px 7px}
/*-- (Search) --*/
#search{background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMCOz5i_tWXaQgHAZSd-r5js4w2BzDiQhlKSDNdFNomH54tY-SSsozVMhtyoDX9nBXaaCauZdnfSpMetaF84Z5FPJUkyV-oitaDztmJReTmih3oAi9dUtU9aABUDfkQp9TorI73iWVzuTS/s400/search.gif) 6px 0px no-repeat; border:1px solid #333; float:right; height:23px; margin:0 15px 0 0; width:180px}
#search input{font-family:Verdana,Arial,Helvetica,sans-serif; background:transparent; border:0; color:#555; float:left; font-size:12px; margin:5px 0 0; padding:0px 2px 2px 30px; width:140px}


Dan id Navbar biasanya seperti ini.

<div id='nav'>
<b:section class='header-tabs' id='header-tabs' preferred='yes' showaddelement='yes'>
<b:widget id='LinkList1' locked='true' title='' type='LinkList'/>
<b:widget id='HTML1' locked='true' title='Search' type='HTML'/>
</b:section>
</div>


* sesuaikan kode warna #fff dan link url yang berwarna merah dengan templet milik sobat.



Artikel Terkait:

8 komentar:

sekarang malah banyak yang cabut navbar nya. biar kek website

navbar mmng kurang menarik sih. kesan gratisannya kuat banget

wah sudah hampir sebulan di tahun baru ya

Hi, pliz come to my blog too :D

Dulu orang takut hilangin navbar, ternyata gak papa :D

Tapi pasang navbar memang banyak membantu, terutama untuk p[engeditan

Posting Komentar

Ingat Blog ini DoFollow jadi komen dulu ok

Folowers

Share

Twitter Delicious Facebook Digg Stumbleupon Favorites More