Untuk mendapatkan space iklan dihalaman ini silahkan hubungi owner Blog Design, Kami akan secepatnya merespon dan mempertimbangkan letak dari iklan text dan banner anda...

Saturday, August 17, 2013

cara membuat 2 kolom layout di bawah postingan blog

Cara membuat 2 kolom layout dibawah main wrapper atau dibawah layout postingan sangat berguna buat para bloger untuk tempat berbagai widget khususnya dibidang advertise atau wadah iklan. Buat para bloger strategi menempatkan iklan pada halaman log harus lebih unik dan mudah dilihat para pengunjung agar kesempatan untuk diklik lebih besar. Memang kegunaan kolom layout dibawah postingan ini tidak diwajibkan untuk iklan, tapi dalam postingan kali ini saya mencontohkan widget iklan agar lebih mudah dipahami. Bila anda ingin memasang 2 kolom layout dibawah postingan silahkan simak tutorial dibawah ini dan langsung saja menuju TKP.


Referensi Artikel


  • 5 kolom layout di footer halaman blog
  • Membuat 4 kolom layout di footer halaman blog
  • cara membuat 2 kolom layout di sidebar blog

Install Program CSS


  1. Login ke dashboard anda
  2. Masuk ke "TEMPLATE" lalu klik " Edit HTML "
  3. Cari code ]]></b:skin> 
  4. Copy Code script CSS dibawah ini, pastekan diatas code ]]></b:skin> tadi atau bila template blog anda memakai </style> silahkan pastekan kode CSSnya tepat diatas </style> template anda

  5. /*****************************************
    Name : 2 kolom layout dibawah postingan
    By : Rivai Silaban | Blog Design
    Update : 17/08/2013
    ******************************************/
    #BD-bawahmain h2{
    font-size:13px;
    font-weight:bold;
    color:#990000;
    border-bottom: dashed #999999 1px;
    padding-left:5px;
    font-family: Geneva, Arial, Helvetica, sans-serif;
    font-style: italic;
    }
    #BD-bawahmain{
    width:100%;
    border:solid #CCCCCC 1px;
    background-color: #99FF00;
    }/*** Blog Design CSS and ***/



  6. Setelah anda selesai memasang code CSSnya saatnya anda dipaksa untuk memasang kode tag htmlnya pada halaman blog anda agar muncul pada saat dibrowsing.
  7. Coba cari dan perhatikan kode dibawah ini

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

    Kode diatas adalah adalah kode " Posting Blog " ( Blog1 ) dibagian main wrapper kode tersebut dimiliki oleh blog dari blogspot . Misi kita adalah membuat 2 kolom layout dibawah postingan blog.
  8. Setelah ketemu dan anda perhatikan kode diatas silahkan anda copy kode dibawah ini lalu pastekan tepat diatas kode </div> seperti kode diatas.


  9. <!-- Rivai Silaban | BLOG DESIGN 2 kolom layout start -->
    <div id='BD-bawahmain'>
    <div id='BDkiri' style='width: 47%; float: left; margin:4; text-align: left;padding:3px;'>
    <b:section class='BD-L' id='BD-left'/>
    </div>
    <div id='BDkanan' style='width: 47%; float: right; margin:4; text-align: left;padding:3px;'>
    <b:section class='BD-R' id='BD-right'/>
    </div> </div><!-- Rivai Silaban | BLOG DESIGN 2 kolom layout End -->


  10. Setelah anda pastekan diatas kode </div> seperti kode diatas sekarang hasilnya kira kira seperti kode dibawah ini.

    <div id='main-wrapper'>
    <b:section class='main' id='main' showaddelement='no'>
    <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'>..</b:widget>
    </b:section>
    <!-- Rivai Silaban | BLOG DESIGN 2 kolom layout start -->
    <div id='BD-bawahmain'>
    <div id='BDkiri' style='width: 47%; float: left; margin:4; text-align: left;padding:3px;'>
    <b:section class='BD-L' id='BD-left'/>
    </div>
    <div id='BDkanan' style='width: 47%; float: right; margin:4; text-align: left;padding:3px;'>
    <b:section class='BD-R' id='BD-right'/>
    </div> </div><!-- Rivai Silaban | BLOG DESIGN 2 kolom layout End -->

    </div>

  11. Perhatikan warna dari kode postingan blog ( Kode warna Hijau ) dan kode warna merah dibawahnya adalah 2 kolom layout kiri dan kanan tepat dibawah postingan blog anda.
  12. Setelah semua sudah sempurna anda lihat silahkan anda save template anda, saatnya anda menuu "Tata Letak" ( layout ) untuk melihat hasil 2 kolom layout kiri dan kanan dibawah layout postingan blog anda.


