Woooowww!! Ternyata menu blog juga punya keturunan? Hah!!?? Emang bisa gitu?? Ya iyalah... Menu blog juga punya anak, cucu lho... Jangan salah. Penasaran? Hehehe...

Dalam PF Tutorial kali ini, saya akan mencoba sharing tentang tata cara membuat menu yang biasa digunakan pada web/blog sebagai menu yang ditampilkan pada header blognya masing-masing, lengkap dengan anak, cucunya lho?

Seperti apa menu yang dimaksud?
Coba anda perhatikan menu header "Teknologi" pada PF Blog ini. Atau anda bisa melihat gambar dibawah ini.

Gambar 1AMenu horizontal pada blog, dan sub-subnya

Nah, seperti itulah gambarannya kira-kira. Hihihihihi...

Gimana bro? Tertarik? Hehehehe... Ayo langsung saja kita lihat scriptnya yah...
Ikuti saja prosedur ini.

• Untuk yang pertama, masuk ke Blogger, lalu buka Design/Rancangan, kemudian pilih Edit HTML.


• Kemudian copy script dibawah ini, lalu letakan diatas, atau sebelum script ]]></b:skin>
  
  Lihat Scriptnya?


• Tidak peduli ada script yang mendahului ini, letakan saja diatas ]]></b:skin>. Oh iya! Jangan lupa si save ya... Heheheheg...


• Selanjutnya masih tetap pada Design/Rancangan, namun beralih pada Page Elements/Elemen Laman.


• Klik "Add a Gadget/Tambah Gadget"Kemudian copy lagi script yang ini, untuk menaruh link-link html lain.


• Masalah! Biasanya pada setiap template, batas widget yang ditampilkan tentu berbeda. Maksudnya seperti apa? Coba perhatikan gambar dibawah ini.
  Gambar 1BWidget yang menjadi terbatas (Tanda elips merah panjang)
  Pada gambar diatas, yang dilingkar merah kecil disisi kanan itu adalah tempat penambahan widget. Namun, ketika anda hendak menaruh script selanjutnya yang membutuhkan widget pada header, add widget/tambah gadget tidak tersedia (Elips yang memanjang).
  

  Untuk mengatasinya, anda kembali lagi ke edit HTML, lalu tekan ctrl+F, pada kolom find dipojok kiri bawah anda, ketik kata kunci, <b:section class='header', lalu lihat showaddelement='no', ganti tulisan no, menjadi "yes". Jadinya seperti ini, showaddelement='yes'. Lalu, maxwidgets='1' ganti angka 1 menjadi angka 2,3, atau yang lain. Kemudian save.

  
  
• Kalau sudah selesai, kemudian beralih pada Page Elements/Elemen Laman, yang masih tetap di Design/Rancangan.


• Jika sudah tersedia, klik "Add a Gadget/Tambah Gadget", lalu copy lagi script dibawah ini, untuk menaruh link-link html lain.
  
  Lihat Scriptnya?


• Nanti, ketika anda lihat hasilnya, untuk cucunya menu 3 itu, lebar menunya sengaja saya tampilkan dalam keadaan default. Agar anda tahu bahwa keadaan width yang asli sebelum diubah itu seperti itu.


• Kalau anda merasa cucu menu 3 itu kurang lebar, bisa anda tambahkan width pada style link yang ada pada HTML gadget, bukan yang ada di template. Kalau di template, itu berarti, anda akan mengubah lebar keseluruhan menu.


• Klik HTML/Java Script tempat anda menaruh scriptnya, lalu tekan ctrl+f, kemudian ketik ini <li><a style="cursor: pointer;" title="Berisi keterangan yang akan muncul, apabila mouse diarahkan pada area link"; href="http://pasang URL yang anda butuhkan">Cucunya Menu dari Menu 3</a></li>.


• Pada <a style= anda tambahkan width:420px; atau sesuai dengan kebutuhan anda. Jadi, tampilannya akan seperti ini. <li><a style="cursor: pointer; width:420px;" title="Berisi keterangan yang akan muncul, apabila mouse diarahkan pada area link"; href="http://pasang URL yang anda butuhkan">Cucunya Menu dari Menu 3</a></li>.


• Kemudian Save!


• Proses editing dasar sudah selesaiiiii.... Sekarang hanya tinggal anda sendiri yang akan memoles menu anda sesuai dengan kreatifitas dan potensi anda masing-masing. Selamat berkarya...
  
  
  ! Trik PF Tutorial

  Tentu agar menu anda lebih atraktif, PF Tutorial sesuai dengan visi-misinya yaitu, memberikan tips, trik, masalah, serta alternatifnya, akan memberikan beberapa beberapa hal yang berkaitan dengan cita-citanya tersebut. (Bukan seperti pejabat kita yang hanya bisa mengumbar janji...)
  

  Maka dari itu, PF Tutorial juga berkomitmen ingin dengan lengkap memberikan trik-trik seputar mengutak-atik tampilan, permasalahan yang dihadapi, sehingga anda lebih tangguh dalam menghadapi cobaan kerewelan script, serta blog anda lebih fresh dilihat. Hahahahaaa...
  

  Nah, sekarang, agar tampilan menu blog anda lebih elegant, coba utak-atik bordernya dengan ini.
  

  • Lihat Triknya?

Belum paham? Langsung saja tanya pada saya?