mas template

Menambah Kolom Diatas dan Dibawah Postingan Blog

Ketemu lagi, di postingan saya tentang menambah kolom dibawah postingan sudah saya jelaskan bagaimana temen-temen blogger semua membuat elemen baru di blog. Kali ini saya akan memberikan tutorial tentang membuat dua kolom baru diatas dan dibawah postingan.

Coba perhatikan gambar disamping ini muncul dua kolom baru dibawah post blog. Sehingga jika Anda menambahkan dua kolom dibawah postingan, Anda dapat menyimpan gadget/widget di atas/bawah postingan misalkan adsense, iklan, atau widget yang lainya.

Apakah Anda ingin menambahkan dua kolom diatas/bawah post body blog Anda? coba ikuti langkah dibawah ini.. Pastikan Anda sudah Log In ke blogspot lalu pilih menu Layout kemudian masuk menu Edit HTML

Taruh Code CSS dibawah ini diatas 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 diatas, 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 biru 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 biru 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 Anda, karena semua template codenya agak berbeda-beda. Nah jika kolom kiri dan kanan tidak bisa sejajar maka atur lebar (width) kolom kiri dan kanan, juga atur padding dan marginya.

Sekian dulu jika ada pertanyaan silahkan isi dikomentar saja. semoga bermanfaat bagi Anda semua.
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 Creating Website

