CARA MEMBUAT DROP DOWN MENU HORIZONTAL DI BLOG
Cara membuat drop down menu di blog sebenarnya sangat mudah. Saat
ini semakin banyak blogger pemula yang tertarik untuk belajar
dasar-dasar kode untuk mengatur tampilan blognya. Jadi kali ini saya
hendak berbagi cara membuat drop down menu yang horizontal. Menu ini
bisa ditaruh di bawah header, di atas footer, atau di mana saja dalam
posisi horizontal.
Lalu bagaimana cara membuat menu drop down horizontal ini?
Sebenarnya anda bisa menggunakan CSS yang sangat sederhana untuk
melakukan ini. Untuk memasang Drop down menu horizontal ada dua langkah
yang harus dilakukan, yaitu:
MEMASANG CSS MENU DROP DOWN DI BLOG
- Login ke dalam akun blogger anda
- Pilih blog yang akan dipasangi
- Pilih menu TEMPLATE
- Klik Tombol EDIT HTML. Setelah itu akan muncul jendela konfirmasi, silahkan klik LANJUTKAN
- Carilah kode ]]></b:skin>
Copy kode CSS di bawah ini dan paste tepat di atas kode ]]></b:skin> tadi...
#RickyMenu {
background: warna1;
width: 880px;
height: 35px;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
color: warna2;
font-weight: bold;
margin-bottom: 30px;
padding: 2px;
}
#Rickybox {
width: 875px;
float: left;
margin: 0;
padding: 0;
}
#punch {
margin: 0;
padding: 0;
}
#punch ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#punch li {
list-style: none;
margin: 0;
padding: 0;
}
#punch li a, #punch li a:link, #punch li a:visited {
color: warna2;
display: block;
font-size: 16px;
font-family: Georgia, Times New Roman;
font-weight: normal;
text-transform: lowercase;
margin: 0;
padding: 9px 15px 8px;
}
#punch li a:hover, #punch li a:active {
background: warna2;
color: warna1;
margin: 0;
padding: 9px 15px 8px;
text-decoration: none;
}
#punch li li a, #punch li li a:link, #punch li li a:visited {
background: warna1;
width: 150px;
color: warna2;
font-size: 14px;
font-family: Georgia, Times New Roman;
font-weight: normal;
text-transform: lowercase;
float: none;
margin: 0;
padding: 7px 10px;
border-bottom: 1px solid #FFF;
border-left: 1px solid #FFF;
border-right: 1px solid #FFF;
}
#punch li li a:hover, #punch li li a:active {
background: warna2;
color: warna1;
padding: 7px 10px;
}
#punch li {
float: left;
padding: 0;
}
#punch li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0;
padding: 0;
}
#punch li ul a {
width: 140px;
}
#punch li ul ul {
margin: -32px 0 0 171px;
}
#punch li:hover ul ul, #punch li:hover ul ul ul, #punch li.sfhover ul ul, #punch li.sfhover ul ul ul {
left: -999em;
}
#punch li:hover ul, #punch li li:hover ul, #punch li li li:hover ul, #punch li.sfhover ul, #punch li li.sfhover ul, #punch li li li.sfhover ul {
left: auto;
}
#punch li:hover, #punch li.sfhover {
position: static;
}
- Ganti kode warna1 dan warna2 dengan kode warna yang anda inginkan sebagai contoh bisa mengikuti kode di bawah ini:
Menu Hitam
warna1 = #555555
warna2 = #FFFFFF
Menu Biru
warna1 = #66bbdd
warna2 = #004661
Menu Hijau
warna1 = #38761d
warna2 = #FFFFFF
Menu Abu-abu
warna1 = #d4d4d4
warna2 = #555555
Menu Kuning
warna1 = #ffd966
warna2 = #d4812a
- Jika sudah mengganti semua kode warna di atas silahkan klik SIMPAN TEMPLATE....
MEMASANG KODE HTML DROP DOWN MENU DI TATA LETAK BLOG
- Sekarang masuk ke menu TATA LETAK atau LAYOUT
- Klik ADD A GADGET atau TAMBAH GADGET
- Pilih HTML/JAVASCRIPT. Biarkan kolom judul nama gadget kosong, lalu copy paste kode di bawah ini ke kolom HTML yang tersedia
<div id="RickyMenu">
<div id="Rickybox">
<ul id="punch">
<li><a href="#">Home</a></li>
<li>
<a href="#">Sample Page</a>
<ul>
<li>
<a href="#">Sub Page #1</a>
<ul>
<li><a href="#">Sub Sub Page #1</a></li>
<li><a href="#">Sub Sub Page #2</a></li>
<li><a href="#">Sub Sub Page #3</a></li>
</ul>
</li>
<li><a href="#">Sub Page #2</a></li>
<li><a href="#">Sub Page #3</a></li>
<li><a href="#">Sub Page #4</a></li>
<li><a href="#">Sub Page #5</a></li>
</ul>
</li>
<li><a href="#">Sample Post</a></li>
<li><a href="#">Blog Page</a></li>
</ul>
</div>
</div>
- Edit semua nama menu sesuai keinginan anda. Jangan lupa mengganti tanda # dengan alamat URL yang anda inginkan
- Klik SIMPAN
- Atur posisi gadget drop down menu horizontal ini di tempat yang anda inginkan, lalu klik tombol SIMPAN SETELAN di bagian kanan atas layar.
Jika anda melakukan langkah-langkah di atas dengan benar, anda akan
melihat sebuah horizontal drop down menu di tempat yang anda inginkan.
Bentuknya kurang lebih seperti gambar di bawah ini.
Untuk Menambah Item di dalam drop down menu horizontal ini sangatlah mudah:
- Silahkan cari pada bagian akhir ada kode seperti ini:
<li><a href="#">Blog Page</a></li>
</ul>
- Tepat di bagian atas </ul> bisa disisipkan menu baru, dan akan terlihat seperti di bawah ini:
<li><a href="#">Blog Page</a></li>
<li><a href="LINK BARU">TEKS BARU</a></li>
</ul>
- Jika menu tambahan lebih dari satu akan terlihat seperti di bawah ini
<li><a href="#">Blog Page</a></li>
<li><a href="LINK BARU 1">TEKS BARU 1</a></li>
<li><a href="LINK BARU 2">TEKS BARU 2</a></li>
<li><a href="LINK BARU n">TEKS BARU n</a></li>
</ul>
- Jika salah satu menu tambahan mempunyai sub menu, maka perhatikan kode </li> menu tersebut yang diturunkan untuk membuka ruang baru bagi sub menu di dalam menu tersebut
<li><a href="#">Blog Page</a></li>
<li><a href="LINK BARU 1">TEKS BARU 1</a></li>
<li><a href="LINK BARU 2">TEKS BARU 2</a><li><a href="LINK BARU SUB MENU 1">SUB MENU 1</a></li><li><a href="LINK BARU SUB MENU 2">SUB MENU 2</a></li></li><li><a href="LINK BARU n">TEKS BARU n</a></li>
</ul>
Ok, silahkan divariasikan sendiri cara untuk menambah dan mengurangi item pada drop down menu horizontal di atas pada blog anda. Jika anda tertarik untuk menggunakan drop down menu yang dibuat dengan basis CSS3. Silahkan baca artikel di blog ini, cara membuat drop down menu CSS3. Mudah-mudahan membantu mempercantik blog saudara....
CARA DUA>>>
Cara membuat menu navigasi di blog - Membuat menu bar di header blog merupakan hal yang paling banyak dilakukan oleh para pemula sampai para pakar web atau webmaster. Menu bar di header sebenarnya adalah menu navigasi yang kita sediakan untuk pengunjung blog. Banyak blogger pemula (newbie) termasuk saya nih belum mengerti apa sebenarnya arti dan fungi menu navigasi di bawah header. Untuk itu yang paling penting dan paling utama, kita harus mengetahui terlebih dahulu apa tujuan kita memasang menu bar di blogspot.
Apa tujuan menu navigasi di blog?
Seperti yang saya janjikan diatas. Kita harus menegetahui tujuannya
terlebih dahulu. Berikut penjelasan mengenai apa tujuan kita memasang
menu navigasi di header blog kita.
1. Memudahkan mesin telusur.
Menu navigasi sangatlah penting bagi mesin telusur. Dengan navigasi di
blog kita, mesin telusur akan dengan mudah mencari apa saja isi konten
blog kita. Perlu kita ketahui dalam membuat blog kita harus mementingkan
pengunjung. Dalam hal ini Mesin Telusur atau Mesin Pencari saya
kategorikan sebagai pengunjung juga. Bagaimana kita harus melayani
pengunjung blog kita? haruslah dengan pelayanan yang baik. Jika blog
kita mempunyai navigasi yang baik, maka blog kita akan disukai mesin
telusur dan akan menjadi prioritas dalam pencarian.
2. Memudahkan pengunjung blog
Pengunjung adalah hal yang paling diutamakan. Bagaimana caranya agar
pengunjung merasa mudah dan nyaman. Agar pengunjung betah berlama-lama
di blog sobat. Perlu sobat ketahui, lamanya pengunjung membuka blog
sobat menjadi salah satu penentu tingkat trafik blog sobat. Jika
pengunjung datang dan pergi dengan cepat, berarti blog sobat tidak
memiliki informasi dan pelayanan yang baik kepada pengunjung.
Saya ibaratkan blog itu seperti supermarket, tentunya isi dari
supermarket itu sangat banyak. Pengunjung supermarket harus
dipentingkan. Apabila sobat mempunyai supermarket dan menaruh barang
bercampur aduk dan tempatnya tidak tidak menentu maka akan menyusahkan
pengunjung supermarket. Misalnya mereka ingin mencari Sabun Cuci, mereka
harus mencari satu persatu di dalam supermarket yang luas. Untuk itu
kita harus mengelompokkan barang sesuai jenisnya dan kegunaannya.
Begitu pula dengan blog kita harus mengelompokkan artikel dan membuat
navigasi. Tujuan membuat menu navigasi bagi pengunjung yaitu: Untuk
memudahkan pengunjung mengeksplorasi blog kita, berpindah dari halaman
satu ke halaman yangh lainnya yang berisi konten spesifik yang
pengunjung butuhkan.
3. Memanfaatkan Ruang di bawah Header
Jika kita tidak mengisi bagian di bawah header blog, maka akan terjadi
kekosongan. Mengapa kita harus mengosongkannya? Padahal kita dapat
mengisinya dengan hal yang lebih berguna bagi pengunjung blog kita.
4. Tampilan lebih berkesan
Bagi blog pemula nih, tujuan ini yang paling diperhatikan. Tidak ada
salahnya juga. Dengan memasang menu navigasi di blog kita akan membuat
tampilan blog kita menjadi lebih berkesan terlebih lagi menjurus ke arah
kata keren. Ini akan membuat pengunjung sobat menjadi terkesan dan akan kembali mengunjungi blog sobat.
# Cara membuat menu bar di blogspot dengan mudah
Lalu, banyak yang bertanya-tanya bagaimana cara membuat menu navigasi di
blog? apa yang harus kita siapkan? apa yang harus kita lakukan? berikut
adalah Cara membuat menu bar di blogspot dengan mudah. Dengan
memanfaatkan widget yang ada di blogger.com. Baca sampai habis ya sob.
Oke misalnya saya mempunyai tampilan blog seperti di bawah ini. Blog ini
tidak memiliki menu dibawah header blog. Hanya berisi satu artikel, dua
widget di sidebar yaitu arsip blog dan profil. Saya akan membuat menu
navigasi di bawah header blog ini.
Berikut langkah-langkah membuat menu navigasi di blog:
1. Silahkan menuju blogger.com kemudian sign in di blog sobat.
2. Buka halaman dasboard kemudian klik Layout. Kemudian klik add widget pada bagian bawah header lihat gambar yang di lingkari merah.
3. Kemudian cari widget Pages. Klik ikon tambah untuk menambahkan pages ke halaman blog sobat.
4. Pada bagian bawah Page to Show klik add external link untuk
menambahkan menu blog. Misalnya saya akan menambahkan alamat ke halaman
facebook saya dan mengisi URL ke halaman facebook saya seperti contoh
berikut. Kemudian klik Save Link.
5. Untuk menambahkan lebih banyak menu silahkan ulangi langkah ke 4. Setelah selesai, langkah terakhir klik Save. Berikut tampilan hasi penambahan page di blogger.com
# Cara membuat menu navigasi dengan kode
Tujuannya tetap sama yaitu membuat menu dibawah header. Namun langkah
langkanya yang berbeda mungkin cara berikut sulit bagi pemula seperti
saya. Tapi sebenarnya tidak terlalu susah, oke berikut
langkah-langkahnya:
1. Silahkan sign in di blogger.com kemudian buka blog sobat. Pada menus dashboard klik menu Template kemudian klik Edit HTML.
2. Cari kode ]]></b:skin> dengan CTRL + F lalu ketik kode tersebut. setelah di temukan, Copy kode berikut kemudian letakkan di atas kode ]]></b:skin>
/*Top Menu*/Catatan.
#top{margin:auto;padding: 0;width: 950px;background:#eeeded;border-bottom:1px solid #ddd;}
#top-wrap{margin:auto;padding: 0;width: 950px;background:#eeeded;}
#navwrap {margin: 0px auto; width:560px; float:left;background:#080705;}
.topnav ul {list-style:none;margin:0;padding:0px; float:left;}
.topnav li {float:left;margin:0;text-align:center;}
.topnav li a {font-family: arial; font-weight:bold; font-size:11px;display:block;padding:10px 10px;color:#222;text-decoration:none; text-transform:uppercase;}
.topnav li a {background:none; }
.topnav li a:hover, li a:focus, li a:active {text-decoration:none; background:#ffffff; color:#000000;}}
#navbar-iframe {display: none !important;}
Silahkan ganti nilai width: 950px sesuai lebar blog sobat
Silahkan ganti kode warna background:#eeeded sesuai yang sobat inginkan.
Silahkan ganti warna tulisan color:#222 jika sobat inginkan.
3. Langkah selanjutnya yaitu cari CTLR+F kode </head> atau <body> kemudian copy lalu paste kode berikut tepat dibawah kode </head> atau <body>
<div id='top'>Catatan
<div id='top-wrap'>
<div class='topnav'>
<ul id='topnav'>
<li><a href='http://carawoles.blogspot.com/' title='Top Menu'>Top Menu</a></li>
<li><a href='http://carawoles.blogspot.com/' title='Contact'>Contact</a></li>
<li><a href='http://carawoles.blogspot.com/' title='Disclaimer'>Disclaimer</a></li>
<li><a href='http://carawoles.blogspot.com/' title='Privacy Policy'>Privacy Policy</a></li>
<li><a href='http://carawoles.blogspot.com/' title='Facebook'>Facebook</a></li>
<li><a href='http://carawoles.blogspot.com/' title='Twitter'>Twitter</a></li>
<li><a href='http://carawoles.blogspot.com/' title='Google Plus'>Google Plus</a></li>
</ul>
</div>
</div>
<div style='clear: both;'/>
</div>
Silahkan ganti http://carawoles.blogspot.com/ dengan alamat yang sobat inginkan dan ganti Top Menu dengan judul menu navigasi yang sobat inginkan.
4. Klik Save Template. Selesai
Demikian Cara membuat menu navigasi di blog semoga bermanfaat. terima kasih
No comments:
Post a Comment