Kesimpulan

Membuat 2 kolom layout di bawah widget postingan halaman blog akan menambah kreativ dan inofasi anda pada halaman blog kesayangan anda untuk lebih leluasa memasang berbagai widget untuk menunjang kinerja halaman blog anda.

Silahkan anda edit CSSny untuk lebih kreative lagi agar sesuai dengan thems halaman blog kesayangan anda. Bila anda merasa kesulitan untuk memasang 2 kolom layout dibawah postingan blog ini silahkan anda hubungi saya atau silahkan anda gunakan form komentar dibawah postingan ini untuk share bersama saya, saya akan membantu anda dengan senang hati.

Membuat 2 kolom layout dibawh postingan blog
17 Agustus 2013
Admin Rivai Silaban

MERDEKA !!! MERDEKA !!! MERDEKA !!!

Terimakasih atas kunjungannya,Bila anda suka dengan artikel ini silahkan JOIN TO MEMBER BLOG atau berlangganan geratis Artikel dari blog ini, daftarkan email anda pada form subscribe dibawah halaman . Pergunakan vasilitas diblog ini untuk mempermudah anda. Bila ada masalah dalam penulisan artikel ini silahkan kontak saya melalui kotak komentar yang ada dibawah atau gunakan fasilitas yang ada diblog ini untuk menghubungi saya.

Salam Blogger.... !!! .

Me

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter
Di posting oleh : Unknown Update pada : 4:13 PM

