How to Create Blogger Header with 2 Elements

Ini bukan sekedar membagi box header blogger menjadi 2 kolom, namun jauh lebih dari hal tersebut. Kita akan memecah elemen header menjadi 2 elemen di kanan dan kiri. Masing-masing akan berfungsi sebagaimana mestinya sebuah elemen dimana berbagai teks, kode html atau gadget (widget) bisa ditambahkan ke dalamnya.

Jika selama ini di bagian header elemen blogger hanya bisa digunakan untuk box bagi blog title dan blog description, maka dengan memecahnya menjadi 2 elemen maka siapapun dapat mengembangkan satu elemen yang baru tersebut untuk berbagai hal yang sebelumnya tak mungkin ditambahkan. pengguna hanya perlu memperhitungkan kira-kira berapa lebar elemen baru yang dibutuhkan. Pengaturan lebar header element yang lama (default) dan element yang baru dapat dengan mudah dilakukan. Pembagian kolom dilakukan dengan menggunakan nilai persen sehingga tinggal membagi nilai 100% menjadi 2 bagian. Klik ke dua screenshoot di atas agar ditampilkan dalam ukuran sesungguhnya!

D E M O

Klik link demo di bawah ini untuk melihat bentuk header blog setelah penambahan elemen baru:

Demo header blogger dengan 2 elemen

Cara membuat 2 Elemen di Header Blogger Template Designer

1. Login ke Blogger.
2. Setelah Halaman Dasbor (Dasboard) terbuka, klik Rancangan (Design).
3. Cari dan klik Edit HTML
4. Lakukan Backup Template untuk berjaga-jaga jika saat penambahan elemen baru terjadi kesalahan yang menyebabkan kerusakan template. Panduan dan tutorial Backup template dapat dibuka di sini !
5. Cari kode ]]></b:skin>, kemudian copy dan paste-kan kode CSS berikut tepat di atas kode ]]></b:skin>. Gunakan Ctrl + F untuk mempercepat pencarian kode.
   

   Kode CSS

   .GRnewHeader .widget h2.title, .GRnewHeader .widget h2{
          font-size:14px;
          text-transform:uppercase;
          font-weight:600;
          margin:10px;
   }
   .GRnewHeader .widget{
          padding:10px;
          font-size:12px;
          background:rgba(0,0,0,0.2);
          margin:5px;
   }

6. Cari kode:
   ]]>
   </b:template-skin>
7. Letakkan kode CSS di bawah ini tepat di atasnya
   

   Kode CSS

   #header {
          float:left;
          width:70%;
          margin:0;
          padding:0; 
   }
   #GR_headerRight {
          float: right;
          width: 30%; 
          padding:0;
          margin:0;
   }

8. Cari kode <div class='region-inner header-inner'>
   Di bawah kode di atas akan terlihat kode seperti yang terlihat di bawh ini:
   

   xHTML

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

9. Rubah kode di atas menjadi seperti di bawah ini:
   

   xHTML

   <div class='region-inner header-inner'>
         <b:section class='GRnewHeader' id='GR_headerRight' maxwidgets='1' showaddelement='yes'/>
         <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
   <b:widget id='Header1' locked='true' title='Your Blog Title (Header)' type='Header'/>
         </b:section>

10. Klik Save template (Simpan Template)
11. Klik Elemen Laman (Page Elemens).
12. Lihat di bagian Header sudah ada penambahan elemen baru di sebelah kanan hingga elemen header default berdampingan dengan elemen baru right header.
13. Coba gunakan untuk menambah gadget kemudian lihat hasilnya dengan membuka blog!
14. Selesai!

Catatan/Keterangan:

1. Anda bisa menambahkan bebrapa elemen CSS yang lain dalam kode CSS yang di atas kode ]]>/b:skin>
2. Background bisa disesuaikan dengan warna teks. Anda dapat menambahkan variable color atau mungkin saja menghapus/menghilangkan background.
3. Untuk merubah ukuran header kanan dan kiri gunakan perubahan nilai prosentase lebar di antara keduanya.
4. Jika tertarik untuk membuat header blogger dengan 3 elemen anda bisa membuka panduannya di link berikut:
   
   Cara membuat header blogger dengan 3 elemen

Background Image di Header Blog dg Kode CSS

Contoh Kode CSS untuk Background Header Blogger Template Designer

Anda bisa mencoba contoh ini menggunakan Dreamwaver, Adobe Dreamweaver CS5 dan CS5.5 atau memasang di blog. Apabila digunakan untuk blog, gunakan kode CSS yang telah diberi tanda. Anda dapat mengatur ukuran background image dengan merubah nilai pada properti CSS background-size:808px 160px;, dimana 808px adalah lebar background image sedang 160px merupakan tinggi background image.

DEMO Background Header dg Kode CSS

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Creating a Background Image in Blog Header with CSS Code</title>

<style type="text/css">
#header-inner{
       margin:50px auto;
       padding:4px;
       width:808px;
       height:160px;
       border:2px solid #000;
       background:#999;
}
/* Kode CSS yang diperlukan untuk membuat background header Blogger Template Designer - START */
#header-inner{
       position:relative;
       background:#666 url('http://gubhugreyot-image-post.googlecode.com/files/gubhugreyot_bridge-900-200.jpg') center no-repeat;
       background-size:808px 160px;
}
#header-inner:before{
       position:absolute;
       display:block;
       width:58px;
       height:50px;
       left:60px;  /* code by: http://gubhugreyot.blogspot.com */
       top:0px;
       content:url('https://lh5.googleusercontent.com/-WVnUd2BO_UQ/TzvcQeXo4XI/AAAAAAAAAL8/av3xRaGcXjw/h120/gubhugreyot-animasi-pesawat-terbang-02.gif');
}
#header-inner:after{
       position:absolute;
       display:block;
       font-size:27px;
       color:red; /* code by: http://gubhugreyot.blogdetik.com */
       text-shadow:1px 1px 1px #000;
       right:20px;
       bottom:10px;
       content:"http://gubhugreyot.blogspot.com";
}
/* Kode CSS yang diperlukan untuk membuat background header Blogger Template Designer - END */
</style>

</head>

<body>

   <div id="header-inner"></div>
 
</body>
</html>