logo blog tip or tips
Background Header
Selamat Datang Di Blog Tip or Tips
Terima kasih atas kunjungan Anda di blog Tip or Tips,
semoga apa yang saya share di sini bisa bermanfaat bagi kita semua.
Selalulah berkarya dan berbuat sesuatu yang bisa berguna untuk orang banyak.

Tips Cara Mudah Memasang Menu Bar di Blogger

Tips Cara Mudah Memasang Menu Bar di Blogger, membantu kita dalam memasang menu bar dengan mudah - Selamat malam sobat-sobat sekalian, selamat begadang bagi yang belum tidur dan semoga mimpi indah bagi yang sudah tidur. Kali ini saya akan berbagi tips mengenai Tips Cara Mudah Memasang Menu Bar di Blogger.

Sobat-sobat sekalian pasti sudah tahu kan yang namanya menu bar, kalau belum tahu lihat aja gambar di atas, intinya tampilan menu, hehe. Berhubung sudah malam dan saya juga sudah ngantuk jadi langsung kita bagi aja tipsnya, silahkan sobat lanjutkan membacanya.

Cara Memasang Menu Bar

1. Sobat sekalian harus login terlebih dahulu ke blog nya sobat-sobat sekalian.

2. Lalu sobat masuk ke dashboard dan klik Template.

3. Selanjutnya sobat Edit HTML, tetapi sebelum itu saran saya sobat backup terlebih dahulu template nya, kalau sobat belum tahu caranya, sobat bisa baca point no 1 di artikel Tips Dan Cara Mudah Membuat Related Post.

4. Berikutnya sobat jangan lupa memberi tanda thick atau centang pada Expand Widget Template, kalau sobat lupa memberi centang biasanya ada script yang tidak muncul.

Memasang Menu Bar di Blogger

5. Next step, sobat cari kode java script ]]></b:skin> gunakan F3 atau ctrl+F agar lebih mudah dalam pencarian.

6. Lalu sobat salin kode java script di bawah ini dan tempel di atas kode ]]></b:skin>.

#menubar{
width:900px;
height:32px;
background:#de360f;
margin: 0 auto;
}
#menubar ul{
float:left;
margin:0;
padding:0;
}
#menubar li{
float:left;
list-style:none;
margin:0;
padding:0;
}
#menubar li a, #menubar li a:link{
border-right:1px solid #F0512D;
float:left;
padding:8px 12px;
color:#fff;
text-decoration:none;
font-size:13px;
font-weight:bold;
}
#menubar li a:hover, #menubar li a:active, #menubar .current_page_item a  {
color:#ffa500;
text-decoration:underline;
}
#menubar li li a, #menubar li li a:link, #menubar li li a:visited{
font-size: 12px;
background: #de360f;
color: #fff;
text-decoration:none;
width: 150px;
padding: 0px 10px;
line-height:30px;
}
#menubar li li a:hover, #menubar li li a:active {
background: #F0512D;
color: #ffa500;
}
#menubar li ul{
z-index-9999;
position:absolute;
left:-999em;
height:auto;
width:170px;
margin-top:32px;
border:1px solid ##F0512D;
}
#menubar li:hover ul, #menubar li li:hover ul, #menubar li li li:hover ul, #menubar li.sfhover ul, #menubar li li.sfhover ul, #menubar li li li.sfhover ul{
left:auto
}
#menubar li:hover, #menubar li.sfhover{
position:static
}

Catatan :
  • Untuk mengganti panjang menu bar sobat bisa edit pada width 900px, ubah nilainya.
  • Untuk lebarnya edit pada height 32px.
  • Untuk warna background, sobat edit kode warna pada baris ke 4 pada kode di atas. Selebihnya sobat bisa bereksperimen sendiri.
  • Untuk mengetahui lebih banyak kode warna sobat silahkan klik di sini.

7. Berikutnya sobat cari kode java script <div id="content-wrapper"> atau kalau sobat tidak menemukannya sobat cari saja kode java script div class='main-outer'> agar lebih mudah mencarinya gunakan ctrl+F3.

