Membuat Menu Bar Pada Header Blog



Cara Membuat Menu bar di Blog, Dimana kita lihat tidak semua tamplate yang menyediakan Menu bar ini. Contohnya saja Tamplate bawaan blogger sendiri. Menu bar ini sebenarnya sama saja seperti Menu Label bawaan blogger tetapi bawaan blogger letak nya di belahan sidebar.juga bisa kita lihat menu label bawaan blogger membutuh tempat, kelihatan nya kurang menarik. Nah untuk kalian yang ingin menambah Asesories menu bar ini tentu saja bisa. dengan bantuan kode script ke dalam tamplate kalian. Menu bar ini terletak di atas Header. Mau tau Bagaimana cara Membuat Menu bar nya??? Ikuti cara-cara di bawah ini

Berikut langkah-langkah cara Membuat menu bar di blog anda:
  • Login terlebih dahulu ke blogger
  • Klik Tata Letak
  • Edit HTML
  • Cari kode ]]></b:skin>
  • Kemudian Copy Paste kode di bawah ini persis diatas kode ]]></b:skin> 
#NavbarMenu
{
background:#ccc;
width:968px;
height:32px;
color:#FFF;
font:bold 8px Arial, Tahoma, Verdana;
clear:both;
margin:0 auto;
padding:0}
#NavbarMenuleft
{

width:955px;
float:left;
margin:0;
padding:0
}

#nav li
{
list-style:none;
float:left;
margin:0;
padding:0
}

#nav li a,#nav li a:link,#nav li a:visited
{
color:#fff;
display:block;
text-transform:capitalize;
font:normal 12px Georgia, Times New Roman;
margin:0;
padding:12px 11px 8px
}

#nav li a:hover,#nav li a:active
{
background:#ccc;
color:#FFF;
text-decoration:none;
border-right:1px solid #296204;
border-bottom:1px solid #296204;
border-left:1px solid #296204;
margin:0;
padding:12px 9px 8px
}

#nav li li a,#nav li li a:link,#nav li li a:visited
{
background:#ccc;
width:200px;
color:#fff;
text-transform:capitalize;
float:none;
border-bottom:1px solid #0d2601;
border-left:1px solid #0d2601;
border-right:1px solid #0d2601;
font:normal 14px Georgia, Times New Roman;
margin:0;
padding:7px 10px
}

#nav li li a:hover,#nav li li a:active
{
background:#184303;
color:#fff;
padding:7px 10px
}

#nav li a.enclose,#nav li a.enclose:visited
{
border-top:1px solid #000
}

#nav li ul
{
z-index:9999;
position:absolute;
left:-999em;
height:auto;
width:170px;
margin:0;
padding:0
}

#nav li ul a
{
width:140px
}

#nav li ul ul
{
margin:-75px 0 0 171px
}

#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
}

#subnavbar
{
background:#004313;
width:968px;
height:24px;
color:#FFF;
margin:0;
padding:0
}

#subnav li a,#subnav li a:link,#subnav li a:visited
{
color:#f9fc01;
display:block;
font-size:11px;
text-transform:capitalize;
margin:0 5px 0 0;
padding:3px 13px
}

#subnav li a:hover,#subnav li a:active
{
color:#DCD900;
display:block;
text-decoration:none;
margin:0 5px 0 0;
padding:3px 13px
}

#nav ul,#subnav ul,#subnav li
{
float:left;
list-style:none;
margin:0;
padding:0
}

*,#nav,#subnav
{
margin:0;
padding:0
}
 
 Kemudian cari kode berikut ini :
<div id='header-wrapper'>
      <b:section class='header' id='header' preferred='yes'>
<b:widget id='Header1' locked='true' title='Education (Header)' type='Header'/>
</b:section>
        <b:section class='header-tabs' id='header-tabs' preferred='yes' showaddelement='no'>
<b:widget id='LinkList64' locked='true' title='Top Tabs' type='LinkList'/>
</b:section>
<div id='searchform'><form action='/search' method='get'>
                    <input class='searchtext' id='s' name='q' type='text' value=''/>
                    <input alt='Search' id='searchsubmit' src='http://1.bp.blogspot.com/_Sd8u52mpBRQ/TEtSR0KQtII/AAAAAAAABQ8/J_cS7uNOg9E/s1600/spacer.gif' type='image' value=''/>
        </form></div>
