Membuat Menu Horizontal Blogspot . Bagaimana Tutorial Cara Membuat Menu Horizontal di blogspot seperti menu kolom Home, About, Contact and Other secara horizontal,banyak jenis menu horizontal yang bisa divariasikan, seperti dengan dropdown CSS ,multi level jquery ,anvigasi slide dan dengan html jquery.
nah kali ini saya akan berikan tutorial cara Membuat Menu Horizontal pada Blogspot , berikut caranya :
-Login ke blogger.com, lalu pilih design .
-Pilih Edit HTML, download full template untuk jaga jaga kalau nanti ada kesalahan jadi bisa di kembalikan seperti semula templatenya.
-Lalu Centang kotak expand template widget pada template Anda, dan cari kode: </b:skin>
Hapus kode tersebut dan ganti dengan kode:
</b:skin><style type='text/css'>.pagemenu-container #pagemenu{position:relative;display:block;height:42px;font-size:11px;font-weight:bold;background:#000 repeat-x top left;font-family:Arial,Verdana,Helvitica,sans-serif;text-transform:uppercase}.pagemenu-container #pagemenu ul{margin:0;5px;0px;5px;padding:0;border:1px solid $bordercolor;list-style-type:none;width:860px}.pagemenu-container #pagemenu ul li{display:block;float:left;margin:0 1px 0 0}.pagemenu-container #pagemenu ul li a{display:block;float:left;color:#fbdafa;text-decoration:none;padding:10px 18px 0 18px;height:28px}.pageme nu-container #pagemenu ul li a:hover,.pagemenu-container #pagemenu ul li a.current{color:#fff;background:#306 no-repeat top center}</style>
Lalu sobat cari kode:
<div id='content-wrapper'>
Hapus dan ganti dengan:
<div class='pagemenu-container'> <div id='pagemenu'> <ul> <li class='page_item home'><a href='http://www.berryhs.com/' title='Home'>Home</a></li> <li class='page_item page-item-2'><a href='http://www.berryhs.com/l' title='About'>About</a></li> <li class='page_item page-item-3'><a href='http://www.blogger.com/profile/16474552668039271355' title='Contact Us'>Contact</a></li><li class='page_item page-item-4'><a href='http://www.berryhs.com/2011/10/daftar-isi.html' title='Daftar Isi'>Daftar Isi</a></li><li class='page_item page-item-5'><a href='http://www.berryhs.com/2011/12/belajar-blog-dari-awal.html' title='Belajar Blog'>Blog</a></li></ul></div> </div> <div id='content-wrapper'>
Keterangan:
Kode background: #000 : warna latar belakang dari menu horizontal, #000 adalah kode warna hitam, silakan ubah warna latar sesuai keinginan sobat.
Kode width:860px : panjang horizontal menu nya, silakan samakan dengan panjang pada kode #header-wrapper atau panjang #outer-wrapper blog sobat.
Kode {color:#fff;background:#306 no-repeat top center} : warna text dan warna background pada saat disorot dengan pointer mouse.
Jangan lupa gan url link berry blog dengan punya sobat .
sekian dari berry blog, semoga tutorial cara Membuat Menu Horizontal di Blogspot dapat bermanfaat bagi sobat blogger semua.
35 Responses to "Cara Membuat Menu Horizontal Blogspot Keren"
nice info sob...maksi tutornya..
Mantap sobb jgn lupa
mampir ke blog ane
http://hacker-baturaja.blogspot.com
Mampir Gan
ass mas, kalo daftar isi nya itu di tambah menu dropdown gmna yah cara nya ?
berhasil :)
bisa lihat disini untuk menambahkan sub menu http://www.berryhs.com/2012/02/cara-menambahkan-sub-menu-di-menu.html
makasih gan,,,
ukh infonya keren,,,
salam kenal,,,,,,
gan, kalau membuat url yang nanti dilink ke menu-menu horizontal itudarimana dapatnya? sehingga nantinya bisa diatur sesuai keinginan diarahkan ke menu SOFTWARE, menu TIPS n TRIK, menu TUTORIAL, caranya bagimana?
tinggal ganti saja alamat url punya saya yg di menu dgn yg aganinginkan :)
http://www.berryhs.com/2011/12/cara-memasukkan-link-ke-menu-blog.html
Mas Berry.. Makasih ini yg kucari.. Tapi ada pertanyaan lagi nih.. Untuk "Kode {color:#fff;background:#306 no-repeat top center} : warna text dan warna background pada saat disorot dengan pointer mouse.", itu di Blog-ku kok gak berubah warna y? Thanks..
coba saja di ganti kode warnanya sob dgn yang di inginkan , misal jadi #000 atau yg lainnya.
thanks atas ilmunya, akan saya coba
thanx ya atas informasinya...sangat berguna sx bg kami
saya coba dulu gann...thx 4 sharing...
kok aku bingung ya gan -,-
terimaksih atas tutornya kunjungi ya....
kok gak ada kode yang kedua punya aq....
1 Jam lbih aq mencarinya,,..????
tolong bantuan n bimbingannya aq pemula ini tolong diliat kalau ada yang salah pada blog aq,,,http://amkasip.blogspot.com/
Mantap nih gan tutor-nya, lumayan lengkap, makasih.
wahyoemsc.blogspot.com
Blog ane kalo ada yang mau mampir :D
mantep..
ok gan
maaf om, kog saya cari kode ini id='content-wrapper'> )di template saya tidak ada ya?? makasih muktiyulianto.blogpsot.com
terima kasih ya...
gue mau lanjut dulu, mau nyobain.
mas mukti jangan lupa centang expand template widget dulu supaya semua kode muncul, kalau gk muncul juga templatenya lain :)
tq ya gan...
Maaf kok saya cari kode dua2nya gak bisa ketemu ya? atau saya memang harus ganti template? maaf ganggu
kok punye luuu yang keluar?
keren artikelnya....!!!1
thanks
makasih banyak gan untuk semua informasinya....
teriamaksih gan , atas semua informasinya .. !! sukses selalu .. !
terimaksih gan , atas informasinya, salam kenal gan ,,,
gan, kok coba saya pasang ndak bisa ya??
Kalo boleh tau cara membuat menu horizontal seperti punya Agan bagaimana? Kalo kiranya sudi kirim ke; hand_169@yahoo.co.id ya Gan...
Terimakasih
Mengunjungi blog yang bagus dan penuh dengan informasi menarik tentang membuat menu horizontal blogspot adalah merupakan kebahagiaan tersendiri bagi kami... teruslah berbagi informasi
gan di blog ane kog ga ada yg code yg kedua nya...
Terimakasih gan di coba dulu
Posting Komentar