Cara membuat menu navigasi horizontal dropdown keren di blog

Hai sobat blogger ! sudah lama tak berjumpa ya, hampir 1 bulan saya tidak mengupdate isi postingan di blog ini, hampir sebulan itu saya mendapat kendala besar yang membuat saya jarang update. Saya memohon maaf untuk hal itu. Oke , kali ini saya akan berbagi ilmu tutorial blogging yang cukup keren sobat . Sesuai judulnya, kali ini saya akan membuat menu navigasi yang pernah saya pakai di blog ini atau bisa lihat sendiri pada gambar yang saya pasang diatas. Menu navigasi ini telah saya modifikasi sedemikian rupa sehingga menjadikannya keren dan elegan.. Bagaimana ? tertarik untuk membuatnya ? langsung saja kalau begitu kita simak dan bahas tutorialnya bersama-sama.

FIX + TUTORIAL PENGEDITAN ( 21 Oktober 2012 )

1.) Baca Basmallah
2.) Masuk ke akun blogger sobat
3.) Masuk ke Dashboard > Template > Edit Html > Lanjutkan
4.) Centang tanda Expand Template Widget
5.) Lalu cari kode ]]></b:skin>
6.) Jika sudah ketemu, masukkan kode dibawah ini tepat diatas kode ]]></b:skin>

Kode

menu{
border:none;
border:0px;
margin:0px;
padding:0px;
font: 67.5% "Arial", Arial;
font-size:14px;
font-weight:bold;
}
.menu ul{
background:#333333;
height:35px;
list-style:none;
margin:0;
padding:0;
font-size:14px;
font-weight:bold;
}
.menu li{
float:left;
padding:0px;
}
.menu li a{
background:#333333 url("http://i47.tinypic.com/qp53sw.jpg") bottom right no-repeat;
color:#cccccc;
display:block;
font-weight:normal;
line-height:35px;
margin:0px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
.menu li a:hover, .menu ul li:hover a{
background: #2580a2 url("http://i49.tinypic.com/13zbc53.jpg") bottom center no-repeat;
color:#FFFFFF;
text-decoration:none;
}
.menu li ul{
background:#333333;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:225px;
z-index:200;
/*top:1em;
/*left:0;*/
}
.menu li:hover ul{
display:block;
}
.menu li li {
background:url('http://i45.tinypic.com/nvxxqg.jpg') bottom left no-repeat;
display:block;
float:none;
margin:0px;
padding:0px;
width:225px;
}
.menu li:hover li a{
background:none;
}
.menu li ul a{
display:block;
height:35px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover, .menu li ul li:hover a{
background:#2580a2 url('http://i50.tinypic.com/66elwh.jpg') center left no-repeat;
border:0px;
color:#ffffff;
text-decoration:none;
}
.menu p{
clear:left;
}

7.) Simpan Template
8.) Buka Tata Letak > Tambah Gadget > Html/Javascript
9.) Masukkan kode berikut di form Konten yang tersedia 

Klik untuk melihat

<div class="menu"><ul><li><a href="http://rizaldipriantama.blogspot.com"> Beranda </a></li><li><a href="http://rizaldipriantama.blogspot.com/trick "> Trik Komputer</a><ul><li><a href=" # "> Hacker</a></li><li><a href="# "> Software </a></li><li><a href=" # "> Hardware</a></li><li><a href="# "> Internet </a></li></ul></li><li><a href="#">Blogger</a><ul><li><a href="#"> Trik</a></li><li><a href="#">Tips </a></li></ul></li><li><a href="#">Contacs me</a></li></ul></div>

11.) Ganti # dengan URL yang akan dituju
Ganti Menu Link dengan nama yang akan ditampilkan dalam menu utama.
Ganti Sub-menu Link dengan nama yang akan menjadi menu yang berada di bawah menu utama
12.) Simpan dan lihat hasilnya

Contoh :

<div class="menu"><ul><li><a href="http://rizaldipriantama.blogspot.com"> Beranda </a></li><li><a href="http://rizaldipriantama.blogspot.com/trick "> Trik Komputer</a><ul><li><a href=" # "> Hacker</a></li><li><a href="# "> Software </a></li><li><a href=" # "> Hardware</a></li><li><a href="# "> Internet </a></li></ul></li><li><a href="#">Blogger</a><ul><li><a href="#"> Trik</a></li><li><a href="#">Tips </a></li></ul></li><li><a href="#">Contacs me</a></li></ul></div>

( Dalam pengeditan kode, kita hanya mengedit kode yang bertulis tebal saja)

-----------------------------------------------------------------------------------------------
EDIT MODE :

Membuat Single Menu :

Caranya? 

Lihat pada bagian kode Beranda : 
<li><a href="http://rizaldipriantama.blogspot.com"> Beranda </a></li>
Kode ini merupakan single menu, artinya tidak ada sub-menu yang mengikuti dibawahnya. Kode ini sangat sederhana, dimulai dengan kode <li>  dan diakhiri kode </li> dan jika anda perlu menambah single menu, tinggal tambah kode diatas setelah kode </li>, contoh :
<li><a href="http://rizaldipriantama.blogspot.com"> Beranda </a></li><li><a href="http://rizaldipriantama.blogspot.com"> Daftar Isi </a></li>

