Membuat Dropdown Menu Pada Blogspot

Beberapa minggu ini (mulai dri mbikin :D ) blog gue brantakan. . .ya mklumlah pke blogspot yg sulit juga untuk nge-desain tmpilan yg bgus!!! So. . .
(ooe. . .kgak usah crita pnjang lebar)
Oke lngsung aja, ikuti beberapa lngkah simpel ini :
Syarat :
1. Pnya blog yg pke engine blogspot tntunya
2. Siapin desain drop down menu anda pke CSS (klo pke javascript gue blum bisa masangnya ntr; hehe :D)
Untuk syarat yg ke-2, silahkan desain sesuka loe yg penting tidak kontras dg tema blognya (kyk pnya gue dulu)

Syarat siap lnjutkan :
1. Masuk dashboard loe,pilih design pilih tab Edit HTML
2. Cari kode ini /b:skin  gunakan aja [CTRL]+[F], lalu paste CSS dropdown loe di atas kode itu!
kalo pake tema gue kyk gni jdinya :
Copy aja kode berikut n paste-kan langsung dibawah kode diatas. .

.menu{
 border:none;
 border:0px;
 margin:0px;
 padding:0px;
 font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
 font-size:13px;
 font-weight:bold;
 }
.menu ul{
 background:#36535e;
 height:25px;
 list-style:none;
 margin:0;
 padding:0;
 }
 .menu li{
  float:left;
  padding:0px;
  }
 .menu li a{
  background:#36535e url("https://lh5.googleusercontent.com/_4-JHCx-AABM/TbEnqIvnnZI/AAAAAAAAAag/O8JpF-NPrk0/s128/seperator.gif") bottom right no-repeat;
  color:#cccccc;
  display:block;
  font-weight:normal;
  line-height:25px;
  margin:0px;
  padding:0px 25px;
  text-align:center;
  text-decoration:none;
  }
  .menu li a:hover, .menu ul li:hover a{
   background: #2580a2 url("https://lh4.googleusercontent.com/_4-JHCx-AABM/TbEnplogunI/AAAAAAAAAaY/5ljrPtJ869Q/s128/hover.gif") bottom center no-repeat;
   color:#FFFFFF;
   text-decoration:none;
   }
 .menu li ul{
  background:#36535e;
  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('https://lh4.googleusercontent.com/_4-JHCx-AABM/TbEnqbOxinI/AAAAAAAAAak/3G-4WBGS9Ws/s128/sub_sep.gif') 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:25px;
  font-size:11px;
  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('https://lh3.googleusercontent.com/_4-JHCx-AABM/TbEnpzTapBI/AAAAAAAAAac/k44rnJO0O_k/s128/hover_sub.gif') center left no-repeat;
   border:0px;
   color:#ffffff;
   text-decoration:none;
   }
 .menu p{
  clear:left;
  } 

3. Cari kode yang ini

nurut pengalaman dibagian ini memang beda2 kodenya tiap tema, klo yg gue pake ngedit temanya pake artister. Klo kgk ketemu yg penting cri aja /b:section (kode ini memang lebih dari 1 jumlahnya, tpi pilih aja yang paling atas, (klo ntar gk kena coba satu-satu ya. .:P hihi) lalu paste menu yg loe punya setelah kode tersebut, ato copy aja ini :

Beranda
Pemrograman  
C#
Turbo Pascal
Delphi
Java

Game
Lain - Lain

4. Save tema loe, n TA-DA dropdown menu siap digunakan!! klo ng-copy punya gue jdi nya sperti yg loe lihat!! :D

NB :
1. tnda '#' diganti untuk URL loe, klo gk dia wktu diklik tetep dihal yg loe buka
2. untuk CSS yg membutuhkan gmbar, bisa diupload ndiri di mana aja!
3. klo tetep gk kena mungkin kesalahn pada penempatan CSS atau menu loe. .
4. Klo pengen nggunain dropdown menu dg javascript bisa ditanyakan tentang penempatan javascript di blogspot (di mbh google ada), n klo berhasil gue dikasih tau ya. . .wkwkwkwk (soale gue nyoba kgk berhasil) hehehehe
5. jgn lupa untuk berbagi ilmu!! :)

Posted in: Lain