Elemen Baru untuk membuat Menu Horizontal di Blogger

Mungkin anda termasuk salah satu blogger yang sedang kebingungan atau mungkin "pernah kebingungan" yang hingga detik inipun "kebingungan itu belum terpecahkan". Sebuah persoalan "Bagaimana cara membuat sebuah horizontal dropdown menu di blogger?". Banyak sudah keluhan terhadap permasalahan ini, terutama akibat menu yang sudah terlihat dan berhasil dibuat tidak mampu bekerja sesuai harapan. Persoalan yang banyak ditemui adalah "anak menu yang diharapkan bisa terlihat ternyata tetap tak mau nongol karena hilang akibat terpotong".

Membuat sebuah menu horizontal baru di blogger memang tidak bisa secara langsung tanpa membuat sebuah elemen baru yang bebas dari pengaruh kode css default blogger. Anda tak bisa menempatkan menu dropdown horizontal di gadget HTML/javascript melalui elemen yang terletak di atas blog post atau di bawah header bawaan blogger karena elemen dengan class="tabs" ini sudah diset dalam kondisi overflow="hidden". Membuat elemen baru akan membuat semuanya menjadi lebih mudah karena bebas dari pengaruh kode css default blogger. Elemen ini dapat anda letakkan di atas header atau di bawah header.

Membuat elemen baru di bawah header blog

1. Login ke blogger
2. Dasbor (Dasboard)
3. Template
4. Backup/Restore (Cadangkan/Pulihkan)
   Silahkan lakukan backup template terlebih dahulu dengan cara menyimpan file template di folder PC. Cara ini adalah sebuah tindakan preventif yang bertujuan untuk menjaga hal2 buruk yang mungkin terjadi selama proses editing dilakukan. File bisa anda gunakan kembali untuk mengembalikan template ke kondidi semula seperti sebelum dilakukan editing dengan menggunggah file template ini melalui proses yang sama (backup/restore).
5. Edit HTML
6. Template › Edit HTML
   • Lanjutkan (Procced).
   • Cari kode <div class='tabs-outer'>
     Gunakan Ctrl+F untuk mempercepat dan mempermudah pencarian kode.
   • Di bawah kode tersebut masih ada beberapa kode lain seperti yang terlihat di bawah ini:
     

     <div class='tabs-outer'>
         <div class='tabs-cap-top cap-top'>
           <div class='cap-left'/>
           <div class='cap-right'/>
         </div>
         <div class='fauxborder-left tabs-fauxborder-left'>
         <div class='fauxborder-right tabs-fauxborder-right'/>
         <div class='region-inner tabs-inner'>
           <b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'/>
           <b:section class='tabs' id='crosscol-overflow' showaddelement='no'/>
         </div>
         </div>
         <div class='tabs-cap-bottom cap-bottom'>
           <div class='cap-left'/>
           <div class='cap-right'/>
         </div>
         </div>
     

   • Tambahkan kode baru berikut tepat di bawah kode tersebut.
     

     <div class='GRhormenu-outer'>
         <div class='GRhormenu-cap-top cap-top'>
           <div class='cap-left'/>
           <div class='cap-right'/>
         </div>
         <div class='fauxborder-left GRhormenu-fauxborder-left'>
         <div class='fauxborder-right GRhormenu-fauxborder-right'/>
         <div class='region-inner GRhormenu-inner'>
           <b:section class='GRhormenu' id='GRnew-crosscol' maxwidgets='1' showaddelement='yes'/>
           <b:section class='GRhormenu' id='GRnew-crosscol-overflow' showaddelement='no'/>
         </div>
         </div>
         <div class='GRhormenu-cap-bottom cap-bottom'>
           <div class='cap-left'/>
           <div class='cap-right'/>
         </div>
         </div>
     

   • Klik Simpan Template/Save Template.
   • Lanjutkan kembali dengan cari kode ]]></b:skin>
   • Copy dan pastekan kode css berikut tepat di atas kode ]]></b:skin>
     

     .GRhormenu-inner .widget{
           margin:0;
           padding:0;
     }

   • Klik Simpan Template/Save Template
7. Selesai!
8. Silahkan anda cek melalui halaman Tata Letak/Layout » page element/Elemen Laman.
   Elemen akan terlihat tepat di bawah elemen header atau di atas elemen blog post.
9. Gunakan elemen ini untuk membuat horizontal dropdown menu.

Cara menggunakan elemen untuk membuat horizontal dropdownmenu

1. Klik Elemen yang baru selesai dibuat (bergaris putus-putus).
2. Pilih gadget HTML/Javascript
3. Simpan kode css dan xHTML dalam box HTML/Javascript
   Jika anda menyimpan kode css di dalam box HTML/Javascript, maka kode css harus diletakkan diantara tag style:
   

   <style type="text/css">
   
   Letakkan kode css di sini!
   
   </style>
   

4. Simpan/Save
5. Lihat hsilnya dengan membuka blog.