if (window.jstiming) window.jstiming.load.tick('headEnd');
Minal 'Aidin wal Faizin
Mampukah setiap tahun bertambah baik?
Sebuah tantangan bagi siapapun. Jadikan Idul fitri sebagai mement yang indah dan tepat untuk setiap kali merubah diri menjadi pribadi yang jauh lebih baik, lebih peduli, jauh dari korupsi, jauh dari iri hati dan dengki... dan tentu saja ... jauh lebih lebih berharga dimata Allah dan dan sesama.

Cara Mudah Membagi Kolom Header

Kalau pada postingan sebelumya pada tutorial Education For All, membahas tentang cara membuat kolom dibawah header atau diatas header, maka pada tutorial blog pemula kali ini EFA akan membahas tentang Cara Mudah Membagi Kolom Header. kolom header ini bisa demanfaatkan untuk keperluan banyak hal, sperti misalnya untuk iklan dan sebagainya. namun karena EFA sendiri tidak memasang iklan pada blog ini maka EFA manfaatkan untuk memasang gambar animasi. contohnya ya ...bisa sobat blogger mania lihat pada kolom header EFA yang ada disebelah kanan itu. Apabila sobat blogger mania berminat memasang slide show photo seperti pada header EFA silahkan baca tutorialnya dengan cara klik DISINI nah jika template sobat blogger mania memang headernya belum terbagi silahkan saja ikuti langkah langkah berikut ini:

Pertama :Login ke blogger dengan ID anda
Kedua : Klik Layout
Ketiga : Klik tab elemen Halaman , kemudian klik tab Edit HTML, lihat ke bagian kode CSS, lalu cari kode seperti ini :  

/* Header
===================================
*/
#header-wrapper {
width:900px;
margin:0 auto 0px;
background:$bgheadercolor url(http://ahom24.googlepages.com/magazine_01.jpg) no-repeat top center;
height:190px;
}

#header-inner {
width:900px;
background-position: center;
margin-$startSide: auto;
margin-$endSide: auto;
}

#header {
margin: 0px;
text-align: left;
color:$pagetitlecolor;
}


Hapus Kode diatas lalu ganti dengan kode script dibawah ini


/* Header
===================================
*/

#header-wrapper {
width:900px;
margin:0 auto 0px;
background:$bgheadercolor url(http://ahom24.googlepages.com/magazine_01.jpg) no-repeat top center;
height:190px;
}

#head-inner {
width:600px;
background-position: left;
margin-left: auto;
margin-right: auto;
float:left;
}

#header {
margin: 0px;
text-align: left;
color:#ffcc66;
}

#r_head{
width:300px;
float:left;
padding-top:10px;
}


 

Kemudian scroll lagi kebawah dan cari kode script yang seperti ini:



<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Test Blog (Header)' type='Header'/>
</b:section>
</div>


Hapus kode diatas lalu ganti dengan kode dibawah ini



<div id='header-wrapper'>
<div id='head-inner'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Test Blog (Header)' type='Header'/>
</b:section>
</div>
<div id='r_head'>
<b:section class='header' id='header2' preferred='yes'/>
</div>
</div>


Terakhir dan yang paling utama simpan.


Selamat mencoba semoga berhasil. apabila ada yang kurang jelas silahkan tulis dikom komentar

Selamat berkarya melalui Blogger...................


 
  


 

The Owner of Education For All Blog hanyalah seorang Blogger pemula namun bila sobat blogger mania berminat untuk melihat tutorial lainya bergaya magazine blog silahkan. Akses melalui link di bawah ini :





» Selamat Berkreasi - E F A «


10comments:

  1. Makasih gan akhirnya ketemu juga yang gua cari cari

    ReplyDelete
  2. ada 5 blog yang coba sy buat bp bisa lihat dgn pass dn email yg bpk buat dulu.6 dgn yg bpk bikin sbagai leader blog sy.pertanyaanya bagaimana caranya bikin kolom header sperti pada kiri blog bapak.sprti:(**tutorial bloger,fasilitas chating dll.jdi tinggal klik artikel kita ada di situ.mohon pencerahannya oh ya kmarin sy dah bls lewat email kapan sy pulang.

    ReplyDelete
  3. Baik-baik, Bang ini yang punya blog ini adalah guru masadepan Indonesia. hehehehehe............

    ReplyDelete
  4. mau nanya nih pak…coba klik yang muncul bukan blog sy tp sejenis iklan sekolah apakah itu.mohon pencerahannya terimakasih

    ReplyDelete
  5. tepatnya di kolom komentar ada tulisan secara online itu iklan sekolah.bagaimana ko bisa seperti itu ya...

    ReplyDelete
  6. di paling bawah sekali dekat komentar ada tulisan tertulis "SECARA ONLINE"bila mouse ditunjukan ada gambar university LIVERPOOL

    ReplyDelete
  7. cara memperlebar area untuk judul blog gimana gan? ane bingung..

    ReplyDelete

Terimakasih Atas Komentar Anda dan EFA akan segera menuju Blog anda...

NextPrev