Cara membuat Menubar di blog

Cara membuat Menubar di blog

Cara membuat Menubar di blog - Hmm, sobat sudah pada tau menubar itu apa kan? hah belum? okedeh tidak apa-apa reggy jelaskan lagi untuk yang belum tau. Menubar adalah sebuah kotak tab/bar yang isinya berupa navigasi link. Fungsi menubar yaitu untuk menyimpan link-link penting di suatu blog, agar pengunjung dapat lebih mudah mengunjungi halman-halaman utama yang ada pada suatu blog itu. Pada postingan sebelumnya saya juga telah menjelaskan bagaimana cara membuat menubar pada template klasik.  Namun, bedanya kali ini membuat menubar pada custom template. Untuk melihat bagaimana screenshot menubarnya lihat di bawah ini:
cara membuat menubar di blog
Menubar ini juga bisa dibuatkan lagi submenu kebawahnya, lihat di gambar. Nah jadi misalkan sobat ingin memasang submenu dari sebuah link itu tinggal menambah sedikit kode yang akan dijelaskan dibawah. Oh iya, menubar di postingan ini tidak ada search box seperti digambar. Tetapi jika sobat ingin membuat menubar di blog dengan search box, silahkan kunjungi postingan Disini. Sudah tau kan bagaimana penampakan menubar di blog itu? nah, cara membuat menubar di blog tidak sulit kok.

1. Login pada blogger
2. masuk ke halaman Template
3. Edit HTML
4. Cari kode ]]></b:skin> (gunakan ctrl+f)
5. Pasang kode di bawah ini 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
}
7. Selanjutnya cari kode <div id="content-wrapper">
8. Pasang kode di bawah ini di Atas kode yang bercetak tebal pada no 7. Pengecualian untuk yang tidak ada kode pada no 7, sobat bisa menaruh dielemen div id lainnya. Biasanya template blog terdapat kode seperti <div id='header.... Jadi, bila tidak ada sobat bisa menaruhnya di bawah kode yang mirip dengan <div id='header...
<div id='menubar'>
<ul>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='http://blognya-reggy.blogspot.com/'>Edit me</a></li>
<li><a href='http://blognya-reggy.blogspot.com/'>Edit me</a></li>
<li><a href='http://blognya-reggy.blogspot.com/'>Edit me</a></li>
<li><a href='http://blognya-reggy.blogspot.com/'>Edit me</a></li>
</ul>
</div>
9. Simpan Template dan lihat hasilnya

Untuk membuat sub menu (menu dropdown) agar mudah ganti saja kode pada no 8 dengan kode di bawah ini
<div id='menubar'>
<ul>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='http://blognya-reggy.blogspot.com/'>Edit me</a></li>
<li><a href='http://blognya-reggy.blogspot.com/'>Edit me</a></li>
<li><a href='http://blognya-reggy.blogspot.com/'>Edit me</a>
<ul>
<li><a href='http://blognya-reggy.blogspot.com/'>Edit me</a></li>
<li><a href='http://blognya-reggy.blogspot.com/'>Edit me</a></li>
</ul></li>
</ul>
</div>
Keterangan:
  • Ganti tulisan yang berwarna Merah dengan url link menubar yang diinginkan, misal: link postingan, link kategori, link halaman statis atau lainnya
  • Ganti tulisan berwarna Biru (Edit me) dengan tulisan judul menubar tersebut, seperti: About, Contact, Guest book atau lainnya
  • Untuk mengubah panjang menubar bisa sobat ganti tulisan 900px menjadi sesuai dengan keinginan sobat
  • Nah, jika sobat ingin menambah item menubar (list), sobat hanya tinggal Copy kode yang bergaris bawah, dan Paste di bawah kode yang bergaris bawah tersebut.
  • Di setiap blog juga ada juga yang berbeda tanda kutipnya. Sobat bisa menelitinya lagi. Tanda kutip ' atau " 
Misalkan kode <div id="content-wrapper"> atau sejenisnya memang benar2 tidak ada. Sobat bisa menaruhnya di area kode header sobat. Caranya sobat bisa mengklik tombol Lompat ke widget lalu mengklik widget header sobat. Contoh pada gambar

