Tips Blogger

  1. Cara Membuat Blog
  2. Cara Memasang Templete
  3. Cara Membuat Live Traffic Feed
  4. Cara Membuat Visitor Histats
  5. Cara Merubah Cursor Pada Blog
  6. Cara Membuat Widget di Header
  7. Cara Membuat Menu Dropdown
  8. Cara Membuat Meta Tag
  9. Cara Memperkecil Ukuran Feedburner Dari 576K
  10. Cara Membuat Gambar Melayang
  11. Cara Menampilkan Jumlah Pembaca pada Email Subscriber
  12. Cara Mensetting Blog
  13. Cara Memasang Alexa Rank
  14. Cara Membuat Text Area
  15. Cara Membuat Text Area Select All
  16. Cara Memasang Jam
  17. Cara Membuat Link Berjalan
  18. Tips SEO (Search Engine Optimization)
  19. Cara Mengganti Judul Blog Dengan Judul Postingan
  20. Cara Agar Blog Terkenal
  21. Cara Agar Blog Banyak Dikunjungi
  22. Cara Unik Agar Blog Selalu Rame
  23. Cara Melihat Harga Jual Blog
  24. Cara Meningkatkan Pageviews
  25. Cara Membuat Form Berlangganan
  26. Cara Membuat Off/Online Yahoo Messenger
  27. Cara Membuat Visitor Flag Counter
  28. Cara Mengganti Logo Blogspot
  29. Cara Meningkatkan Alexa Rank
  30. Cara Menambah Tag Alt Pada Gambar
  31. Cara Membuat Read More
  32. Cara Membuat Tombol Reply Pada Komentar
  33. Syarat Google Adsense
  34. Situs - Situs Pay Per Click
  35. Cara Membuat Daftar Isi 3 Kolom
  36. Cara Membuat Recent Comment
  37. Cara Membuat Background Posting
  38. Cara Membuat Link
  39. Cara Membuat Contact Form / Kontak Kirim Email
  40. Cara Membuat Text Flash
  41. Cara Membuat Link Berkedip Warna Warni
  42. Cara Membuat Buku Tamu Shoutmix
  43. Cara Membuat Daftar Isi
  44. Cara agar Postingan Baru Tidak Muncul Pada Home
  45. Cara Membuat Translator
  46. Cara Memasang Site Meter
  47. Cara Mengetahui Jumlah Pengunjung Yang Online
  48. Cara Memasang Ip Address Checker
  49. Cara Menghitung Total Pengunjung
  50. Cara Membuat Tanda Tangan
  51. Cara Memasang PageRank
  52. Cara Memasang Kalender
  53. Cara Membuat Huruf Besar Pada Awal Postingan
  54. Cara Meningkatkan Traffic Blog
  55. Cara Merubah Tampilan Alexa Dan Page Rank
  56. Cara Membuat Tools Mengukur Berat Blog
  57. Cara Mengukur Berat Blog
  58. Cara Membuat Convert Kode Html
  59. Cara Posting Kode HTML
  60. Cara Mengecek Blog Yang Dofollow
  61. Cara Membuat Blog Menjadi Dofollow

Artikel Populer

Download Software GRATIS

Cara Membuat Menu Dropdown


Kemarin saya ketemu teman saya dikampus dan dia bertanya kepada saya bagaimana tips membuat dropdown menu dan sekarang saya akan menjelaskannya. Mungkin dia masih pemula baru pertama bikin blog dan jangan salah saya juga masih pemula alias masih newbe hehehe. Mau mempunyai menu dropdown seperti ini, ini fungsinya untuk memudahkan pengunjung supaya tau isi dari menu Anda. Contohnya pada gambar tanpa diklik menu Semester akan keluar atau menjulur ke bawah seperti pada gambar diatas dan banyak lagi fungsinya. Sekarang saya akan menjelaskan sedikit teknik untuk membuat menu dropdown yang mungkin agak menarik. Ayo ikuti tutorial berikut ini:

1. Login ke blogger, Dasbor pergi ke>> Rancangan>>Edit HML.

2. Centang Expand Template Widget.

3. Anda juga perlu untuk membackup template asli anda terlebih dahulu dengan Download Template Lengkap dan memilih simpan/save dan menyimpannya pada hard disk. Cadangan ini akan bermanfaat jika ada yang tidak beres dengan langkah2 yang anda kerjakan.

4. Cari kode : ]]></b:skin>

Kalau sulit bisa dengan cara cepat saat pencarian yaitu dengan tekan CTRL F/F3.

5. Letakkan kode dibawah ini diatas kode tersebut.


