Trick Spesial Buat Tab Menu Horizontal di Atas Header Blog

Selama ini jika sampeyan 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.

D E MO

Tanpa melihat demo beberapa sobat blogger mungkin masih kurang memahami apa yang tersampaikan di atas. Agar lebih jelas bagaimana bentuk tab menu horizontal hasil penambahan widget Blog List blogger yang dibuat melalui Add a Gadget dengan posisi di atas header, silahkan buka dengan klik link demo di bawah ini.

D E M O widget Blog List di atas Header Blog

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. Buka panduan backup template di sini !.
6. Cari kode <header>. Panuduan cara mencari kode html di template dapat anda buka di sini !.
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.

Catatan/Keterangan:

1. Buatlah menu horizontal menggunakan gadget blogger Link List atau Blog List.
2. Jika anda membuat halaman blog statis, setiap judul akan ditampilkan sebagai "Pages" gadget dan membentuk tab menu horizontal di bawah header. Drag ke atas elemen header agar bisa ditampilkan di atas header blog.
3. Anda bisa memanfaatkan elemen baru ini untuk penambahan gadget/widget lainnya.
4. Semoga bermanfaat dan menambah kekayaan modifikasi serta semangat untuk terus menuangkan semua kreatifitas anda melalui blog!

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

Posting » Kemis KLIWON, February, 16, 2012

» Happy Blogging - gubhugreyot «