8. Lalu sobat pasang kode di bawah ini tepat di atas kode <div id="content-wrapper"> atau kalau tidak ketemu letakkan di atas div class='main-outer'> saja.

<div id='menubar'>
<ul>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='http://tiportips.blogspot.com/'>Project 1</a></li>
<li><a href='http://tiportips.blogspot.com/'>Project 2</a></li>
<li><a href='http://tiportips.blodspot.com/'>Project 3</a></li>
</ul>
</div>

Catatan :
  • Ganti http://tiportips.blogspot.com dengan link URL milik sobat, misalnya link URL label sobat.
  • Ganti Project 1 dan project lainnya dengan nama menu bar yang sobat inginkan, misalnya nama dari label sobat.
9. Apabila telah selesai maka simpan template kamu dan lihat hasilnya.
Jika sobat ingin menggunakan sub menu sobat bisa menggunakan kode script di bawah ini untuk menggantikan langkah no. 8.

<div id='menubar'>
<ul>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='http://tiportips.blogspot.com/'>Project 1</a></li>
<li><a href='http://tiportips.blogspot.com/'>Project 2</a>
<ul>
<li><a href='http://tiportips.blogspot.com/'>Project 2.A</a></li>
<li><a href='http://tiportips.blogspot.com/'>Project 2.B</a></li>
</ul></li>
</ul>
</div>

Sangat mudah bukan?? tapi kalau sobat masih merasa bingung atau punya opini lain, jangan sungkan-sungkan untuk berkomentar di kotak komentar. Selain itu sobat juga bisa baca artikel menarik lainnya yaitu Tips Belajar Membuat Highlight Menarik Pada Blogger. Demikian lah Tips singkat dari saya mengenai Tips Cara Mudah Memasang Menu Bar di Blogger, semoga bisa bermanfaat untuk sobat sekalian. Terimakasih atas kunjungannya dan see you.

Next
« Prev Post
Previous
Next Post »

33 comments

mengatur kanan dan kirinya gimana?

Balas

thanks untuk kunjungannya mas

Coba cari kode ini, tinggal di ganti left jadi center or rigth.

#menubar ul{
float:left;
margin:0;
padding:0;

Semoga bs membantu.

Balas

ka, kok tiap sya bkin menu barnya ga bsa lamannya kebuka y k?

Balas

Sudah diikutin gak langkah-langgkah di atas? kalau dah di ikutin insya Allah bisa, coba deh di ikutin bener-bener, kalo ga bisa di buka itu kemungkinan link yang di tuju belum dimasukin. Di cek lagi ya..

Balas

expan widget itu dimananya mas.kok kagak ada ??
bisa pakai gambar gak, biar lebih gampang ngikutinya .

Balas

emang gan, sekarang udah gak ada lagi expand widgetnya, jadinya harus manual. expand itu fungsinya buat buka (contoh) >...<
nah, kalo wxpand di klik nanti kode yang di dalam titik-titik itu bakalan muncul.

Tp sekarang sudah gak ada, jd ga perlu di centang lagi expand widgetnya..

Balas

Tp sekarang sudah gak ada, jd ga perlu di centang lagi expand widgetnya.. ?? ada dimana iya

Balas

buat expannya tinggal klik titik tiga (...) yang ada di dalam kode html, biasanya diujung kode widget ada titik tiganya.. tinggal di klik aja nanti muncul kode tersembunyinya (expand).

Balas

Terimakasih infonya..
Sangat membantu

Balas

iya sama-sama mb.. semoga bermanfaat dan makasih buat kunjungannya..

Balas

aku udah berkali kali nyoba gan, setelah semua langkah saya selesaikan saya klik pratinjau template untuk melihat hasilnya dan memang berubah sesuai dengan yang diinginkan terus aku simpan, tapi pas dibuka blognya tetap tidak bisa.

Balas