Setelah itu. Letakkan kode menubar yang berada pada langkah no 8, di bawah kode widget header blog sobat. Bisa dibawah </b:section> atau dibawah kode </div> pada gambar. Itu meletakkan menubar dibawah header blog sobat.
Sebenarnya masih ada juga kode sejenis main-wrapper, header-wrapper, header-inner dll. Nah, kode menubar dapat diletakkan di kode-kode css sejenis itu.

Bagaimana? mudah kan. Inget sob, kunci utama keberhasilan membuat menubar pada blog yaitu ketelitian dalam mengedit dan memasang kode css/htmlnya. Misalkan ada yang kurang atau kesalahan sedikit, menubar itu malah jadi gagal alias tidak terpasang. Jadi, sobat harus lebih teliti ya agar tidak keliru, good luck sobat ;)
Cara membuat Menubar di blog
Writter: Reggy Zian Purnama
DMCA.com Orang pandai tau tata krama. Dilarang copy paste artikel tanpa seizin penulis!

278 comments Skip to comments

«Oldest   ‹Older   201 – 278 of 278   Newer›   Newest»

CARA Msukkan kalimat ke dalam menu bar yg kita buat gimana?

kok malah mucul tulisan tulisan gitu ya kak? mohon pencerahannya

]]>

Mas, code ini gak bisa ketemu di template saya. warna merah di find nya. itu gimana solusinya Mas?

Gan kok menubarnya terlalu keatas gimana cara nuruninya ??

-mohon di balas

gan, cara menyesuaikannya gmn?
warna dan letaknya gak sesuai sama templatenya
mohon di balas ya

TERIMAKASIH BUANGET

Akhirnya bisa rapi blog ku. setelah sekian lama browsing petunjuk2 lain gak berhasil, akhirnya pas nemu blog ini berhasiiilll horeeeee \(^^)/
makasih ya mas

bro nanya lagi niy. waktu mau bikin sub menu lagi. aku copas yg bergaris itu kok gak bisa ya. katanya xml li harus finish dengan "

bingung jadinya @_@

Tidak dapat memuat pratinjau template: Kesalahan saat mengurai XML, baris 505, kolom 3: The element type "li" must be terminated by the matching end-tag "".

Muncul pesan kayak gini gan. Gimana dong?

Kok menubar yang saya bikin susun vertikal (ke bawah)? gimana gan??

gan, cara mengganti background secara keseluruhan gmana tuh, sy pake template blogger.com cma sy mau ganti dgn warna polos aja gmana carax gan? thks. sblumx

Keren Gan udah Berhasil Tapi kok buat nyesuaikan kalo ngeklik menu bar nya, trus muncul nya di postingan yg kita maksud. itu gmna ngeditnya ya gan? Tolong Penjelasannya dong gan

Saya msh tahap belajar, terimakasih atas psotingannya yaa mas

kak reggy saya udah nyoba,sepertinya di blog saya tidak bisa soalnya udah beberapa kali saya coba lalu saya simpat tidak ada perubahannya kak.... mohon bantuannya kak.....

saya pernah coba script yang diatas,kemudian untuk memasukan artikel saya edit2 lagi dan masuk.tapi kenapa hasil tampilan menu/font menu maupun ukuran bisa beda.[beranda,program,lainya]ukuran dan font sama[karya,agama,ip-tek]kenapa bisa 2 macam kira 2 yang salah edit bagian manaya? trims atas jawabanya

gan klo kita pengen masukin 2 url gimana ya? jadi satu bar itu pngen dimasukin lebih dari satu url

kalo mau bikin dalam satu menubar tp ada banyak artikel bagaimana...???"

Alhamdulillah, makasih gan atas pencerahannya

makasih infox gan,salam dari saya pendatang baru di blog.

Artikelnya bermanfaat gan,

mampir gan ke gubug ane http://udinandroid.blogspot.com

bang , nanyak ni pas nmasukin kode cara ke 7 kok gk ketemu ??

makasih banyak buat tutornya,, sangat bermanfaat sekakali

http://goo.gl/TyqyTY

sangat membantu artikelnya, kunjung balik sob
http://goo.gl/6BYMsk

kalo mau ngeposting di menubar gimana ,,? misal mau pos di menu liga inggris .

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

http://emangobattradisional.blogspot.com/

sangat bermanfaat bagi saya yg masih baru :)
http://stainperssorong.blogspot.com/

cara biar postingannya masuk di menu bar itu gimana gan?

