33 Membuat Dua Kolom Elemen Halaman Tambah Gadget Dibawah Kolom Posting

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

Menambahkan Dua Kolom Dibawah PostingSebelum saya memasang widget recent posts berdasarkan label atau kategori, saya berfikir harus menempatkan Widget tersebut dimana? Karena bagian sidebar dan footer blog saya sudah penuh, akhirnya saya berinisiatif untuk membuat dua elemen halaman tambah gadget baru dibawah kolom posting.

Nah pada kesempatan kali ini, insyaAllah saya akan mengetengahkan tutorial menambahkan dua kolom elemen halaman   tambah gadget dibawah kolom posting yang sudah saya terapkan diblog ini.

Baiklah silahkan ikuti langkah-langkah berikut:

  • Login ke akun anda >> pada dasbor klik >> Template >> Edit HTML (Jangan ceklis Expand Widget Template).
  • Kemudian cari kode berikut atau yang serupa:

<div id='main-wrapper'>

<b:section class='main' id='main' showaddelement='no'>

<b:widget id='Blog1' locked='true' title='Blog type='Blog'/>

</b:widget>

</b:section></div>

  • Jika sudah dapat letakkan kode berikut dibawah kode </b:section> sebelum kode </div>

<b:if cond='data:blog.url == data:blog.homepageUrl'>

<b:section class='sidebar' id='magazine-left' showaddelement='yes'>

<b:widget id='Text51' locked='false' title='Column 1' type='Text'/>

</b:section>

<b:section class='sidebar' id='magazine-right' showaddelement='yes'>

<b:widget id='Text52' locked='false' title='Column 2' type='Text'/>

</b:section>

<div style="clear: both;"></div>

</b:if>

Sampai pada point ini, Anda dapat melihat preview template atau pratinjau tapi kolom masih terletak disebelah kiri bukan pada posisi tengah. Untuk itu anda perlu menambahkan lagi kode CSS berikut untuk menjadikan kedua kolom berada pada posisi tengah.

  • Carilah kode ]]></b:skin> dan letakkan kode berikut sebelum kode ]]></b:skin>

#magazine-left {

width: 45%;

float: left;

}

#magazine-right {

width: 45%;

float: right;

}

Anda masih bisa menambahkan kode CSS diatas, misalnya menambahkan border dll, silahkan berkreatifitas!

  • Jangan lupa klik preview atau save template untuk segera melihat hasilnya.

Jika anda berhasil mengikuti setiap langkah diatas maka pada bagian Tata letak anda akan melihat dibawah kolom posting seperti screen shoot berikut:

Menambahkan Dua Kolom Dibawah Posting

Demikian tutorial menambahkan elemen halaman tambah gadget dibawah kolom posting. Semoga bermanfaat!


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

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

33 komentar :

  1. kalau menambah elemen di atas head apakan sama seperti tahap di atas???

    BalasHapus
    Balasan
    1. Maksudnya menambahkan kolom elemen diatas header? Silahkan search tutorialnya pada kategori desain template atau lebih khusus lagi pada label header. Thanks apresiasinya.

      Hapus
    2. ok ok ok siiph,,,tingkatkan update artikel tentang blog,,,biar blog q ngak susah nyari artikel di google hehe

      Hapus
    3. InsyaAllah sll akn update yg terbaru dan trbaik. Terimaksh apresiasinya!

      Hapus
  2. kunjungi gan http://cintakonsul.blogspot.com/

    BalasHapus
  3. oh gitu caranya,,,,tinggal tinggal masukan kode di atas ya

    BalasHapus
    Balasan
    1. Ya silahkan ikuti sj stepp by step tutorial diats.

      Hapus
  4. oke, thank's atas infonya gan. saya sudah terapkan dan berhasil.
    ditunggu kunjungan baliknya di:http://tutorial-tipdantrik.blogspot.com/

    BalasHapus
    Balasan
    1. Thanks jg tuk kunjungan dan apresiasinya.

      Hapus
  5. kren gan,,
    kalo bole lebih lanjut, fungsi kolom tersebur buat apah yah.. atau bisa di isi apa ajj nh.. :)???
    makash yh..

    BalasHapus
    Balasan
    1. Namax juga kolom tambah gadget, ya diisi blogger widgetlah, adsense jg boleh. Makasih jg apresiasinya.

      Hapus
  6. .. itu maksudnya kaya kolom Related Posts bukan?!? ..

    BalasHapus
    Balasan
    1. Bukan ♥VPie◥♀◤MahaDhifa♥ tapi kolom tambah gadget, bisa dilihatkan screenshot diats. Thanks apresiasinya.

      Hapus
  7. saya kok gak nemuin kode main-wrapper dsb seperti petunjuk agan di atas. saya pingin banget bisa nambahin kolom elemen di dalam posting. tolong cek blog saya gan:

    maskapro.com

    BalasHapus
    Balasan
    1. Sebelumnya maaf ini bukan kolom dalam posting tapi kolom tambah gadget dibawah kolom posting. Saya sdh lihat blog anda memang kode main tergantung designernya mau pakai selector CSS apa, klu blog pada blog anda coba cari kode main-area.

      Semoga membantu dan terimaksh ats kunjungan dan apresiasinya.

      Hapus
    2. makasih banyak ukhti. tadinya sempat frustasi karena udah nyoba2 tapi gagal terus. semoga tetap sehat supaya bisa terus berbagi ilmu.

      Hapus
    3. Amiin, semoga sukses dan barakah juga tuk usaha anda.

      Hapus
  8. thanks ya atas tutorialnya, saya banyak belajar di blog ini

    oh ya? ada tutorial khusus buat adsense gak ya, soalnya susah banget untuk mendapatkan approvalnya

    thanks sebelumnya

    BalasHapus
    Balasan
    1. Belum sempat posting tutorial ttg adsense krn anaa sndiri blm bnyk pngalaman kmrn iseng2 ikutan daftar tau2 hnya bth bbrpa hr langsung di terima, malah dl blog ini blm custom domain msh pakai embel2 blogspot. Nnt sdh diterima br baca2 tutorial adsense dr blog lain tuk nambah2 pngetahuan, jd u/tutorialx sdh bnyk blog yg membahasnya silahkan search aja dl digoogle.

      Terimaksh apresiasinya ya!

      Hapus
  9. Trima kasih tutornya Mba... Bermanfaat

    Salam..

    BalasHapus
  10. Di coba di blog http://dandylaksana.blogspot.com

    BalasHapus
  11. saya sudah coba tapi templatenya bersusun ke bawah

    BalasHapus
  12. akhir nya ketemu jga tutorial nya..
    terima kasih banyak sob..
    Good Luck..:)

    BalasHapus
  13. kalo mau ngehapusnya gimana ya Mbak?
    saya nyari kode di langkah 3 kok ngga ketemu"

    BalasHapus


  14. itu ada kesalahan tolong dibetulkan agar pemula seperti saya tidak kebingungan

    BalasHapus
  15. sip gan berhasil.kunbal di http://zaidinwelder.blogspot.com

    BalasHapus
  16. kok saya gak misah kiri-kanan, tp widget nya malah atas bawah? itu gimana?

    BalasHapus
  17. alhamdulillah ini yang pas setelah nyoba tutor sana sini :)
    (h)

    BalasHapus
  18. assalamu'alaikum .. kalau di tambah gadget nya gak bisa di edit ituh kenapayah.. mohon pencerahannyah... :((

    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!