Trik Spesial Buat Tab Menu Horizontal di Atas Header Blog

Selama ini jika anda menggunakan widget blogger yang berfungsi sebagai tab menu horizontal (seperti widget Blog List, Link List dan Pages) letaknya pasti di antara header blog dan box posting serta sidebar. Memindahkannya ke bagian lain, seperti di atas header memang bisa dilakukan setelah elemen header dirubah menjadi maxwidgets='2' showaddelement='yes', namun hasil yang didapatkan tak akan sama dengan ketika widget tetap berada ditempat semestinya, yaitu di bawah header. Memaksakan pemindahan widget tab menu horizontal di atas header blog justru akan membuat tab menu terlihat dalam bentuk deret vertical dengan tampilan yang jauh dari semestinya. Hal seperti ini terjadi karena pada elemen header tidak menyertakan beberapa kode css yang berfungsi membangun sebuah horizontal tab menu. 

Ada sebuah cara untuk membuat widget yang berfungsi sebagai tab menu horizontal tersebut agar bisa ditempatkan di atas header blog. Satu-satunya jalan adalah dengan membuat sebuah elemen baru yang dilengkapi dengan komponen pembangun tab dengan posisi di atas header. Dengan elemen baru ini nantinya di dalam elemen laman (page elemen) blog anda akan bertambah satu elemen baru tepat di atas header blog dengan kemampuan untuk mendefinisikan kode html yang terdapat pada widget blogger yang berupa horizontal tab menu, seperti halnya elemen yang terdapat di bawah header. Screenshoot disamping memperlihatkan pada elemen laman telah bertambah dengan 1 (satu) elemen baru di atas header. 

CARA MEMBUAT ELEMEN DI ATAS HEADER YANG BERFUNGSI SEBAGAI PEMBANGUN TAB HORIZONTAL

1. Login ke Blogger
2. Halaman Dasbor (Dasboard).
3. Klik Rancangan (Design).
4. Klik Edit HTML.
5. Backup template. 
6. Cari kode <header>. 
7. Copy dan paste-kan kode HTML berikut tepat di atas kode <header>. Kode HTML dan tag <header> akan berbentuk seperti ini:
   

   KODE HTML ELEMEN BARU

   <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='GRaboveheader' maxwidgets='2' showaddelement='yes'/>
         <b:section class='tabs' id='GRaboveheader-overflow' showaddelement='no'/>
       </div>
       </div>
       <div class='tabs-cap-bottom cap-bottom'>
         <div class='cap-left'/>
         <div class='cap-right'/>
       </div>
       </div>
   
   
   <header>

8. Klik Simpan Template (Save Template).
9. Klik Elemen Laman (Page Elemen).
10. lihat "Elemen Baru di atas Elemen Header.
11. Silahkan gunakan untuk membuat Widget baru yang berupa horizontal tab menu. dengan Klik Add a Gadget.
12. Selesai.

Tweet