/*--Navigasi Dropdown Menu--*/
#navdropdownmenu{
background:black; /*Warna Latar Belakang */
width:950px;
height:auto;
margin:0;
padding:0;
}
#navdropdownmenu ul{
float:left;
list-style:none;
margin:0;
padding:0;
}
#navdropdownmenu li{
list-style:none;
float:left;
}
#navdropdownmenu li a, #navdropdownmenu li a:link, #navdropdownmenu li a:visited{
color:yellow; /* Warna Teks */
display:block;
padding:9px 10px 9px 10px;
font-size: 12px; /* Ukuran Teks */
font-family: verdana; /* Jenis font */
text-decoration:none;
}
#navdropdownmenu li a:hover{
background:yellow; /* Warna latar saat kursor mouse berada di atasnya undefinedhover) */
color:blue; /* Warna teks saat kursor mouse berada di atasnya */
}
#navdropdownmenu li ul{
z-index:10;
position:absolute;
height:auto;
width:200px; /* Lebar submenu */
visibility:hidden;
}
#navdropdownmenu li ul li a, #navdropdownmenu li ul li a:link, #navdropdownmenu li ul li a:visited{
float:none;
background:black; /* Warna latar belakang submenu */
width:180px; /* Lebar submenu. Isi dengan nilai yang sama */
border-width:1px; /* Tebal garis pinggir submenu */
border-style:solid;
border-color:#ffff66; /* Warna garis pinggir submenu */
}
#navdropdownmenu li ul li a:hover{
background:yellow; /* Latar belakang submenu ketika kursor mouse berada di atasnya */
color:black; /* Warna teks submenu ketika kursor mouse berada di atasnya */
}
#navdropdownmenu li:hover ul{
left:auto;
visibility:visible;
}

Anda bisa merubah atau mengedit kode CSS yang ditunjukkan warna merah sesuai dengan kondisi template anda.

6. Kemudian cari kode: <div id='header-wrapper'>

7. Masukkan kode dibawah ini sebelum kode berikut:


<ul id='navdropdownmenu'>
<li><a href='http://mas-debby.blogspot.com/2010/12/teknik-komputer_14.html'>Home</a></li>
<li><a href='http://mas-debby.blogspot.com/2010/12/mata-kuliah_08.html'>Mata Kuliah</a></li>
<li><a href='http:/mas-debby.blogspot.com/2010/12/semester.html'>Semester</a>
<ul>
<li><a href='http://mas-debby.blogspot.com/2010/12/semester-i-1st.html'>Semester I / 1st</a></li>
<li><a href='http://mas-debby.blogspot.com/2010/12/semester-ii-2nd.html'>Semester II / 2nd</a></li>
<li><a href='http://mas-debby.blogspot.com/2010/12/semester-iii-3rd.html'>Semester III / 3rd</a></li>
</ul>
</li>
<li><a href='http://mas-debby.blogspot.com/2010/12/software.html'>Software</a></li>
<li><a href='http://mas-debby.blogspot.com/2011/01/kode-warna-html.html'>Kode Warna Html</a></li>
</ul>

8. Lalu ganti warna merah dengan link anda dan warna hijau dengan judul link anda OK. Anda bisa mengkondisikan dengan posisi dimana Anda akan taruh menu dropdownnya. Biasanya menu normal Anda adalah Anda cari kode Home dan urlnya di Edit HTMLnya kemudian Anda ganti dengan kode diatas.

9. Jangan Lupa Simpan Template. Semoga berhasil kalau masih bingung Anda boleh kirim komentar dibawah ini Mas Debby akan bantu.

comment 37 komentar:

Abu Hanan on 15 Maret 2011 13.04 mengatakan...

mas.kode div id='header-wrapper' tidak saya temukan.
ada alternatif lain?
info anda sangat membantu.
salam

Mas Debby mengatakan...

@Abu Hanan
Bang kalau saya cek di blog Anda coba cari kata Beranda atau
Rasulullah dan Pengikutnya atau
Orang Tua atau
Hukum atau
Sains pada menu Rancangan Edit HTML

Itu pasti dalam satu kesatuan.

Kalau masih bungung cari kode yang mirip dengan

<li><a href='http://isyfatihah.blogspot.com/'>Beranda</a></li>

Lalu Anda hapus dan ganti dengan kode yang saya berikan.

Jika sudah ketemu/belum silahkan berkomentar kembali...

Ilmu-Teknik on 16 Maret 2011 01.55 mengatakan...

bang kode div id='header-wrapper' itu tidak bisa saya temukan... im a newbie teknik-unrika.blogspot.com tolong yah gan...

