mas template

Menambah Kolom dibawah Header Blogspot

Apa kabar teman-teman blogger semua, pada siang hari yang mendung ini saya akan memberikan  tutorial bagaimana cara menambahkan kolom dibawah header blog. Jika menurut temen-temen menambah kolom di bawah header membuat blog kita kelihatan ramai, ya pasang aja di bawah postingan atau di atas footer. Baik, langsung saja pada inti permasalahannya.


Menambahkan 1 Kolom dibawah Header


Pada umunnya kolom di bawah header di gunakan untuk memasang gambar, navbar, teks, atau teman ingin memasang foto-foto temen yang paling narsis  heeeee. Langkah - langkah yang perlu sobat perhatikan adalah :

1.  Login bloger teman.
2.  Klik tata letak atau layout.
3.  Pilih Edit HTML.
4.  Sebelum memulai pengeditan alangkah baiknya temen sekalian membackup datanya terlebih dahulu, caranya pilih Download Template Lengkap.
5.  Cari kode ]]></b:skin> ,agar lebih mudah anda bisa menekan Ctrl + F, kemudian paste kode tersebut di sebelah tulisan Find.
6.  Paste copy berikutdan paste diatas kode ]]></b:skin>
#satu_kolom{
margin:10px 0;
padding:1%;
width:98%;
}
7.  Copy kode berikut ini
<div id="satu_kolom">
<b:section class='header' id='satukolomajah' preferred='yes'/>
</div>
8.  Paste di bawah kode 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>
9.    Simpan template
10.  Lihat perubahannya pada tata letak.

Menambah 2 Kolom Dibawah Header


Sebelumnya saya sudah pernah menjelaskan bagaimana caranya menambah widget di bawah kolom header, kali ini saya akan menerangkan sedikit tentang bagaimana caranya menambah 2 kolom widget dibawah header..

1.  Login bloger teman.
2.  Klik tata letak atau layout.
3.  Pilih Edit HTML.
4.  Sebelum memulai pengeditan alahkah baiknya temen sekalian membackup datanya terlebih dahulu, caranya pilih Download Template Lengkap.
5.  Centang
6.  Cari kode ]]></b:skin>,agar lebih mudah  anda bisa menekan Ctrl + F, kemudian paste kode tersebut di sebelah tulisan Find.
7.  Paste kode berikut di atas kode ]]></b:skin>;
#dua-kolom-dibawah-header {
clear:both;
}
.dua-kolom {
}
8.  Copy kode berikut ini
</div>
<div id='dua-kolom-dibawah-header'>
<div id='kolom1' style='width: 50%; float: left; margin:0; text-align: left;'>
<b:section class='dua-kolom' id='kolom1' preferred='yes' style='float:left;'/>
</div>
<div id='kolom2' style='width: 50%; float: right; margin:0; text-align: left;'>
<b:section class='dua-kolom' id='kolom2' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div> 
9.   Paste di atas kode ini <div id='main-wrapper'>
10. Simpan tempalte.
11. Lihat perubahannya pada tata letak.

Menambah 3 Kolom Dibawah Header


1.  Login bloger teman.
2.  Klik tata letak atau layout.
3.  Pilih Edit HTML.
4.  Sebelum memulai pengeditan alahkah baiknya temen sekalian membackup datanya terlebih dahulu, caranya pilih Download Template Lengkap.
5.  Centang
6.  Cari kode ]]></b:skin>,agar lebih mudah anda bisa menekan Ctrl + F, kemudian paste kode tersebut di sebelah tulisan Find.
7.  Paste kode berikut di atas kode ]]></b:skin>
#tiga-kolom-dibawah-header {
clear:both;
}
.tiga-kolom {
}
8.  Copy kode berikut
<div id='tiga-kolom-dibawah-header'>
<div id='kolom1' style='width: 35%; float: left; margin:0; text-align: left;'>
<b:section class='tiga-kolom' id='kolom1' preferred='yes' style='float:left;'/>
</div>
<div id='kolom2' style='width: 35%; float: center; margin:0; text-align: left;'>
<b:section class='tiga-kolom' id='kolom2' preferred='yes' style='float:center;'/>
</div>
<div id='kolom3' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='tiga-kolom' id='kolom3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>
9.  Paste di atas kode ini <div id='main-wrapper'>