31 comments :

  1. GAN ane mau tanya ane pake template standar nga ada kode
    div id='main-wrapper' solusinya gimna gan?

    ReplyDelete
    Replies
    1. mohon solusinya gan ane masih newbie di bloger ane tunggu ya :)

      Delete
    2. kalo soal kode main-wrapper itu bukan terlalu masalah yang penting kode Blog 1 pasti ada silahkan sisipkan kode tersebut dibawah widget blog 1 lihat kode tulisan warna hijau pada tutorial diatas.

      Delete
  2. makasih infonya gan ane mau coba dulu.. kalo masih nga bisa aq tanya lagi ya gan.. good lucky gan :)

    ReplyDelete
    Replies
    1. silahkan dicoba lagi, bila ada masalah ngak usah segan nanya nya sob, saya akan membantu.

      Delete
  3. MET MLM GAN.. gan ane mau tanya lagi.. gini gan anekan baru download template... tapi ko newer post post sama older pst kaga ada.. aq udah coba cara membuat next tapi kaga bisa gan.. gan mohon pencerahannya

    ReplyDelete
    Replies
    1. saran saya ada 3 alternatif sob.
      1 . Silahkan download ulang templatenya.
      2 . Kembalikan template widget blog 1 ke default.
      caranya klik " template " kemudian pilih "Edit HTML " lalu pilih " Kembalikan template widget ke default " centang " Blog 1 " klik " kembalikan widget yang dipilih "

      NB : Bila anda mengembalikan widget Blog 1 secara otomatis semua tampilan halaman postingan akan berubah kebentuk standart blogspot.

      3 . Lebih bagus pilih template yang sudah lengkap Template SEO Friendly, Valid HTML 5 dan CSS, loading cepat dan kalo boleh responsive. Ini ada template buatan saya silahkan dilihat lihat.

      http://rivai-silaban.blogspot.com/search/label/template

      Delete
  4. wow cepet banget loding templatenya gan... oh iya gan aq udah coba tapi pening palaqu hehehe maklum newbie...gan bleh nga aq kirim kode templatenya nnti gan yang koreksi di mna letak kesalahannya sampe nga muncul nextnya.. gan ane mintol sekali gan.. ane nga bisa ngasih apa2 cuman ane doain gan murah rejeki n slalu di beri kemudahan arah tujuannya amin.. gan ane tunggu jawabannya kalo gan bersedia koreksi ane kirim templatenya.. makasih :)

    ReplyDelete
    Replies
    1. amin...
      heheh iya yah silahkan tulis di koment alamat blognya yang punya masalah tersebut saya akan koreksi sob

      Delete
  5. akhirnya gan mau bantuin aq ..heheheh.. gan aq sdh coba gloging sana sini ampe botak palaqu baca kode nga karuan :) setelah aq coba terapkan cara memasang next berhasil sih ber hasil pindah halaman tapi tampilannya ko beda dengan tampilan home...gan template ini jg bermasalah postingan aq batasi 24 yg tampil setelah di next bukan jadi postingan kolom tapi malah jadi postingan besar dan berjejer.... ane nga tau gan kode2 kaya gini malah aq tambahin slider tumbinalis dari mascolis aq tempatkan sembarangan kodenya..hahahha nga tau nih blog jadi apaan ... skali lagi makasih bnyak gan udah mau bantu nih alamat blog aq gan...
    http://emhan-sulteng.blogspot.com

    ReplyDelete
  6. gan yang ini permasalahannya halaman depan tampilannya kaya gini
    http://1.bp.blogspot.com/-qsb_sL6ids0/Uhw2rkaS1VI/AAAAAAAACVY/NaeBriLO1vk/s320/next.jpg


    setelah di pasang neh walah ko nga kaya halaman sebelumnya maunya aq gan sama kaya halan awal tampilan postingannya
    nih gan kronologisnya
    http://1.bp.blogspot.com/-glF70SESKyA/Uhw2xqN_yhI/AAAAAAAACVg/ISOMyTUIssI/s320/postingan.jpg

    ReplyDelete
  7. maaf gan kayanya gambarnya kebalik hehehheh yang atas itu gambar setelah di next dan yang di bawah halaman depan postingan yg berkotak rapi berjejer... gan terima aq jadi murid mu hehehehe

    ReplyDelete
    Replies
    1. oh memang template itu di khususkan untuk template berbasis gambar, jadi sistem nextnya menampilkan jumlah tampilan postingan dari gambar random img.

      tampilan postingan template kamu dipengaruhi sistem script random img dimana semua penulisan kode html untuk gambar berkode img.

      Bila kamu memasang sistem next kamu harus merubah jumlah postingan per halaman yang tampil. jadi sistem next halaman blog memperjemahkan atau menampilkan satu postingan saja pada saat next di klik. Banyak yang harus dirubah pada template tersebut. kalo ada waktu akan saya lihat dulu sistem pengkodean template kamu.

      Untuk bergabung dan mempermudah silaturahmi kita silahkan join ke blog ini agar lebih dekat. silahkan kunjungi link dibawah ini untuk join Atau bisa saja langsung klin join to member blog pada link diatas.

      http://www.blogger.com/follow-blog.g?blogID=5055362939739660258

      Delete
  8. oke sip gan ane setia menunggu .. sukses slalu buat gan rivai

    ReplyDelete
  9. Thank banget infonya.
    Sekalian mau tanya, untuk membuat tanda tangan bagus seperti diatas itu ada tutornya juga ga ya?

    ReplyDelete
    Replies
    1. sama sama sob..

      berhubung tehnik pembuatannya harus melalui design manual dari coreldraw, dan memiliki beberapa tahap saya rasa membuat tutorialnya tergolong rumit,

      tapi sebagai solusinya bagusan buat tanda tangan dikertas baru scan gambarnya saya rasa itu solusi yang paling tepat.

      Delete
  10. makasih ya gan...mantab dah infonya..maju terus gan..(y) kunjungi blog saya juga yah http://trafagarlaw.blogspot.com/

    ReplyDelete
    Replies
    1. sama sama sob.. salam kenal..
      blognya keren habis sob...

      Delete
  11. MAs kalo merubah ukuran lebar dan tinginya gimana ya ? udah berhasil nih nambah widget tapi mau nyeting lebar dan tingginya Maksih

    ReplyDelete
    Replies
    1. soba di perhatikan code HTML nya bagian width: 47%;
      47% merupakan angka decimal dari lebat widget, untuk tinggi silahkan tambahkan code height:20px; angka decimal 20px merupakan tinggi widget menjadi 20pixel...

      silahkan gabung di sini bila ada yang mau di pertanyakan diluar postingan ini..

      http://www.rivai.org/p/template.html#/forum-seo/

      Delete
  12. gan coba lihat screenshot template ane,mau menambah widget di samping header dan menambah 2 kolom di bawah postingan susah banget...kasih solusi ya....thx

    https://lh4.googleusercontent.com/-jQopvq6iaGs/UtAAoddiuHI/AAAAAAAAFXU/xUvn10QH9XA/h120/2014-01-10_211104.png

    atau download text

    http://www.datafilehost.com/d/17aa58ec

    ReplyDelete
  13. menambah kolom di bawah post kalau htmlnya seperti ini :

    <!-- Content Start-->
    <div id='content'>
    <div style='clear:both;'/>
    <b:section class='main' id='main' showaddelement='no'>
    <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'>
    <b:includable id='main' var='top'>
    <!-- posts -->

    ane sampai puyeng utak-atik nie template gan...satu lagi gan cara nambah kolom di samping header dengan CSS :

    /* wrapper */
    #wrapper{width:920px;padding:10px 0 0 0;margin:0 auto;overflow:hidden;background:#666666;box-shadow: 0 0px 15px 0px #fff;}
    /* Header */
    .header{width:880px;margin:0 0px 0px 20px;position:relative;height:100px;}
    h1.logo{margin:10px 0 0 0;padding:0;width:600px;font-size:200%;}
    h1.logo a {padding:0 0 0 5px;width:600px;text-transform:uppercase;color:#000;}h1.logo a:hover {text-decoration:none;}
    headerleft{width:600px;float:left;font-size:14px;margin:0;padding:0}.headerleft a img{border:none;margin-left:10px}

    .header{width:880px;margin:0 0px 0px 20px;position:relative;height:100px;}
    h4.logo{margin:10px 0 0 0;padding:0;width:600px;font-size:200%;}
    h4.logo a {padding:0 0 0 5px;width:600px;text-transform:uppercase;color:#000;}h2.logo a:hover {text-decoration:none;}
    .descriptionwrapper {margin:12px 0 0 5px;padding:0;width:600px;font-size:80%;}
    .headerleft{width:600px;float:left;font-size:14px;margin:0;padding:0}.headerleft a img{border:none;margin-left:10px}

    id :
    <div class='header'>

    <b:section class='headerleft' id='header' maxwidgets='1' showaddelement='no'>
    <b:widget id='Header1' locked='true' title='nama blog (Header)' type='Header'>
    <b:includable id='main'>

    ReplyDelete
    Replies
    1. untuk memasang 2 kolom layout dibawah postingan , kamu harus memasangnya dibawah code Blog 1 coba di perhatikan kode HTML tutorialnya mas, saya pikir hal ini mudah...

      Delete
    2. bila mas, masih kurang memahaminya, silahkan share di forum aja mas, agar lebih enak... silahkan gabung di sini

      http://diskusi.rivai.org/

      Delete
  14. thxs udah mau share.. sy terpin ternyata oke dan gampang juga.. terus berkarya mas.. goodjob

    ReplyDelete
  15. gan blog sya ga da tulisan author post nya, gmna ya caranya supaya muncul diposkan oleh . lihat sni gan trovustar.blogspot.com

    ReplyDelete
  16. terima kasih sob atas infonya
    idcheat.com

    ReplyDelete

1. Komentar SPAM Akan secepatnya dihapus
2. Pastikan untuk " Berlangganan Lewat Email " untuk membangun kreatifitas blog ini
3. Cek komentar masuk sebelum bertanya.
4. Link aktiv tidak akan berpungsi.
5. Dilarang menyebarluaskan artikel tanpa persetujuan dari saya.
6. Untuk mengajukan pertanyaan diluar postingan diatas, silahkan klik " Forum Diskusi "
7. Bergabung dengan kami untuk menjadi member Klik " Join to Member "
8. Komentar yang mengandung code tag HTML, konversikan terlebih dulu silahkan klik " Konversi Kode "

Salam bloger .. !!
Pergunakan semua fasilitas di Blog ini untuk mempermudah anda..
Konversi Kode Forum Diskusi Join to Blog