maka akan tampil 2 single menu yang saling bersebelahan yaitu Beranda dan daftar isi

Membuat Sub-Menu :

Caranya?

Lihat pada kode bagian trik komputer, disana terdapat sederet kode yang panjang, kira-kira seperti ini
<li><a href="http://rizaldipriantama.blogspot.com/trick "> Trik Komputer</a><ul><li><a href=" # "> Hacker</a></li><li><a href="# "> Software </a></li><li><a href=" # "> Hardware</a></li><li><a href="# "> Internet </a></li></ul></li>
Pada kode diatas, trik komputer menggunakan sistem sub-menu, artinya menu yang mempunyai cabang. Trik komputer merupakan induknya, sementara Hacker, Software, Hardware sebagai anaknya yang mengikuti di bawahnya.  Hacker, Software, Hardware, tidak tampil pada menu utama, melainkan menu itu akan tampil jika kita menyorot menu Trik Komputer. Dalam membuat sub-menu, perlu memperhatikan beberapa hal, diantaranya kode <ul> dan </ul> . Dalam membuat sub-menu , anda perlu menambahkan kode <ul> setelah kode </a> di kode induk, sementara penutup kode induk </li> berada di akhir kode.

Contoh sub-menu 1 induk 1 anak ( perhatikan kode bertulis tebal ):<li><a href="http://rizaldipriantama.blogspot.com/trick "> Trik Komputer</a><ul><li><a href=" # "> Hacker</a></li></ul></li>

Jika sobat ingin menambahkan sub-menu lagi, tambahkan kode <li><a href=" # "> Sub-Menu Link </a></li> sebelum kode </ul> berada, contoh
<li><a href="http://rizaldipriantama.blogspot.com/trick "> Trik Komputer</a><ul><li><a href=" # "> Hacker</a></li><li><a href=" # "> Software </a></li></ul></li>

Maka akan tampil 2 sub menu yang berada dibawah menu Trik komputer, yaitu Hacker dan Software

Cara Mengganti Background Judul Menu Bar Dan Side Bar Blogger

Posted by Maiin Putra on 23:23

Hay sobat blogger. Kali ini saya akan menulis cara untuk menggantu judul Menu bar dan Side Bar seperti yang ada di blog saya ini, caranya cukup simple namun agak sulit dimengerti jika kita tidak memperhatikannya dengan baik, oke mari kita mulai 

1. Log In ke blogger anda
2. Setelah itu pindahlah ke Tab Rancangan > Edit HTML
3. Bukalah Blog anda. *Pastikan blog anda memiliki Menu Bar dan Side Bar
4. Lalu pada gambar yang ingin diganti silahkan lakukan seperti gambar dibawah ini

5. Pada Gambar Pembatas Sidebar itu klik kanan dan pilih View Background Image
6. Maka  akan muncul tampilan Address gambar

7. Setelah itu, Copylah Address dari gambar yang didapat
8. Kembalilah ke EDIT HTML
9. Tekan CTRL + F lalu pastekan alamat tersebut.
10. Maka akan muncul tempat dimana kita akan menaruh Background baru

11. Sekarang kita akan membuat Background Side Bar yang baru lewat situs Cooltext.com
12. Buka Cooltext lalu pilih Button

 13. Buatlah Gambar sendiri dengan Kreativitas anda, dan Jangan lupa untuk MENGOSONGKAN TULISAN pada tombol itu untuk dijadikan background

14. Jika sudah diatur, klik RENDER BUTTON
15. Download gambar tersebut dan upload di Situs lain atau di blogger juga. Perhatikan gambar berikut

16. Setelah selesai anda COPAS di tempat Edit HTML tadi.

PROBLEM :
1. Sidebar saya tidak terdapat gambar ?
Caranya cukup mudah
Masuklah ke EDIT HTML lalu cari

".sidebar h2" atau "#sidebar h2" atau "sidebar post title"

2. Backgroundnya tidak sama rata ?
Caranya cukup merubah LEBAR dan TINGGI gambar yang anda buat tadi. Setelah itu upload lagi dan Copy lagi

3. Gambarnya Kecil, padahal Imagenya sudah besar.  ?
Perhatikan Code dibelakang tag MARGIN, WIDTH, Lebih baik gunakan code yang sudah saya berikan

sidebar h2 {margin: 10px 0 0 0;padding: 6px 0 20px 0;background: url(URL GAMBAR ANDA) top left no-repeat;font-size: 16px;font-family: Arial, Helvetica, Sans-serif;font-weight: bold;color: #464646;

NB : CARA INI BERLAKU UNTUK MENGUBAH BACKGROUND LAINNYA, SEPERTI NAV BAR MENU, POST BACKGROUND.
Selamat Bereksperimen.