Sangat membantu sekali artikelnya….”
Kunjungi juga blog saya di
Edhay Sport
Edhay Blogger
Edi Sudrajat (Google+)

Gimana cara biar banyak yang mengunjungi blog ku sob aku ank baru sob minta saran

thanks buat tutornya gan,, sangat memabantu sekali.. http://goo.gl/NQSzZm

Matur nuwun atas panduannya, semoga blog kami menjadi lebih menarik...

digambar ada kotak pencarian, setelah dicoba tidak ada kotak pencarian????

ane bingung dari awal gan hahaha gimna ni ????

diblog saya kok gk bisa
http://annekaposting.blogspot.com/

the information is really useful for me ....
and I wait for your next information is even better,,,,
Thank you ...

Also visit our website ⇛ motor | mobil | otomotif | modifikasi

Gan knapa menunya vertikal ya..cara ngubah ke horizontal gimana ya?

Ninggal jejak gan, trims cukup bagus cuma kurang rapi sedikit

gan cara buat « Newer Post Older Post » Home

Tukaran link dong tentangpengetahuankita.blogspot.com

Kalo boleh minta template blog ini dong mas, kirim ke vcleapz@gmail.com ya. Makasih sebelumnya :)

mas udah tak klik sesuai yang di atas kok tetep kosong ya. yang di kotak abu abu yang ada tanda petiknya di copas di htmlku gitu??

Gan yg ada kode ini pada cara nomor 4 <\b: skin> apa di copas di atas kode itu? Mohon di jawab secepatnya

thanks gan infonya...

bagi agan yang berminat belajar membuat web bisa dilihat di situs berikut ini Belajar Membuat Web

untuk membuat menu bar yang sedikit (sedikitnya 3 menu bar) gimana boss min..? atau cara mengurangi menu bar yang sudah ada di blog..??

masukkin postingan artikel ke menubarnya gimana sob ?

thanks gan tutornya sangat bermanfaat bangettt~

Nice For U, Dont Forget Me.. And Yu See My Web - Regards :
obat kuat viagra
obat viagra
viagra asli
beli viagra
http://viagra-id.com/obat-kuat/distributor-harga-obat-kuat-viagra/

Kalo mau menghilangkan dropdown menu side bar pada blogpsot dengan menggunakan template dinamis gimana caranya yah ?! Sudah search tutorialnya belum ketemu juga. Mohon infonya. Trims.



Ingin dapat penghasilan dari forex ?! Hanya dikerjakan di laptop atau smartphone Anda, lalu dollar mengalir jika tahu caranya, klik situs asli Instaforex dibawah ini :

https://www.instaforex.org/id/index.php?x=KMFR

Cara daftarnya mudah, ikuti pentunjuk link dibawah ini :

http://instafx-web.blogspot.co.id/2015/12/cara-buka-akun-forex-trading-di.html


Website resmi akan regera hadir dengan alamat website :

www.myinstafx.com

Ini gan aplikasi swalayan gratis... Full fitur...
Http://id-swalayan.blogspot.com

TRIMS SOB...SANGAT MEMBANTU ARTIKELNYA...

GAN kok yang tulisan EDIT ME di blog ane kagak berwarna biru gan? gmna ni jd masalh kgk tu?

mau tanya, kalo saya sdh buat menubar lalu saya ingin mengelompokan post saya gmn ya caranya?misal saya nulis about me yg saya mau cm ada di menu about me. lalu review film yg ada di review film, cm ini masuk ke semua menu. gmn cara misahinnya ya? tks

gan kok di blog saya,di bagian edit HTML gk ada tulisan ]]>,padahan udah saya cari pake ctrl+f..tolong bantuannya gan.Makasih

mantep banget om, di terapin di tempalte bawaan blogger mantep.. tinggal edit dikit jos......

salam blogger,
kalo sempet mampir ke warung Mang Munk

Mau menu yang keren sini http://bit.ly/2nxWSiL

thanks gan. manfaat artikelnya, dtunggu artikel selanjutnya ya gan

«Oldest   ‹Older   201 – 278 of 278   Newer›   Newest»

Berkomentarlah dengan baik dan sopan. Dilarang oot dari artikel diatas. Komentar yang menyertakan link aktif maupun statis termasuk promosi akan langsung kami hapus.
Show Konversi Kode Hide Konversi Kode Show Emoticon Hide Emoticon