Rabu, 30 November 2011

Cara Membuat Menu Bar Di Blog

Nah, pada kesempatan kali ini fuad-xp akan berbagi tentang tips untuk sobat blogger. Mungkin kalian sudah tau Cara Membuat Menu Bar Di Blog, dan bagi para pemula blogger seperti saya yang belum tau Cara Membuat Menu Bar Di Blog tentu saja tidak ada kata terlambat untuk belajar berbagai macam cara untuk mempercantik blog. Menu bar ini sebenarnya sama saja seperti menu-menu bawaan blogger. Namun menu bawaan dari blogger ini membutuhkan tempat dan kelihatannya mungkin kurang menarik. Nah, bagi sobat blogger yang ingin menambah cantik menu bar ini tentu saja bisa, dengan bantuan kode script ke dalam template anda. Mau tau cara membuat menu bar nya?? Ikuti langkah-langkah di bawah ini.


Berikut langkah-langkahnya :

1. Login terlebih dahulu ke Blogger.
2. Klik Tata Letak.
3. Pilih Edit HTML
4. Centang Expand Widget Template.
5. Cari kode ]]></b:skin>
6. Kemudian copy-paste kode di bawah ini tepat 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

}

7. Kemudian cari kode ini.

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:section class='headerright' id='headerright' preferred='no'>
<b:widget id='HTML3' locked='false' title='' type='HTML'/>
</b:section>
</div>

Cari berdasarkan <div id='header-wrapper'>

8. Kemudian copy-paste kode dibawah ini di bawah kode tersebut tadi.

<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a expr:href='data:blog.homepageUrl' title='This Blog Address'>Beranda</a></li>
<li><a href='http://fuad-xp.blogspot.com/search/label/Cerpen-ku' title='Cerpen-ku'>Cerpen-ku</a></li>
<li><a href='http://fuad-xp.blogspot.com/search/label/Informasi' title='Informasi'>Informasi</a></li>
<li><a href='http://fuad-xp.blogspot.com/search/label/Mp3' title='Mp3'>Mp3</a></li>
<li><a href='http://fuad-xp.blogspot.com/search/label/Tips%20n%27%20Trik' title='Tips n Trick'>Tips n Trick</a></li>
</ul></div>
</div>

9. Ganti alamat link di atas yang berwarna Merah dan Biru dengan nama yang anda inginkan.
10. Kemudian simpan template dan liat hasilnya.

Keterangan :
  • Ganti yang berwarna Merah dengan alamat link anda.
  • Ganti yang berwarna Biru dengan nama yang anda inginkan.
  • Ganti yang berwarna Hijau dengan warna yang anda inginkan, untuk mencari warna klik disini.

Semoga Bermanfaat ^_^

7 Komentar :

akbar mengatakan...

cara no.7 kok gk bisa ya?

Fuad XP mengatakan...

Bisa ko sob..cari berdasarkan ini < div id='header-wrapper' >

nanda zr 23 mengatakan...

blog walking

kalo ga bisa mungkin kodenya kurang spasi setelah "div"

<-div id='header-wrapper'>

tanda stripnya di hapus dulu
insyaallah bisa

kalo tetep g bisa brarti templatenya ga mendukung wkwk

mampir http://nnzr.blogspot.com

Fuad XP mengatakan...

Ditunggu aja kunjungan baliknya sob..Salam Blogger.. :D

ikilaptop mengatakan...

berhasil gan... tp g sesuai ma yang ada di sample pictnya ya

Anonim mengatakan...

blog tips blogger kok susah ngopy skripnya Fuck.....

Much Chadziq Charisma mengatakan...

Nice Post...

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

Posting Komentar

Silahkan sisipkan komentar jikalau anda berkunjung atau nyasar ke blog ini. Komentar anda sangat berguna dan berharga untuk menjadikan blog ini menjadi lebih baik. Mohon gunakan kata-kata yang sopan dalam berkomentar. Komentar SPAM, SARA dan sejenisnya tidak akan ditampilkan.

 
Design by Fuad XP | Bloggerized by Fuad XP - Fuad XP Premium | Free Download