43 comments:

  1. permisi gan....blog saya menggunakan blogger tampilan baru....saya tidak tahu lebar kolom postingan saya...trus saya maen terka saja....kemudian saat saya masukin kode di bawah script posting blog....malah ngga bisa...tolong solusinya gan.....

    ReplyDelete
    Replies
    1. gampang tuh gan... justru lebih gampang yang tampilan baru gan...
      www.clear-education.com

      Delete
  2. This comment has been removed by the author.

    ReplyDelete
  3. tolong dibalas gan...
    kolomx dah berhasil ada dibawah postingan, tapi kok g bisa terbagi... emg terdapat dua elemen "add gadget" tapi tidak terbagi dua sebagaimana yg sy inginkan. mgkn waktu saya bagi 2 yah??,tapi sy sudah sesuaikan dgn luas kolom sy. kebetulan luasnya 600px trus saya bagi 2, kiri skian dan kanan skian tapi kok g bisa mas?? kira2 ksalahanx dmn mas?
    mkasih...

    ReplyDelete
  4. @Senang BacaBlog:
    Tiap template mempunyai sturktur kode yg beda2 mas, jadi nggak selalu seperti tutorial diatas, Cari kode penutup untuk main-wrapper di template Anda, kemudian baru diletakkan kode2 diatas

    ReplyDelete
  5. Kalo di storage blue caranya bagaimana..

    saya mengalami kesulitan nih..

    ReplyDelete
  6. dipasang dua-duanya kok gak bisa ya?? biar bisa atas n bawah.

    ReplyDelete
  7. gan... mbok di adain tutorial menghapus kolom kalo ada... hehe :)

    ReplyDelete
  8. Saya sudah berhasil buat mas, tapi di halaman utamanya juga bennrnya kelihatan www.goocip.com

    ReplyDelete
  9. tapi gan, mengapa kolomnya ga sejajar yah?
    jadi kolom yang kanan lebih kebawah sekitar 1cm.
    tolong bantuannya gan!

    ReplyDelete
  10. Berhasil Gan :D, Emang repot sih, tapi emang bener Cari kode penutup untuk main-wrapper di template, untuk menemukannya ada baiknya mengerti cara menggunakan Klik Kanan n Klik Inspect Element di firefox (firefox lawas pake firebug). Trims Mas Kolis, ai lap yu

    ReplyDelete
  11. Thanks brade ya tutor nya..., akhirnya berhasil juga Ae permak template nya...,

    emmm...., Visite Back Please ya Brade : http://khabaranunik.blogspot.com/

    ReplyDelete
  12. ko diblog saya mah ga ada kode2 gtu mas..??
    knpa ya..??
    mhon pnjlasannya..
    ##bls di blog saya ya.. "Gudang Makalahmu"
    skalian follow blog nih.

    ReplyDelete
  13. This comment has been removed by the author.

    ReplyDelete
  14. nice inpoh, mampir ke gubuk saya http://rizkyseo.blogspot.com/ Rizky Seo Blog

    ReplyDelete
  15. masih bingung gan, di templateku gak ada kode main-wraaper-nya, ada alternatif lain gak gan..

    ReplyDelete
  16. Makasih ya atas infonya,...langsung di coba...

    Singgah ya di blog Ane
    http://ariestarlight.blogspot.com/

    sudi kiranya Follow balik.. :)

    ReplyDelete
  17. Makasih Sob,..Ane udah berhasil memperaktekkannya

    ReplyDelete
  18. Apakah arikel diatas bisa juga di pakai di blog wordpress..?

    ReplyDelete
  19. yessss... succes...

    preview : diatas post body http://pasid-xp.blogspot.com
    thanks maskolis....

    ReplyDelete
  20. gan ko udah pake langsung blognya Whoops, that's an error.

    ReplyDelete
  21. sukses, tp kog gak kebelah jadi dua ya? kanan-kiri gak bisa. bisanya atas bawah

    mohon penerangannya :)

    ReplyDelete
  22. mas, ko kolomnya engga jadi 2 ke samping kya yang di gambar,
    tp malah jadi 2 ke bawah,
    mohon bantuannya mas...

    ReplyDelete
  23. bagai mana menambah berita-berita ke blog gan?

    ReplyDelete
  24. Ane berhasil, tapi ga terbagi 2 . . .
    :(

    ReplyDelete
  25. www.pusatscript.com Jasa Pembuatan Website

    ReplyDelete
  26. This comment has been removed by the author.

    ReplyDelete
  27. Produk di Jamin Asli.
    ELECTRONIC SOLUTION-SHOP.
    Menawarkan harga Promo , Barang yang Kami Tawarkan Semuanya Barang Asli Original Garansi Resmi Distributor dan Garansi Tam .Semua Produk Kami Baru dan Msh Tersegel dLm BOX_nya,
    Berminat Hub: Hotline/sms: 0857-7087-2865 ATAU KLIK WEBSET RESMI KAMI http://electronicsulution-shop.blogspot.com
    BlackBerry>Samsung>Nokia>Apple>Acer>Toshiba
    Led tvlg>Led tv Samsung>Nikon>Canon>DLL

    Dijual,
    Ready Stock !
    Blackberry Bold 9780
    Harga Promo Rp.1.500.000,-
    Ready Stock !
    BlackBerry Bold Curve 9300,
    Harga promo Rp.1.000.000,-
    Ready Stock !
    BlackBerry Torch 9800
    Rp.1.600.000,-
    Ready Stock !
    BlackBerry Z10
    Rp.3.500.000,-
    Ready Stock !
    BlackBerry Q 10
    Rp.4.000.000,-
    Ready Stock !
    Samsung Galaxy S3 Mini
    Rp. 2.700.000,-
    Ready Stock !
    Samsung Galaxy Ace
    Rp.1.400.000,-
    Ready Stock !
    Samsung Galaxy S2
    Rp.2.500.000,-
    Ready Stock !
    Samsung Galaxy S4
    Rp.4.500.000,-
    Ready Stock !
    Nokia 808 Pure View
    Rp.4.200.000,-
    Ready Stock !
    Nokia Lumia 820
    Rp. 2.700.000,-
    Ready Stock !
    Nokia Lumia 920
    Rp.3.400.000,-
    Ready Stock !
    Nokia Lumia 620
    Rp. 1.500.000,-
    Ready Stock !
    Apple iPhone 5G 16GB
    Rp.4.100.000,-
    Ready Stock !
    Apple iPhone 4G- 32GB
    Rp.3.500.000,-
    Ready Stock !
    Apple iPhone 3G-16GB
    Rp.2.900.000,-
    Ready Stock !
    Apple iPhone 4S-64GB
    Rp.4.000.000,-
    Ready Stock !
    Acer Aspire one 756
    Rp.1.400.000,-
    Ready Stock !
    Acer Aspire E1-471G
    Rp.2.800.000,-
    Ready Stock !
    Acer Aspire S5 Ultrabook Core 17
    Rp.7.000.000,-
    Ready Stock !
    Toshiba Satellite C800D-1006
    Rp.2.500.000,-
    Ready Stock !
    Toshiba Satellite C800D-1003
    Rp.1.500.000,-
    Ready Stock !
    Toshiba Satellite L840-1045XR
    Rp.3.700.000,-
    Ready Stock !
    Led TV Lg 42 inch LN5100
    Rp 3.500.000,-
    Ready Stock !
    Led TV Lg 42 inch LN5710
    Rp. 4.000.000,-
    Ready Stock !
    Led TV Lg 39 inch LN5100
    Rp. 3.000.000,-
    Ready Stock !
    Led TV Samsung UA 32 inch F5000
    Rp. 2.100.000,-
    Ready Stock !
    Led TV Samsung UA 32 inch F4000
    Rp.1.500.000,-
    Ready Stock !
    Nikon D5100+18-15Kit
    Rp 3.500.000,-
    Ready Stock !
    Nikon D3000 Kit 18-15mm VR
    Rp. 1.500.000,-
    Ready Stock !
    Nikon D3200 Kit 18-105mm VR
    Rp 3.100.000,-
    Ready Stock !
    Canon Eos 600D Kit EF-S 18-135mm
    Rp.3.800.000,-
    Ready Stock !
    Canon Eos 70D Kit EF-S 18-55mm is stm
    Rp.4.700.000,-
    Ready Stock !
    Canon Eos 600D Body
    Rp.2.500.000,-


    Kami melakukan Pengiriman barang lewat Tiki atau Jne ,Pos,Cargo,bagi luar kota,Ongkir ditanggung pembeli
    Berkat Anda Usaha Kami Jadi Semakin Lancar,Terima kasih telah berbelanja di Electronic Solution-Shop.

    Nikmati berbagai keuntungan berbelanja di sini.
    *Barang berkualitas dan harga relatif lebih murah
    *Dapat diantar ke seluruh indonesia
    *Keamanan di jamin karna setiap pengiriman di sertai asuransi proses cepat dan sederhana
    Barang di jamin 100% original baru dan bergaransi resmi.
    Selamat Berbelanja ! ! !

    ReplyDelete
  28. ini kalau butuh 1 kolom aja gimana caranya?

    ReplyDelete
  29. gua uda coba, gawat juga tapi berjaya. makasih tuturnya..

    ReplyDelete
  30. Udah behasil, thanks. Emang ditampilan tata letak menjadi 2 kebawah (bukan kesamping) tapi setelah dibuat/diisi widget tampilan diblognya disamping.

    ReplyDelete


  31. thanx ya gan atas info nya semoga sukses selalu blog nya gan :)
    dan sukses selalu gan info nya :)

    PROMOSI
    HOT PROMO DARI RAJAPOKER88 di

    http://www.rajapoker88.com/?ref=577053


    Untuk member setia rajapoker88 dapatkan bonus referal dari kami sebesar 10% dari kemenangan teman Referal anda dan dapatkan juga 10 POINT setiap turn over 1 juta rupiah point ini akan di undi setiap 1 minggu sekali

    peringatan: untuk bonus selalu di bagikan setiap hari senin
    dan untuk batas mengklaim bonus setiap hari minggu selama 7 hari
    jika batas mengklaim bonus lewat dari seminggu maka bonus dinyatakan hangus!!

    keterangan lebih lanjut untuk mengklaim bonus silakan hubungi :
    YM: afb88_cs1@yahoo.com
    YM: idr.afb88@yahoo.com
    pin bb : 2257e32b

    segera bergabung dengan kami dan kumpulkan pointnya.
    Terima Kasih.

    Permainan yang kami sediakan yaitu :
    * Poker
    * Tangkas
    * Domino99

    Untuk anda kami suport dengan 5 bank Lokal : BANK BCA, BANK BNI, BANK BRI, BANK MANDIRI, DAN BANK DANAMON.

    Untuk keterangan lebih lanjut, silahkan Hubungi kami di :
    * WWW.RAJAPOKER88.COM (pingbox)
    * TWITTER : @RAJAPOKER88
    * YM : RAJAPOKER88.indo
    * PIN BB : 75CB33AF
    * PHONE NUM : (+84) 169 859 6613
    * SKYPE : RajaPoker88

    Terima Kasih,
    Salam Rajapoker88.com

    ReplyDelete
  32. tq gan atas infonya & sukses selalu gan :)


    PROMOSI

    hello semua para coment gan gan :)
    ayo bergabung bersama kami di website www.senang77.com
    cara mendapatkan uang dengan mudah gabunglah bersama kami..
    kami juga menyediakan bonus turn over 0.3% dan akan di bagikan dalam

    1 minggu dan balance akan masuk kedalam secara otomatisnya


    WWW.senang77.COM
    PENDAFTARAN
    http://senang77.com/Register000.aspx

    Kami juga menyediakan kode referral :)

    http://www.senangpoker.com/?ref=859522

    kami bisa dihunbungi melalui :

    YM : cs.senangpoker@yahoo.com
    FACEBOOK : cs.senangpoker@yahoo.com
    BBM : 764a99d1
    Twitter : senangpoker
    SKYPE : senang.poker


    Untuk anda kami suport dengan 5 bank Lokal : BANK BCA, BANK BNI, BANK

    BRI, BANK MANDIRI, DAN BANK DANAMON.


    TERIMA KASIH
    salam manis :) senang77.com / senang77.net / senang77.info :)

    ReplyDelete
  33. makasih infonya, kunjungi juga :

    Situs dewasa terlengkap Http://www.kis33.net
    Situs bola terakurat Http://www.prediksibola888.com

    ReplyDelete

No comment moderation in this page
Do not put the link in this comment, I'll make it disappear forever
I hate when people play cheat to increase their blog, meanwhile everyone else do it politely and honestly

 
CREATING WEBSITE © 2012 the other blog Mas Template | Look at this Johny Template | Powered by Blogger