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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCTF9QCbADdrkuY8BO5Z7jTOpd0-NPd_PD88E5RZ0iYyAygIgQjsfih0MSf9m8RnVpJsvi0OGVSlKf4y18pnwbAILwwAx6nhelTRrvkjGi1et4uNqQGQ-LBL4nf7pBUdSdBKuhckfE7jo/s1600/spacer.gif' type='image' value=''/>
        </form></div>
<div id='rss'><a href='/feeds/posts/default'><img alt='RSS' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCTF9QCbADdrkuY8BO5Z7jTOpd0-NPd_PD88E5RZ0iYyAygIgQjsfih0MSf9m8RnVpJsvi0OGVSlKf4y18pnwbAILwwAx6nhelTRrvkjGi1et4uNqQGQ-LBL4nf7pBUdSdBKuhckfE7jo/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

23 comments:

JOGO BOYO ENTERTAIMENT mengatakan...

trima kasih

Unknown mengatakan...

wah podo wae,,

Sekedar Online mengatakan...

terimah kasih atas artikelnya...

Anonim mengatakan...

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

Rachmad 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 Ngurah 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.
tecnodriver.blogspot.com mengatakan...

trimakasih ya untuk bantuannya

Kyu Bintang mengatakan...

Saya gk ada wrapper nya om ? ™

Anonim 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

Unknown 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???

Unknown mengatakan...

kalau mau dibawah header gimana gan ?

kangmid mengatakan...

Trimakasih tutorialnya gan ????

Rina A mengatakan...

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

Fadhony mengatakan...

terimakasih atas kunjungannya

Bhejoe mengatakan...

Info yang bagus,
langsung dicoba gan.
terima kasih

Posting Komentar