Menambah Tiga Kolom Elemen Di Bawah Header

Mungkin sebaiknya anda membaca dulu tentang cara menambah tiga kolom elemen di atas footer. Bukannya apa-apa, tutorial cara menambah tiga kolom elemen di bawah header ini sangat mirip pengerjaannya dengan cara itu.


Mengapa saya buat posting ini? Biar enggak lupa aja, karena saya sudah membuat blog dengan desain template full element. Namun hingga posting ini dipublish, saya belum memakai template full element yang sudah saya rancang karena saya merasa blog ini masih belum perlu untuk mengunakan banyak kolom, sidebar dan elemen hingga posting ini di publish.

Oke langsung saja ke bagian yang lumayan rumit tapi mengasikkan . By the way, gambar di atas sudah dilihat kan? Kalau sudah, berarti anda sudah bisa membayangkan jadinya akan seperti apa.

Cara menambah tiga kolom elemen di bawah header
Pastinya kita akan membuat properti baru untuk elemen tersebut. Setelah properti nya jadi, kemudian dilanjutkan dengan membuat id untuk membaca properti elemen yang baru ditambahkan. Nah, untuk id harus ditempatkan di bawah id header. Biar gak bingung, langsung saja anda coba cara ini. Untuk ukuran lebar, warna dan perintah lainnya sebaiknya anda sesuaikan dengan selera saja. Namun secara garis besar, langkah pengerjaannya seperti ini.

1. Login ke blogger dengan id anda
2. Tuju menu Tata Letak
3. Pada tab menu, klik Edit HTML
4. Backup template anda, klik Download Template Lengkap
5. Copy kode berikut dan paste di atas kode ]]></b:skin>
   

   /* Top Header
   ---------------------------- */
   #topheader {
   width:930px;
   clear:both;
   float:left;
   color:#333;
   background:#fff url(http://i38.tinypic.com/2lt5wsl.jpg) repeat-x top;
   margin:0 auto;
   padding:0 0 10px;
   }
   
   #topheader a:visited {
   color:gray;
   text-decoration:none;
   }
   
   #topheader h2 {
   font-size:11px;
   font-weight:700;
   line-height:1.4em;
   text-transform:uppercase;
   border-bottom:1px dotted silver;
   margin:0 0 10px;
   padding:20px 0 2px;
   }
   
   #topheader ul {
   color:#333;
   margin:0;
   padding:0;
   }
   
   #topheader ul li {
   list-style-type:none;
   background:url(http://i35.tinypic.com/2n03mgz.jpg) no-repeat 0 .17em;
   border-bottom:1px dotted #ccc;
   padding-left:17px;
   margin-top:2px;
   }
   
   #left-topheader {
   width:360px;
   float:left;
   padding-left:15px;
   }
   
   #center-topheader {
   width:230px;
   float:left;
   padding:0 20px;
   }
   
   #right-topheader {
   width:260px;
   float:right;
   padding-right:15px;
   }

   Yang paling utama di sini adalah, properti yang berwarna hijau. Sedangkan properti yang lainnya adalah sebagai tambahan saja. Anda pun bisa mengubah semua properti tersebut dengan nilai CSS yang tepat.


6. Oke, sekarang kita akan membuat id untuk properti elemen yang baru saja ditambahkan. Penamaan untuk "topheader", "left-topheader", "center-topheader" dan "right-topheader" bisa saja anda ganti asal id nya juga disamakan dengan nama yang anda beri. Nah, sekarang kita beri id-nya. Silahkan cari kode 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>
   </

   
   Copy dan paste kode ini di bawah kode tadi

   <div id='topheader'>
   <b:section class='topheader' id='left-topheader' preferred='yes'/>
   <b:section class='topheader' id='center-topheader' preferred='yes'/>
   <b:section class='topheader' id='right-topheader' preferred='yes'/>
   </div>

   
   Sehingga hasilnya menjadi 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 id='topheader'>
   <b:section class='topheader' id='left-topheader' preferred='yes'/>
   <b:section class='topheader' id='center-topheader' preferred='yes'/>
   <b:section class='topheader' id='right-topheader' preferred='yes'/>
   </div>

7. Klik tombol SIMPAN TEMPLATE
8. Selesai

Bagi beberapa blogger termasuk saya tentunya, tiga kolom di bawah header ini sangat berguna. Biasanya diisi dengan beberapa banner ads atau teks ads. Artinya, kemungkinan besar penghasilan dari blog juga semakin baik. Halah.. gaya bangat. Terserah mau diisi dengan apa, yang pasti tiga elemen di bawah header sudah tersedia di blog anda. Oke, selamat mencoba dan semoga berhasil.

Related Post:

Template Design

• Membagi Header Menjadi Dua Kolom
• Menambah Elemen Di Bawah Dua Sidebar
• Menambah Elemen Di Atas Footer
• Menambah Elemen Di Bawah Sidebar
• Menambah Elemen Di Bawah Posting Update
• Menambah Elemen di Atas Bawah Posting Blog
• Menambah Elemen Sidebar Blogspot

or or