Cara Membagi Kolom Header Blog di BloGGeR Baru

Panduan dan Tutorial BloGGeR ini merupakan sebuah panduan untuk membagi header blog menjadi 3 kolom di bagian kiri, tengah dan kanan. Meskipun demikian bila sampeyan menginginkan, sampeyan dapat membaginya sesuai jumlah kolom yang diinginkan. Membagi header blog menjadi 3 kolom dalam tutorial ini akan menempatkan blog title di bagian tengah dan 2 elemen (kolom) baru di sebelah kanan & kiri.

Membagi kolom header menjadi beberapa bagian memungkinkan kita menempatkan berbagai widget baru dalam berbagai bentuk dalam header yang menyatu dengan bagian blog title dan deskripsi blog. Mungkin saja sampeyan akan memansang adsense (iklan), slide show, video, image atau bisa saja beberapa teks. Jika penambahan elemen baru ini selesai, semua fungsi penambahan widget dapat dilakukan melalui "Dasboard - Page Elements - Add Gadget".

Beberapa penyesuaian dan penambahan kode kita perlukan, dalam bentuk kode css & xHTML. Kode css berfungsi mengatur posisi & bentuk (tinggi, lebar, background dsb) serta beberapa variable lain seperti padding & margin. Penyesuaian yang cukup penting dilakukan adalah merubah ukuran font blog title agar dapat ditampilkan dalam kolom yang lebarnya relatif jauh lebih sempit dari ukuran sebelumnya. pengaturan sekaligus kita sertakan melalui penambahan kode css, meskipun sebenarnya dapat diatur juga melalui "Perancang Template Blogger".

Semua percobaan yang aku lakukan untuk memodifikasi header blog ini dilakukan pada template "Awesome Ink" by Tina Chen. Sekalipun demikian dari kode html yang digunakan di ketiga template blogger baru (New BloGGer Template) yang lain tampaknya tidak ada perbedaan-perbedaan yang menghalangi modifikasi di ke-4 template yang tersedia. Silahkan ikuti dengan seksama supaya modifikasi dapat dilakukan dengan cepat dan lancar tanpa perlu banyak melakukan pengulangan. O ya ... Untuk lebih memudahkan dan supaya semua modifikasi yang dilakukan tidak mengganggu aktifitas yang dilakukan di blog yang telah dipergunakan sebagai tempat posting, sebaiknya sampeyan membuat sebuah blog baru yang khusus dipergunakan sebagai tempat melakukan segala bentuk modifikasi atau penambahan widget. Setelah semua selesai dengan sukses dilakukan di blog percobaan, silahkan lakukan modifikasi sesungguhnya di blog utama.

Langkah-langkah yang harus dilakukan untuk melakukan pembagian header blog dalam bentuk kolom terpisah

1. Login to BloGGeR (Login ke BloGGeR) : Lakukan dengan menuliskan User Name/Nama Pengguna atau Email Address. Lanjutkan dengan menuliskan Password/Sandi.
2. Dasboard (Dasbor) : KLIK link Design/Rancangan.
3. Design (Rancangan) : KLIK link Edit HTML.
4. Back-Up (Amankan Template) : Lakukan back-up terlebih dahulu terhadap template dengan caraKLIK link Download Full Template (Download Template Lengkap, kemudian simpan file Template di folder PC. Apabila sampeyan ingin mengetahui lebih dalam cara dan kegunaan "back-up template", silahkan KLIK link di bawah ini :
   Cara Bac-up Template
   
5. Find CSS Code/Cari Kode CSS : Cari kode CSS berikut. Gunakan Ctrl+F supaya lebih mudah dan lebih cepat. Bagi yang belum tahu cara cepat mencari kode html, silahkan juga KLIK link di bawah ini :
   Cara Cepat Cari Kode HTML di Template.

]]></b:skin>

6. New CSS Code (Kode CSS Baru) : Letakkan kode CSS yang baru di bawah ini tepat di atasnya.

#header{ 
      margin:0; 
      padding:0;
}
#header .widget{
      padding:10px;
}        
#headerR,#headerL{
      margin:0;
      padding:0;
}
h1.title,#headerR .widget h2.title, #headerL .widget h2{
      text-align:center;
}
#headerR .widget h2.title, #headerL .widget h2{
      font-size:12px;
      font-family:Verdana;
      line-height:16px;
      margin:0;
      padding:0;
      font-weight:600;
      text-transform:uppercase;
      margin:6px 0;
}
#headerR .widget,#headerL .widget{
      margin:3px;
      padding:6px 6px 10px;
      background:rgba(0,0,0,0.1);
}
.GRheaderR,.GRheaderL{
      float:right;
      width:25%;
      min-height:60px;
      margin:22px 10px 10px 0;
      border:1px solid #eee;
      background:transparent;
      border-radius:8px;
      box-shadow:-3px -3px 6px #555;
}
.GRheaderL{
      float:left;
      margin:22px 0 10px 10px;
}
h1.title{ /*  blog title - nama blog */
      font-size:32px; /* ukuran blog title  - silahkan perbesar atau perkecil */
      line-height:40px;
}

7. Find HTML Code (Cari kode HTML) : Cari kode HTML berikut ini :

<div class='region-inner header-inner'>

Kode ini terletak di bagian body di antara tag <body> dan tag </body>
8. Di bawah kode tersebut akan anda jumpai kode seperti berikut :
   

   <div class='region-inner header-inner'>
         <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
   <b:widget id='Header1' locked='true' title='BLOG TITLE (Header)' type='Header'/>
   </b:section>

9. Ganti kode dengan kode berikut :
   

   <div class='region-inner header-inner'>
   <div class='GRheaderL'>
   <b:section class='headerL' id='headerL' maxwidgets='1' showaddelement='yes'/>
   </div>
   <div style='float:left;width:40%;'>
         <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
   <b:widget id='Header1' locked='true' title='BLOG TITLE (Header)' type='Header'/>
   </b:section>
   </div>
   <div class='GRheaderR'>
   <b:section class='headerR' id='headerR' maxwidgets='1' showaddelement='yes'/>
   </div>
   <div style='clear:both;'/>

10. Jangan lupa kode berwarna merah BLOG TITLE ditulis sesuai nama blog anda seperti yang bisa dilihat pada bagian tersebut sebelum di rubah.
11. Klik Simpan Template/Save Template.

Catatan :

• Merubah ukuran width widget baru dilakukan dengan merubah persentase lebar (width) yang bernilai 40% dan 25%.
• Properti CSS baru bisa ditambahkan untuk mendapatkan tampilan widget terbaik.
• Baca juga tutorial yang ini untuk membagi header menjadi 2 kolom (membagi 2 elemen header)
  Cara buat Elemen Baru di Header Blog
• Jika anda sudah menggunakan new blogger interface (antar muka blogger baru), silahkan buka link berikut untuk melakukan editing:
  Panduan Edit Kode HTML di New Blogger Interface

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

Update » Ngahad Legi, Juli, 01, 2012

» Happy Blogging - gubhugreyot «