Catatan
Jika sobat awalnya mengikuti dari membuat 2 kolom di bawah header, (sekali lagi hanya bagi yang mengikuti dari cara membuat 2 kolom di bawah header) sobat hanya tinggal mengganti kode berikut :
</div>
<div id='dua-kolom-dibawah-header'>
<div id='kolom1' style='width: 50%; float: left; margin:0; text-align: left;'>
<b:section class='dua-kolom' id='kolom1' preferred='yes' style='float:left;'/>
</div>
<div id='kolom2' style='width: 50%; float: right; margin:0; text-align: left;'>
<b:section class='dua-kolom' id='kolom2' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>
menjadi :
</div>
<div id='dua-kolom-dibawah-header'>
<div id='kolom1' style='width: 35%; float: left; margin:0; text-align: left;'>
<b:section class='dua-kolom' id='kolom1' preferred='yes' style='float:left;'/>
</div>
<div id='kolom2' style='width: 35%; float: right; margin:0; text-align: left;'>
<b:section class='dua-kolom' id='kolom2' preferred='yes' style='float:center;'/>
</div>
<div id='kolom3' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='dua-kolom' id='kolom3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>
(tempatnya tetap sama di atas kode <div id='main-wrapper'> jangan ditambah tapi di ganti>

10. Simpan tempalte. 

11. Lihat perubahannya pada tata letak.

Itu tadi sedikit  tutorialnya, bagi temen-temen yang punya cara yang lebih bagus, saya mau kok dikasih tahu. 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 Creating Website

37 comments:

  1. Bang, kalo gak ada kode MAIN-WRAPPER tuh gemana? aku pake template nyobanya mas isnaini di blog
    Bisnis Online
    mohon bantuannya...

    ReplyDelete
  2. Many Thank for Sharing information

    ReplyDelete
  3. kunjungan gan...!templatenya bagus.gimana cara buatnya gan?

    ReplyDelete
  4. bingung mas....kenapa salah mulu...

    ReplyDelete
  5. Makasih bos pencerahannya, sudah saya praktekan.

    ReplyDelete
  6. tipsnya work gan terimakasih yah...
    kapan" kunjung ke blog saya yah...

    marvelgameshop.blogspot.com

    ReplyDelete
  7. Keren,, trims buat tutorialnya
    salam kenal ya

    ReplyDelete
  8. Gan, kok code main-wrapper'> kaga ada...?

    ReplyDelete
  9. mastah kodenya ko gak ada ya di tamplte yang punya saya..gmn tuh ?

    ReplyDelete
  10. trik yang simple tapi menarik ..senang rasany dapat trik lagi..

    ReplyDelete
  11. Thanks infonya...
    Kalau menghilangkan Read More bisa egk???

    ReplyDelete
  12. Tanks sharenya,sedot dan praktek....

    ReplyDelete
  13. Terima kasih atas artikelnya.

    sepertinya anda berbakat untuk urusan membuat postingan yang ini, jujur saja kamu punya kelebihan tersendiri, dan saya akan berkunjung lagi bila ada waktu.



    #Semoga sehat selalu :D

    ReplyDelete
  14. gan kok saya tdk menemukan main-wraper yaa ??

    ReplyDelete
  15. iya saya juga seperti yg di atas itu om, tidak menemukan "main wriver" atau "main router"

    ReplyDelete
  16. thanks sob buat tutorialnya… langsung ane praktekiin…

    berkunjung jg ke blog newbie ane ya…

    ReplyDelete
  17. Makasih gan tutorialnya, uda bisa pasang iklan ni dibawah header. tq salam kenal gan

    ReplyDelete
  18. thanks infonya gan. udah berhasil ane terapin di blog ane. lihat kesini gan http://amrusobar.blogspot.com/

    ReplyDelete
  19. Alhamdulillah, akhirnya jadi negrti juga cara edit kolomnya. :D
    Makasih untuk tutorialnya ya gan :)

    ReplyDelete
  20. sangat bermanfaat, berhasil mas !! di tunggu kunjungan baliknya:

    http://3denda.blogspot.com/

    ReplyDelete
  21. bagus ini lagi nyari2 di gopogle eh nemu jawabannya disini :)

    ReplyDelete
  22. kalo bikin kolom nya yang paling bawah gimana ?

    ReplyDelete
  23. main weppernya gk ketemu gk :(
    mohon bantuannya http://goodispost.blogspot.com/

    ReplyDelete
    Replies
    1. ngga seemua template sama :v
      buktinya gwe bisa tuh :v http://ah-shared.blogspot.com

      Delete
  24. kalau untuk wordpress giaman caranya mas?

    ReplyDelete
  25. setelah sekian lama berusaha akhirnya bisa gan, sangat tengkiyuuu :) | mampir gan, http://yantasik.blogspot.com

    ReplyDelete
  26. thanks gan berhasil... kunjung blog ane ya http://www.wdfshare.net/
    Free Download Save GTA San Andreas 100% tamat

    ReplyDelete
  27. TERIMA KASIH BANYAK MAS ATAS TUTORIALNYA.....

    ReplyDelete
  28. mas,,ada tutorial buat blogger jadi dot com ga mas.mohon pencerahan ni mas maskolis,bisa kontak saya di ubayheryanto@gmail.com
    atau komentar di Blog Saya
    makasih
    salam

    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