<div id='rss'><a href='/feeds/posts/default'><img alt='RSS' src='http://1.bp.blogspot.com/_Sd8u52mpBRQ/TEtSR0KQtII/AAAAAAAABQ8/J_cS7uNOg9E/s1600/spacer.gif'/></a></div>
    </div>
Letakkan Kode dibawah ini diatas kode "<div id='header-wrapper'>"
<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a href='http://d2-education.blogspot.com/'><b>Home</b></a></li>
<li><a href='http://d2-education.blogspot.com/search/label/IT/'><b>IT</b></a></li>
<li><a href='http://d2-education.blogspot.com/search/label/Education/'><b>Education</b></a></li>
<li><a href='http://d2-education.blogspot.com/search/label/Other/'><b>Other</b></a></li>
<li><a href='#'><b>Template Design</b></a></li>
<li><a href='http://jayaputrasbloq.blogspot.com/2009/12/informasi-pemasangan-iklan.html'><b>Pasang Iklan</b></a></li>
</ul></div>
</div>
 Nah,.. uda selesai. Selamat Mencoba!!!
Catatan :- Silahkan ganti link dan nama pada kode yang berwarna merah sesuai keinginan anda.
              - Jika ingin meletakkan menubar dibawah header, tinggal letakkan kodenya dibawah blok kode header.



Free Template Blogger collection template Hot Deals SEO
|Free Template Blogger | BERITA'KU | Indo Tutorials | SEO |
  • Digg
  • Del.icio.us
  • StumbleUpon
  • Reddit
  • RSS

25 comments:

JOGO BOYO ENTERTAIMENT mengatakan...

trima kasih

TIPS ONLINE mengatakan...

wah podo wae,,

SEKEDAR TAHU mengatakan...

terimah kasih atas artikelnya...

Irwan Saputra mengatakan...

Nice Info sahabat...!
Berguna sangat.!
salam "Blogadexme".
Thanks!

Abib umar mengatakan...

Kok di saya ga ada id='header-wrapper'> yaaa ??

bingung neh udah di teken ctrl f

dicari pake mata kagak ketemu juga tuh tulisan

Kacapiring Notebook mengatakan...

iya sama saya juga gak ada header wrapernya gan

Agung Car mengatakan...

Thks infonya dan sangat membantu

Ngurah Yudha mengatakan...

sya juga ga ada header wrapernya gan

Putra Kowoe mengatakan...
Komentar ini telah dihapus oleh pengarang.
Bharian888.blogspot.com mengatakan...

trimakasih ya untuk bantuannya

Star's Page mengatakan...

Saya gk ada wrapper nya om ? ™

4zhabul Corp mengatakan...

terima kasih yah mas

Darmawan Saputra mengatakan...

Terima kasih atas artikelnya.

sepertinya anda berbakat untuk urusan membuat postingan yang ini, jujur saja kamu punya kelebihan tersendiri, dan saya akan berkunjung lagi bila ada waktu.



#Semoga sehat selalu :D

adfin zatarigh mengatakan...

ehehee... bagus mas, tapi saya ga ngerti kode kode gituan.. nyimak aja..

salam...

penggunacerdas mengatakan...

tanks gan atas infonya.. sangat bermanfaat.. kalau tidak keberatan main kesini ya

Doni setyawan mengatakan...

thanks gan ilmunya

mampir ya www.krumpul.wed.id

Ebay mengatakan...

mksh um infonya
mamapir di blog ini jg ya, jgn lupa

www.ebaynez.co.cc :D

MANTABB !!!

Fadli Pratama Putra mengatakan...

ga ada div id='header-wrapper'> itune gan.. bagemane trus an???

Junaidi Sharez mengatakan...

kalau mau dibawah header gimana gan ?

kangmid mengatakan...

Trimakasih tutorialnya gan ????

Fuadditiya Imaspadi Muharam mengatakan...

Trimakasih gan infony..

sangat bermanfaat bagi perkembangan blog saya.. :)

Blog Fuadditiya | The FIM Site

Rina A mengatakan...

udah berhasil.. thks infonya..
tp gmna ya ngrubah warna n model menubarnya?

Much Chadziq Charisma mengatakan...

Nice Post...

Kunjungi blog saya ya.. Download Lagu Terbaru dan Lyric Free

Fadhony mengatakan...

terimakasih atas kunjungannya

Bhejoe mengatakan...

Info yang bagus,
langsung dicoba gan.
terima kasih

Posting Komentar