Coba di cek lagi di edit html template nya agan, kalo di buka ternyata kode yang agan pasang ga ada, artinya saat nge save nya ga sempurna atau ga selesai.. di cek dulu aja ya gan..

Balas

permisi, mau nanya kalau saya bikin menu udah, cuma cara ngisi menunya gimana? cara mengatur apa aja isi dari menu itu mas.

makasih

Balas

bisa di isi sama link label aja gan, jadi pas dibuka munculnya semua artikel yang punya label sama. Cara ngisinya ada di point no 8. Sedangkan contoh isi dari menu itu apa aja bisa agan lihat dari menu bar saya di atas.. Semoga bisa membantu..

Balas

kalo buat ngisi menu bar nya gimana gan??...

Balas

Nyari link yg label nya sama gimana gan??...

Balas

Ada di point no 8 gan, di baca lagi aja...

Balas

agan pasang widget label dulu di blognya, terus setiap artikel di pasangin label. Selanjutnya tinggal dipilih label mana yang mau di pasang, ambil url labelnya dan tinggal di pasang di menubarnya.. Semoga bisa membantu..

Balas

gan berarti kalo mau ngisi Menu bar nya harus buat Blog lagi buat diisi URL nya? gitu?

Balas

ga perlu gan, agan bisa isi pake salah satu URL artikel agan tapi ya artinya pas menu bar nya di klik bakal muncul artikel tersebut atau juga bisa agan isi dengan Url label. jadi yang bakalan muncul nanti semua artikel yang memiliki label sesuai dengan url yang agan pasang. Bisa agan lihat contohnya pada menubar saya di atas. Semoga bisa membantu ya gan..

Balas

terimakasih ilmu nya mas irpan, semoga bermanfaat untuk kita semua..

Balas

aaaamin, makasih buat doanya ya gan.. :)

Balas

thank's sob,,,sangat membantu tutorialnya,,,trus cara mengganti nama menunya gmna sob

Balas

mkasih gan tutornya,,,,sangat membantu skali,,,,skalian mo nanya gan,gmna caranya klo mau mengedit font, warna dan ukurannya

Balas

ada kok gan di tutorialnya.. :)

Balas

gandi di font size dan fot backgroundnya.. :)

Balas

gan kalau udah ada ditmplatenya tinggal ngerubah nama menu doank gmn?

Balas

mudah gan.. coba aja kamu cari-cari kode yang mirip2 dengan point no 8 dan 9. untuk mengubah menunya gunakan point nomor 9. semoga bisa membantu.. :)

Balas

koq disetiap ingin klik nama nama menu, tidak bisa berfungsi,,mohon panduanx

Balas

di isi dulu link nya gan.. coba deh baca point nomor 8.. semoga bisa membantu.. :)

Balas

Terimakasih buat artikelnya, mantab sob, menambah pengetahuan, bermanfaat..

http://www.tokoobatku.com/obat-kanker-payudara-herbal/

Balas

Gan kok kode ]]> nya ngga ada pas d search d edit html

Balas

Sekarang sudah banyak template yang sudah terpasang menu barnya gan.. kalo ga pake pages aja..

Balas

Terima Kasih atas kunjungan anda, merupakan suatu kehormatan bagi kami. Silahkan berikan komentar anda sesuai dengan aturan yang tercantum di bawah, insya Allah akan kami tanggapi.

Mohon maaf kalau mengganggu kenyamanan :
1. Komentar yang mengandung SPAM, pornografi dan iklan akan dihapus.
2. Mencantumkan link hidup akan otomatis dihapus.
3. Anda bisa mendapatkan back link dengan berkomentar sebagai Nama/URL.
4. Komentar dari Anonymous dianggap spam dan tidak akan di tanggapi.

Sekali lagi terima kasih atas kunjungannya :)

Copyright © 2013. TiP or TiPS - All Rights Reserved | Template Created by Kompi Ajaib Proudly powered by Blogger | Template Edited by Irpansah