Ilmu-Teknik on 16 Maret 2011 02.06 mengatakan...

gan memperbesar tulisan posting gimana gan?

Mas Debby mengatakan...

@Ilmu-Teknik
Kalau saya lihat dari blog Anda. coba Anda cari kode berikut pada rancangan edit html.

<li><a href='http://teknik-unrika.blogspot.com/'>Beranda</a></li>
<li><a href='http://teknik-unrika.blogspot.com/p/daftar-isi.html'>Teknik Mesin</a></li>
<li><a href='http://teknik-unrika.blogspot.com/p/daftar-isi_15.html'>Daftar Isi</a></li>
<li><a href='http://teknik-unrika.blogspot.com/p/free-software.html'>Free Software</a></li>
<li><a href='http://teknik-unrika.blogspot.com/p/pasang-iklan.html'>Pasang Iklan</a></li>
<li><a href='http://teknik-unrika.blogspot.com/p/trik-tips.html'>Trik & Tips</a></li>
<li><a href='http://teknik-unrika.blogspot.com/p/request.html'>Request</a></li>

Kedimudian Anda ganti kode diatas dengan code yang saya berikan yang di bawah <div id='header-wrapper'>
Ok semoga berhasil dan kalau ingin memperbesar tulisan posting Anda bisa lakukan pada menu posting yang Anda liat di metu tulis bukan edit html yang bergambar T disamping font. Semoga berhasil silahkan berkomentar kembali...

Abu Hanan Abdullah on 20 Maret 2011 15.05 mengatakan...

kode yang serupa dgn
li a href http isyfatihah blogspot com Beranda ali
tidak saya temukan begitu juga div id =header *** tidak ketemu juga.

Mas Debby mengatakan...

@Abu Hanan Abdullah
Masa belum ketemu bang,,,wah ga mngkin itu soalnya sudah saya cek,,yg lain aja berhasil...

Abu Hanan Abdullah on 21 Maret 2011 16.16 mengatakan...

kurang teliti?okelah,,,
lantas utk membedakan komen admin dengan pengunjung gimana mas?

Abu Hanan Abdullah on 21 Maret 2011 16.36 mengatakan...

mas,yang mendekati ;
1.li a expr:href='data:link.target' data:link.name a li
2.li a expr:href='data:i.userUrl' data:i.display-name a li
mana satu yang bisa dipakai?

Mas Debby mengatakan...

@Abu Hanan Abdullah
Coba Anda pilih yang dibawah_y ada kode <li><a href='http://isyfatihah.blogspot.com/p/rasulullah-dan-pengikutnya.html'>Rasulullah dan Pengikutnya</a></li>

Abu Hanan Abdullah on 22 Maret 2011 02.11 mengatakan...

sudah saya coba tapi hasilnya nihil
berikut HTMLnya
ul id='navdropdownmenu
li a href='http://isyfatihah.blogspot.com/hukum.html'hukum a li
li a href='http://isyfatihah.blogspot.com/2011/03/islam-3al-quran-sebagai-sumber-hukum.html'Al Quran a li
li a href='http://isyfatihah.blogspot.com/2011/03/islam-1sebuah-pengenalan.html Mengenal Hukum Islam a li
ul

yang diatas b skin uda di paste,sorot seperti pny anda blm bisa.
walah,,,

Mas Debby mengatakan...

@Abu Hanan Abdullah
Masa ga bisa,mnk Anda dapet template dari mna??
Coba cari template yang CSS_y lebih komplit di blogtemplate4u.com

abu hanan on 26 Maret 2011 00.36 mengatakan...

meluncur TKP....
template saya bawaan waktu pertama nge-blog.beberapa trik pernah saya coba tapi si penulis trik ada yang bilang "bisa jadi versi bloggernya berbeda,jadi jangan menyerah".

Mas Debby mengatakan...

@abu hanan
Sipz2...tetap semangat??

Abu Hanan Abdullah on 29 Maret 2011 00.37 mengatakan...

