Cumulus swf - flash

Bru masuk angin!

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!
Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

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 «

20 komentar:

  1. terima kasih bro....mantap aku masih baru ni

    BalasHapus
  2. Newbietol Hadir mau bertanya ... atu barang kali bisa mintak code untuk spoiler (hide show ) seperti halnya flagcounter agan ... ? semoga agan dapat bermurah hati ...... tanpa efek gelap nya ,,, nuwun ....

    BalasHapus
  3. sebagai pemula saya hanya bisa bilang keren. maksih atas informasi yang di share

    BalasHapus
  4. bang kok gadget horizontal tab menu gak ada ???

    BalasHapus
  5. bagus bangggg,,,,,, link back yaaa...

    BalasHapus
  6. box comment nya keren bg
    smooth view

    BalasHapus
  7. ini diefek beginian keren kk~~
    aku mau... tapi belum berani ah.. masih newbie banget.. hehe

    btw, isi blognya bagus-bagus!! *unjuk 2 jempol kaki+tangan* :D

    dan makasih buat tutor di atas!! ^^

    BalasHapus
  8. CARA GAMPANG Tips trik yang mantap, terima kasih telah sudi untuk berbagi

    BalasHapus
  9. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  10. makasih gan dah nunjukin caranya nambah gadget di blog..??

    thank's ya gan 100% brhasil gan..??

    salam dari saya : http://sobatmusik.blogspot.com

    BalasHapus
  11. gan templete nya bagus...boleh share gak templete kamu...

    BalasHapus
  12. thank gan infonya,.,.

    kunjungi juga blog ane :D berbagi ilmu

    BalasHapus

 
GR | Edited by | gubhug reyot