Arabic Korean Japanese Chinese Simplified English French German Spain Italian Dutch Russian Portuguese

KEPADA SELURUH PENGUNJUNG BLOG INI JIKA TERDAPAT LINK ATAU TAUTAN YANG TIDAK SESUAI DENGAN TULISAN DI BLOG INI HARAP MEMBERI TAHU LEWAT KOTAK PESAN DI SIDE BAR BLOG INI

Membuat menu dropdown kali ini beda dengan posting sebelumnya dimana kita membuatnya dengan menyisipkan animasi flash, hasilnya memang cukup menarik, tapi beberapa orang juga kurang suka karena akan berpengaruh pada kecepatan loading blog kita. kalau kamu ingin tahu cara membuat menu cantik dengan flash silahkan klik disini.
Buat teman-teman yg belum tau apa itu menu dropdown, menu drop down ini adalah menu navigasi yang akan menampilkan sub menu dibawahnya secara otomatis apabila di sorot oleh mouse. Sebenarnya banyak cara yang bisa dipakai untuk membuat menu drop down, dan salah-satu cara yang saya pakai adalah menggunakan bahasa CSS yang diadopsi dari situs http://www.cssplay.co.uk yang sudah di edit oleh kang rohman (thx atas pengeditan CSSnya ya!), tapi sudah saya modif lagi sedikit agar lebih memudahkan teman-teman untuk mengubah warna menunya agar sesuai dengan warna template yang dipakai.



Oke biar mudah dimengerti kita langsung praktek saja dengan mengikuti langkah-langkah dibawah ini:
  • Login ke blogger.com
  • Setelah masuk pada halaman dashboard, klik "Layout" atau "Tataletak".
  • Kemudian klik submenu "Edit HTML".
  • biar aman disarankan sebelum mengubah kode template, silahkan di backup dulu. Klik link "Download template sepenuhnya" dan save di hardisk kamu.
  • sekarang lihat ke kode template anda, dan cari kode berikut: ]]></b:skin>
  • Kemudian Copy kode di bawah ini, lalu paste di atas kode : ]]></b:skin>

  • Silahkan lihat ke bagian bawah lagi, lalu temukan kode seperti ini :

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

<b:widget id='Header1' locked='true' title='your blog title (Header)' type='Header'/>

</b:section>

  • Ubahlah kode yang berwarna merah, sehingga kodenya menjadi seperti ini :
<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>

<b:widget id='Header1' locked='false' title='your blog title (Header)' type='Header'/>

</b:section>

  • Klik tombol "Save Template" atau "Simpan Template".
  • langkah selanjutnya kamu harus menambah elemen atau gadget di blog kamu dan caranya adalah:
  1. Klik sub menu "Page Element" atau "elemen Halaman"
  2. Klik pada link "add a gadget" atau "Tambah Gadget"
  3. setelah jendela pop up muncul, pilih opsi HTML/JavaScript.
  4. Copy kemudian paste kode di bawah ini pada isi gadget yang muncul tadi :

  • Klik tombol "Save Template" atau "Simpan Template"
  • Selesai, Silahkan lihat hasilnya.
Catatan : untuk beberapa template, cara ini kurang menghasilkan tampilan yang bagus, maka sebaiknya kamu mengedit kode2 nya. misalnya kode warnanya kamu rubah agar sesuai dengan warna template kamu.

arti dari kode didalam tag <dt> dan <dd> adalah:
Kode yang di awali tanda <dt>, adalah judul menu utama (menu induk).
Kode yang di awali tande <dd>, adalah judul untuk sub menu (sub menu induk).

Untuk mengisi link perhatikan kode dibawah ini:

<dl class="two"> <dt><a href="PASTE-LINK-DISINI">MENU2</a></dt>
<dd><a href="PASTE-LINK-DISINI">EDIT SUB MENU2</a></dd>

tulisan PASTE-LINK-DISINI harus kamu isi dengan link dan tulisan EDIT SUB MENU2 ataupun MENU2 kamu isi dengan judulnya karena itu yang nantinya ditampilkan di blog.

Desain dari masing2 template biasanya berbeda antara satu dengan yang lainnya, maka saya hanya mengambil contoh untuk template minima saja (template asli blogger) sebagai gambaran saja. langkah-langkahnya adalah sebagai berikut :
  • Login ke blogger dengan ID anda
  • setelah berada di halaman dashbord , klik Layout.
  • Kemudian klik tabedit HTML.
  • Saya sarankan kepada anda sebelum mengubah kode template, silahkan di backup dulu. Klik link Download template sepenuhnya.
  • Silahkan anda beri tanda ceklist pada kotak kecil di samping tulisan Expand Templates Widget. Tunggu beberapa saat.
  • Lihat ke kode template anda dan temukan kode berikut : ]]></b:skin>
  • Copy kode di bawah ini, lalu paste di atas kode: ]]></b:skin>

lihat ke bagian bawah dan temukan kode ini:

<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</b:if>
</b:includable>
</b:widget>
</b:section>

Delete / hapus kode di atas lalu ganti dengan kode di bawah ini :

  • Klik tombol Simpan Perubahan, selesai deh.




Gratis berlangganan artikel terbaru dari blog prie23 langsung dikirim ke mailbox anda. Silahkan masukan alamat email anda pada kotak isian di bawah ini, lalu tekan tombol Berlangganan atau Klik di sini untuk membacanya fia Feeds!

   



2 comments


Masifud mengatakan... @ 30 April 2009 pukul 10.02

mas kalo pengen menu drop down yang sama ama link2nya mas gmana tuch??? :D


Republik seni mengatakan... @ 22 Oktober 2010 pukul 22.20

Terima kasih banyak mas tutornya.. bener2 sy butuhkan.. bukan basa basi kok... sekali lagi makasi mas.... ^__^



Telah Selesai Membaca Postingan di Atas?


:)) :)] ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} ~x( :-t b-( :-L x( =))


Klik Banner di bawah -> Gratis Upload File Kamu Di ziddu (UNLIMITED)

Pendaftaran Gratis -> Upload File Kamu -> File di Download -> Kamu Dapet Duit -> Mau?