haaah...cape di mata akhirnya.
sementara sambil berburu Knock Down,alangkah baiknya jika berbagi membedakan komen admin seperti punya anda hehehe....biar gak jenuh utek2 html.
Sekalian membuat huruf agak kecil utk menu sidebar (kalo di blog saya seperti Banyak Diabaca dll (ke bawah),,
pelajaran siap dimulai...

Mas Debby mengatakan...

@Abu Hanan Abdullah
Klo tuk membedakan admin sma para kementar pndatang itu dari template_y bang??jadi untuk cara_y saya blum mnemukan..ntar saya posting klo sdah mnemukannya?ok...

abu hanan on 31 Maret 2011 13.55 mengatakan...

siap,,,,,
Template saya pake Harbor,kira2 kalo dirubah ke templatr yang gak minim bisa/tdk ya?

Mas Debby mengatakan...

@abu hanan
Bisa aja mas yang pnting mah didukung oleh blogger..saya sarankan untuk cari template di blogtemplate4u.com

Abu Hanan Abdullah on 16 April 2011 01.05 mengatakan...

ah,akhirnya nemu deh 3 kolom,,,,dengan kasus :
1.jarak antara posting dengan kolom komentar terlalu jauh,dan saya ingin persempit.
2.di bawah posting ada kolom besar,yang saya ingin kecilkan.
3.default width itu 1200,lantas saya buat 900.hasilnya bisa muat tetapi "bodi" masih besar sehingga melebar.

Tindakan apa yang diperlukan mas?
eh,yang nomor 4....terima kasih banyak.
salam

Sukawangi Viil on 19 Mei 2011 03.29 mengatakan...

Hatur thank you kang !

Mas Debby mengatakan...

@Sukawangi Viil
Yo ngatur thank you sanget...

Anonim mengatakan...

mas, cra naro mnu dropdown di tempale mas deby gmna, sy jugakn pakai templete sama dengan mas deby, tapi sy ga bsa naro menu dropdown'a, mohn bantuanya....

Mas Debby mengatakan...

@AnonimKlo emang template_y sma kaya punya saya tinggal ikuti aja langka2h diatas mas??

Sedang Pencarian on 4 Juli 2011 02.15 mengatakan...

Gan,klo tmplate wordpress bisa nggak dipakai buat blogger....!
tolong infonya gan..!
maklum masih pemula...:D

GAYATRA on 23 Juli 2011 17.01 mengatakan...

kok g ada perubahan ya mas bro,q dah naruh menu yabg mas bro tulis di atas tdi,newbie ni heheehe mohon pejelasan lebih lanjut

desta edelweiss on 6 Agustus 2011 10.02 mengatakan...

gmna crax bwt menux,,alx kode div id='header-wrapper' gk ketemu...mhon bantuanx

Aristya's Blog on 6 Agustus 2011 22.53 mengatakan...

kok punyaku ngga mau ya? semuanya udah aku ikutin dgn teliti sampe ngerjainnya sejaman.... Uda berhasil, tapi waktu aku liat, ngga ada... Capeee :(

Wonderland info on 24 September 2011 19.10 mengatakan...

Q ga bisa maz, tlong dibntu yea. . .

ud q samain persis tu, tp kok mlah jdnya kyak page, wew

Mas Debby mengatakan...

@Wonderland infoKlo ga berhasil berarti ga cocok mas m templatenya??

Deny on 14 Oktober 2011 14.33 mengatakan...

sukses selalu mas, mantap menu dropdown ,tapi saya bingung cara membuat posting untuk di taruh di menu dropdown,

bancet kukaruto on 26 Maret 2012 08.56 mengatakan...

MAS saya kan sudah buat menu dropdown tapi blum bsa seperti contoh yang diatas sendiri ,.,,.pertanyaan saya gimana caranya memasukan artikel ke menu dropdown

Achmad Suryawan on 20 April 2012 19.06 mengatakan...

saya kok ga bisa yaaa bng buat drop down nya ga ketmu header wrapper'a gan

Belajar tidak ada habisnya on 24 April 2012 07.58 mengatakan...

mas aku kok nggak bisa ya buat dropdownnya... sudah aku coba, malah menuku double2. mohon bantuanya ya...tq

Rahma Fadhila on 26 April 2012 17.37 mengatakan...

mas, sebenarx klo gk menu dropdown di bagian laman itu lebih mudah. Bisa sesuai dengan templatex

Free selalu gan on 30 Mei 2012 17.13 mengatakan...

gan cara sendirikan dropbos klu software githu y apa sendirikan nya . .

Tawar Menawar on 15 Juni 2012 08.47 mengatakan...

kalau di wordpress apa skripnya??

Darmawan Saputra on 18 Juni 2012 16.40 mengatakan...

Terima kasih atas artikelnya.

sepertinya anda berbakat untuk urusan membuat postingan yang ini, jujur saja kamu punya kelebihan tersendiri, dan saya akan berkunjung lagi bila ada waktu.



#Semoga sehat selalu :D

Posting Komentar

 
© 2010 Tips Teknik Komputer is proudly powered by Blogger