Menambah Kolom Diatas dan Dibawah Postingan Blog


Pada tutorial kali ini saya akan membahas bagaimana sih caranya menambah Kolom di atas dan di bawah postingan blog. Alasan mengapa saya share artikel ini karena banyak sobat blogger yang menginkan agar di blog mereka bisa ditambah beberapa gadget seperti iklan, gambar, maupun gadget lainnya yang mana pada templatenya tidak disediakan fasilitas tambah gadget pada tata letak blog mereka. Jadi bagi sobat blogger yang menginginkan agar dapat menambahkan add gadget di atas dan di bawah postingan blognya, silahkan sobat ikuti tutorialnya berikut ini.


1. Login ke blogger atau klik disini
2. Pilih template >> Edit Html >> Lanjutkan
3. Centang Expand widget template
4. Copy Script di bawah ini dan letakkan di atas code ]]></b:skin>



/*Under Post
-----------------------------*/
#underpost h2{
font-size:13px;
font-weight:bold;
color:#B8002E;
border-bottom:2px solid #000000;
padding-left:5px;
}
#underpost{
width:530px;
}
#underleft{
width:257px; /*lebar kolom kiri*/
float:left;
margin:4px;
}
#underright{
width:250px; /*lebar kolom kanan*/
float:right;
margin:4px;
}

Perhatikan code yang berwarna merah di atas, samakan dengan lebar (width) post body atau main-wrapper di blog Anda. Untuk mengetahhui lebar post body cari code css dibawah ini :


#main-wrapper {
width: 410px;

Nah ukuranya adalah yang tercetak tebal diatas. Jangan lupa untuk membagi dua area kolom kiri dan kanan, perhatikan code yang berwarna biru diatas tadi, misalnya lebar post body atau main wrapper blog anda 410px maka bagi antara kolom kiri dan kanan. Jangan lupa atur margin dan padding untuk jarak tepi antara kolom kiri dan kanan. Setelah langkah pertama selesai mari ke langkah selanjutnya, masih di area Edit HTML, lalu cari code dibawah ini

<div id='main-wrapper'> <b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>

</b:section>
</div>

Jika ingin menambahkan dua kolom dibawah post body maka tambah code yang berwarna merah tepat dibawah code yang berwarna orange dan masih didalam code yang berwarna hijau diatas. Dan jika ingin menambah dua kolom diatasnya maka taruh code yang berwarna merah diatas code yang berwarna orange dan didalam code yang berwarna hijau


<div id='underpost'>
<b:section class='underleft' id='underleft'/>
<b:section class='underright' id='underright'/>
</div>


Sehingga kurang lebih codenya menjadi seperti
Dua kolom dibawah post body


<div id='main-wrapper'> <b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>

</b:section>
<div id='underpost'>
<b:section class='underleft' id='underleft'/>
<b:section class='underright' id='underright'/>
</div></div>

Dua kolom diatas post body


<div id='main-wrapper'><div id='underpost'>
<b:section class='underleft' id='underleft'/>
<b:section class='underright' id='underright'/>
</div> <b:section class='main' id='main' showaddelement='no'>

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

</b:section>
</div>

Nah jika semuanya sudah beres tinggal SAVE. Coba lihat di area page element muncul dua kolom dibawah/diatas post body. Kode-kodenya sesuiakan saja dengan template sobat, karena semua template codenya agak berbeda-beda. Jika kolom kiri dan kanan tidak bisa sejajar maka atur lebar (width) kolom kiri dan kanan, juga atur padding dan marginya. Mungkin hanya sekian dulu tutorial dari saya kalo ada pertanyaan silahkan komentar di bawah ini.

2 komentar:

  1. Manteeep sob artikelnya :)
    Kunjungi web kami
    http://pengobatanalamimustajab.com/
    http://apotekherbalkita.com/wp-admin/
    http://grosiracemaxstasik.com/obat-alami-diare/

    BalasHapus
  2. erimakasih infonya Gan (y)
    Ini yang sedang saya cari-cari
    http://grosirobatjellygmat.com/
    http://jamutradisionalmujarab.com/

    BalasHapus
Catatan:
Untuk menyisipkan video, gunakan tag <i rel="youtube">URL YOUTUBE ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA...</i>
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA...</i>
Untuk menyisipkan kode panjang, gunakan tag <i rel="pre">KODE ANDA...</i>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA...</strong>

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!"

Jika ingin menuliskan komentar yang keluar dari topik pada artikel ini silahkan kehalaman OOT (out of topic) dengan menekan tombol OOT di bawah ini.

Konversi Kode di Sini!OOT

 
Design by Juned al~Bughisy Copyright © 2012 ~ 2013 Powered by Blogger
Back to Top