Cara membagi header menjadi 2 kolom

Unknown | Minggu, Mei 27, 2012 | Blogger Tutorials

Posting tutorial blog kali ini tentang Cara membagi header menjadi 2 kolom. Nah, sobat pasti bertanya, untuk apakah kolom header dibagi menjadi 2 kolom? jawabannya, kalau header blog, pada umumnya kolom pertama yaitu kolom judul blog sobat dan kolom kedua bisa sobat pakai seperti untuk adsense, pemasangan iklan, search engine dll. Membagi / membelah header menjadi 2 kolom, perlu diketahui desain template itu sangatlah komplek dan menggunakan banyak sekali teknik.

Tetapi jika sobat merasa sudah ahli dalam pengeditan template tidak masalah lah jika menggunakan template sobat sendiri ;). Jika sobat sudah mendownload dan mengupload templatenya ke blog sobat, tampilan header sebelum di edit gambarnya seperti di bawah ini

Oh iya, sebelum kita ke tkp, agar tidak terjadi hal yang tidak diinginkan seperti blog kesayangan sobat menjadi acak - acakan hanya karena hal percobaan, kang reggy sarankan jangan dulu mencoba tutorial ini pada blog kesayangan sobat. Buatlah blog untuk percobaan kemudian upload template thesisnya.  Are you ready guys? ok 1...2...3 lets go, eiitts, kayak mau perlombaan lari aja, hehehe :p. Okedeh sobat, kita langsung ke cara membagi header menjadi 2 kolom

1. Login pada pada Blogger menggunakan id blog sobat
2. Template
3. Edit HTML lalu Lanjutkan
4. pertama - tama cari kode #header-wrapper { atau lebih lengkapnya mirip seperti di bawah ini
   

   #header-wrapper {
   -moz-background-clip:border;
   -moz-background-inline-policy:continuous;
   -moz-background-origin:padding;
   background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZPKaJCculXZ6Hno1Lj7SOO4FULXaBsDpkZn2Y8SyLLp6asVU7U7om4Sx-FIU-bS_dEeR4I15I0OTtS1SHwqBUc8Q77C4gmAKDSXkY_3z6611Mi4go7iFTDO3rFCotq6MOr1JIvA_xuX00/s1600/line.gif) repeat-x scroll left bottom;
   height:119px;
   width:900px;
   }
   #header-inner {
   background-position:center center;
   margin-left:auto;
   margin-right:auto;
   }
   #header {
   color:#000000;
   text-align:left;
   }

5. hapus dan ganti kode tersebut dengan kode dibawah ini:
   

   #header-wrapper {
   -moz-background-clip:border;
   -moz-background-inline-policy:continuous;
   -moz-background-origin:padding;
   background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZPKaJCculXZ6Hno1Lj7SOO4FULXaBsDpkZn2Y8SyLLp6asVU7U7om4Sx-FIU-bS_dEeR4I15I0OTtS1SHwqBUc8Q77C4gmAKDSXkY_3z6611Mi4go7iFTDO3rFCotq6MOr1JIvA_xuX00/s1600/line.gif) repeat-x scroll left bottom;
   height:100px;
   width:900px;
   }
   #header-inner {
   width:428px;
   margin:0 auto;
   padding-top:6px;float:left;
   }
   #header {
   color:#000000;
   text-align:left;
   }
   #r_head{
   width:468px;
   float:right;
   padding-top:6px;
   }

6. selanjutnya geser scroll ke bawah dan cari kode <div id='header-wrapper'> atau lebih lengkapnya mirip seperti di bawah ini
   

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

7. hapus kode di atas dan ganti dengan kode di bawah ini
   

   <div id='header-wrapper'>
   <div id='header-inner'>
   <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
   <b:widget id='Header1' locked='true' title='Blognya Reggy Demo (Header)' type='Header'/>
   </b:section>
   </div>
   <div id='header-kanan'>
   <b:section class='header2' id='header2'/>
   </b:section>
   </div>
   </div>

8. Simpan Template

Selesai deh, jika semua langkah sudah sobat lakukan seperti di atas, tampilan kolom sesudah diedit akan menjadi seperti pada gambar di bawah ini

 

 Sumber : http://blognya-reggy.blogspot.com/

Description: Cara membagi header menjadi 2 kolom, Rating: 4.5, Reviewer: Unknown, ItemReviewed: Cara membagi header menjadi 2 kolom

Anda sedang membaca artikel tentang Cara membagi header menjadi 2 kolom dengan url http://blog-rizkyramadhani.blogspot.com/2012/05/cara-membagi-header-menjadi-2-kolom.html,Anda boleh copy paste tapi sertakan Cara membagi header menjadi 2 kolom sebagai sumbernya.