34 Menambah Elemen Halaman Di Bawah Header

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

Waktu blog walking or silaturahim dibeberapa blog teman, diantara beberapa blog teman saya liat dibawah headernya sebelum postingan banyak aksesoris blognya, ragam widget salam sapa tuk pengunjunglah, bannerlah, iklanlah dan lah lah lainnya deh. Bermula dari awal ketertarikan itulah (lah lagi?), timbul hasrat saya tuk exsperimen kecil. Saya penasaran kok di template saya ngga ada dibagian elemen halaman kolom untuk menambah  gadget dibawah header ya?
Maka mulailah saya selancar dengan browsing, nanya kepaman google. Akhirnya nemu deh caranya, dipraktekkanpun langsung jadi karena rupanya tidak terlalu sulit, hanya butuh ketelitian dan kesabaran dikit ja…Alhamdulillah hasilnya dah tengokkan salam sebelum postingan blog ni?
Nah ni saya bagi tutorialnya buat teman teman.

 Bagaimana menambah elemen halaman tepat dibawah header
menambah elemen halaman tepat dibawah header

  • Anda mesti dalam keadaan log in ke blogger.
  • Masuk menu tata letak=>Edit HTML. Untuk mengantisipasi hal yang tidak anda inginkan, baiknya download lengkap dulu (backup) dulu template anda. Kalau saya langsung aja, he2.
  • Jangan lupa untuk mencentang kotak kecil Expand Template Widget.
  • Copi kode warna merah berikut, paste diatas kode ]]></b:skin>
#under_header{
margin:10px 0;
padding:1%;
width:100%;
}
  • Cari kode seperti ini:

<div id='header-wrapper'> 
<b:section class='header' id='header' maxwidget="1" showaddelement="no">
<b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>
</b:section>
    </div>
  • Paste kode warna merah berikut dibawah kode tadi
<div id="under_header">
<b:section class='header' id='underheader' preferred='yes'/>
</div>
  • Langkah terakhir tinggal save template.

Coba sekarang lihat ke elemen halaman udah ada laman atau kolom untuk tambah gadgetnya apa belum? Kalau belum mungkin ada yang keliru, coba lagi!


ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Tips Trik Blogging

