Firyal Say

The Blog Firyal akan menampilkan yang terbaik untuk anda !
nikmati saja artikel artikel di sini,

Terimakasih

Rabu, 19 Desember 2012

Cara Membuat Menu Bar Di Blog

 oke gan, kali ini saya mau post tentang cara membuat menu bar seperti yang saya gunakan dengan warna merah diatas tulisan The Blog Firyal


1. Login pada blogger
2. Masuk ke halaman Template 
3. Edit HTML lalu Lanjutkan
4. Cari kode ]]></b:skin> , jika sudah ketemu pasang kode di bawah ini di atas kode ]]></b:skin>


#menubar{
width:900px;
margin-top:5px;
float:center;
background:#de360f;
height:35px;
border:1px solid #de360f;
}
#menubar-left{
float:left;
width:900px;
padding-top:1px;
}
#menubar ul{
position:relative;
overflow:hidden;
padding:0;
margin:0;
font-weight:none;
font-size:12px;
}
#menubar li{
cursor:pointer;
float:left;
margin:0 padding:0;
height:32px;
}
#menubar ul li{
float:left;
list-style:none
}
#menubar ul li a{
border-right:1px solid #F0512D;
float:left;
padding: 9px 12px;
text-decoration:none;
color: #ffffff;
font-weight:bold;
font-size:14px;
font-family: Calibri;
}
#menubar ul li a:hover{
background:transparent;
color: #ffa500;
}
#menubar ul li a.current, #menubar ul li a.current:visited, #menubar ul li a.current:hover{
color:#ffa500;
}
5. Setelah Itu Cari kode <div id='header-wrapper'> atau lebih lengkapnya seperti ini:
<div id='header-wrapper'>
<div id='head-inner'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Blognya Reggy (Header)' type='Header'/>
</b:section>
</div>
6. Pasang kode di bawah ini di bawahkode yang mirip dengan kode Pada no 5

<div id='menubar'>
<div id='menubar-left'>
<ul>
<li><a href='http://theblogfiryal.blogspot.com/' title='home'>Home</a></li>
<li><a href='http://theblogfiryal.blogspot.com/' title='blablabla'>blablabla</a></li>
<li><a href='http://theblogfiryal.blogspot.com/' title='blablabla'>blablabla</a></li>
<li><a href='http://theblogfiryal.blogspot.com/' title='blablabla'>blablabla</a></li>
<li><a href='http://theblogfiryal.blogspot.com/' title='blablabla'>blablabla</a></li>
</ul>
</div>
</div>
7. Simpan Template

Keterangan:
Kode yang berwarna Biru adalah kode ukuran menubar. Sehingga bisa sobat ganti sesuai keinginan
- Kode yang berwarna Kuning HARUS sobat ganti dengan URL yang di inginkan, misal: Url ke suatu postingan / Kategori
- Kode Yang berwarna Hijau adalah Nama dari URL yang di inginkan
- Untuk title='bla..bla..bla' adalah deskripsi dari URL yang di inginkan
- Menubar bisa sobat ganti dengan mengcopy kode <li>hingga..</li> dan pastekan di bawahnya


- Firyal
MTCI
TBF Di Fb


LIKE YAAAAA


Ditulis Oleh : Firyal Rasya ~ theblogfiryal.blogspot.com

Firyal Rasya Anda telah membaca artikel The Blog Firyal Cara Membuat Menu Bar Di Blog. anda bisa meng"copas" nya tapi dengan menyertakan sumbernya dengan menggunakan kode di bawah di bagian HTML paling bawah postingan yang sudah anda copas, atau anda bisa meng sharenya dengan mengklik beberapa tombol di bawah
The Blog Firyal Menyediakan Yang Terbaik

TBF.Inc

12 komentar:

:) :( ;) :D ;;-) :-/ :x :P :-* =(( :-O X( :7 B-) :-S #:-S 7:) :(( :)) :| /:) =)) O:-) :-B =; :-c :)] ~X( :-h :-t 8-7 I-) 8-| L-) :-a :-$ [-( :O) 8-} 2:-P (:| =P~ :-? #-o =D7 :-SS @-) :^o :-w 7:P 2):) X_X :!! \m/ :-q :-bd ^#(^ :ar!
  1. sory ngrepotin gan...
    petunjuk dari ente udah ane terapin tapi kok pas pratinjao tulisanne kayak di bawah ini ya ?

    (Template Andari tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa * Semua elemen XML ditutup Artikel Baru BENAR.
    Pesan error XML: Open quote diharapkan untuk atribut "{1}" terkait dengan "judul" elemen tipe.

    Kesalahan 500)

    petunjuk kang

    BalasHapus
  2. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  3. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  4. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  5. gan di blogger saya gx ada tuh kode <div id='header-wrapper' jadi kyk mna gan buat nya

    BalasHapus
  6. brother kok masih belom muncul juga menu nya ?

    BalasHapus
  7. gan di blogger saya gx ada tuh kode <div id='header-wrapper' jadi kyk mna gan buat nya ini ga di jawab bro??? apa harus ada templet khusus

    BalasHapus
  8. Nice post! Can't wait for the next one. Keep stuff like this coming
    Contoh soal psikotes, Cara membuat blog, Tes iq online, dan Obat herbal.

    BalasHapus