34 komentar :

  1. Syukran Atas Ilmu yang berharga ini...

    BalasHapus
  2. kak,,saya kok gak bsa ya? cz ada script html yg beda,,
    pd langkah kedua,,di blog saya tdk tdp blog yg kk anjurkan,,
    jd apa yg hrs sya lakukan kak?

    BalasHapus
  3. Anaa udah beberapa kali praktekin ini di beberapa template dan berhasil de, mungkin saja ade belum nemu kodenya. Cara mudah mencari kodenya tekan CTRL+F.

    Coba lagi moga berhasil!

    BalasHapus
  4. kak,,bneran deh aQ gk bisa,,tpi kL pasang tambah gadget yg diatas header bisa kak

    BalasHapus
  5. Mau tnya nih, maaf kalau pertanyaan nya bikin ketawa ! maklum tidak mengerti masalah web. Saya baru saja mengupload template dari template dasar ke template yang disediakan oleh pihak ketiga (bukan blogger), silahkan liat dulu blog saya !
    di bagian atas di bawah header kan ada menu home, about, post rss, dan contact, nah bagaimana cara mengisinya dengan postingan atau yang lainnya? bisakah ? oh ya sekaligus jika saya ingin mengganti judul-judul itu bagaimana ? makasih sebelumnya !

    BalasHapus
  6. @ tips travian: jawabannya akan say sampaikan diblognya.

    Jangan malu tuk bertanya. Tidak ada yg perlu ditertawakan.

    Terimakasih kunjungan dan apresiasinya.

    BalasHapus
  7. jazakallah... berhasiilll...berhasilll...hehe

    BalasHapus
  8. Wa iyyak, alhamdulillah terimakasih apresiasinya

    BalasHapus
  9. thanks banget tutorialnya.. alhamdulillah sdh bs dipraktekkan..

    BalasHapus
  10. Assalamu'alaikum
    Kasih tau dung mbak cara membuat foto slide show seperti contoh di halaman awal..(dibawah SlideShow Featured Content Using JQuery > ada gambar dan tulisan kerinduan pada baitullah)

    thank a lot on your attantion..
    Wassalamu'allikum

    BalasHapus
  11. @ anonim: wa'alikumussalam, khn udah diposting, silahkan lihat pd tutorial dgn label JQuery

    BalasHapus
  12. gini nih ..
    sy mau nanya ..
    kalo buat laman saya kok barisnya seperti ini :

    beranda
    tutorial
    about

    sementara saya pengen seperti ini :

    beranda | tutorial | about

    gimana buatnya ??

    BalasHapus
  13. terima kasih untuk infonya, sangat bermanfaat.. saya masih sementara membuat blog, dan sedikit aneh karena saya ingin jadikan blog saya semuanya sebagai tempat pasang iklan.. saya udah belajar buat kotak tambah adds di bawah, tapi yang di atasnya belum... apakah bisa di ajarkan? bagaimana caranya menjadikan elemen itu menjadi 4 bagian ya?? terima kasih..

    BalasHapus
  14. wah, mbak. sya sedang bingung dgn yg ini. kmrin hbis ganti template, body nya dah oke, tp masalhnya di header. kagak ada lamannya. kebetulan ada teman yg bisa pasang tp koq lamannya malah nyatu ke header yah? bingung deh.
    mohon pencerahannya. :D

    BalasHapus
  15. thans sob infonya... salam sukses :D

    BalasHapus
  16. makasih mastah... sangat bermanfaat sekali :)

    BalasHapus
  17. Terima kasih atas tutorial-nya sist. Sempat gagal tapi di percobaan ke-2 akhirnya sukses. Silahkan mampir ke blog ane :)

    BalasHapus
  18. Thanks infonya...
    Kalau menghilangkan Read More bisa egk???

    BalasHapus
  19. salam kenal...
    maaf mau tanya di template saya kode di atas tidak ada adanya kode div id='header-inner'
    begitu saya coba otak atik tapi yang terjadi blog saya jadi error mohon pencerahan bagaimana cara menambah 2 kolom di bawah header atau merubah header jadi 2 kolom
    terima kasih sebelumnya

    BalasHapus
  20. Sangat membantu sekali,,thx ya,,!?

    BalasHapus
  21. makasih infonya, happy blogging

    BalasHapus
  22. saya sudah cari berulang2 kode div id='main-wrapper tapi gak ketemu2 gimana ni ada solusi yang lain gak???

    BalasHapus
  23. Tutor nya sangat membantu Mas..., saya tadi perlu buat menu header, secara template nya gak nyedian Element header nya..., cuma buat Judul aja...! jadi saya tambah 1 lagi element header nya buat menu..., thanks ya Mas...!

    BalasHapus
  24. Wahhh..., Artikel nya menarik bgt Kak..., saya dah coba..., dan berhasil maksih ya Kak...!

    BalasHapus
  25. Terimaksih atas share nya ya Kak...,

    BalasHapus
  26. Terimakasih Mas atas tutorialnya sangat membantu sekali. saya langsung praktekan dan langsung bisa Mas.

    BalasHapus
  27. nice tutorial, nice blog
    i like it, well done my sis

    BalasHapus
  28. Sepertinya diblog saya gak bisa Mas.

    BalasHapus
  29. terima kasih atas tutornya.. izin coba dulu.

    BalasHapus
  30. Saya suka templatenya..nice.. :)

    BalasHapus
  31. terimakasih banyak tipsnya kk, udah saya coba dan work! lihat aja langsung di blog saya :)

    BalasHapus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

NB:Sebelum menyisipkan kode silahkan gunakan tool konversi kode terlebih dahulu untuk menampilkan kode tersebut pada kolom komentar
Konversi Kode di Sini!