Home G F T G+ M D
| Komputer | BlackBerry | Android | Motivasi | DP BBM | Movies | MP3 | CUG Tsel | WEB Design |

Membuat atau Membagi Elemen di Bawah Header


Membuat atau Membagi Elemen di Bawah Header - Pada postingan yang lalu saya telah membahas tentang cara membuat atau membagi footer di blog, dan kali ini akan saya bahas sedikit tutorial tentang cara membuat atau membagi elemen di bawah header. Tujuan utamnya adalah agar kita bisa menambahkan lebih banyak lagi gadget-gadget yang bermanfaat pada blog kita, karena dengan membuat atau membagi elemen di bawah header blog kita, maka akan tersedia tempat atau ruang yang cukup memenuhi.

Selain itu, kita juga bisa membuat atau membagi elemen di bawah header blog kita untuk menaruh hal-hal yang berbau advertisement (iklan). Sehingga akan memperbanyak space (ruang) untuk kita menaruh banner iklan tersebut. Dan berikut adalah langkah-langkah untuk membuat atau membagi elemen di bawah header blog menjadi 3 kolom :
1. Masuk ke blogger.com menggunakan akun anda.
2. Menuju ke halaman "Template".

3.  Kemudian pilih "Edit HTML", klik "Lanjutkan" dan jangan lupa centang "Expand Template Widget".
4. Lalu cari kode ]]></b:skin> (gunakan tombol ctrl+f untuk mempermudah mencarinya) dan letakkan script kode berikut ini tepat di atasnya :

#box-main-container {
clear:both;
}

.box-column {
padding:0px 10px 10px 10px;
border:1px dotted $bordercolor;
}

5. Selanjutnya cari kode <div id='main-wrapper'> atau kode <div id="main-outer">.
6. Setelah itu letakkan script kode berikut ini di atas kode <div id='main-wrapper'> atau kode <div id="main-outer"> tersebut.

<div id='box-main-container'>
<div id='box1' style='width: 33%; float: left; margin:0; text-align: left;'>
<b:section class='box-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='box2' style='width: 33%; float: left; margin:0; text-align: left;'>
<b:section class='box-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='box3' style='width: 33%; float: right; margin:0; text-align: left;'> <b:section class='box-column' id='col3' preferred='yes' style='float:right;'/> </div>
<div style='clear:both;'/>
</div>

7. Klik save/simpan template, dan selesai...

Cukup sekian dulu postingan pada kesempatan kali ini tentang cara membuat atau membagi elemen di bawah header blog. Semoga bermanfaat bagi anda.
 

Luangkan sejenak: Demikianlah artikel tentang Membuat atau Membagi Elemen di Bawah Header diatas, semoga bermanfaat untuk sobat dimanapun berada.

Artikel Terpopuler :

  1. CUG 10k Gratis Nlp & SMS
  2. CUG 20k Gratis Nlp & SMS (Corpo)
  3. CUG 20k Gratis Nlp & SMS + 512MB
  4. CUG 20k Data
  5. CUG 35k Data
  6. CUG 40k Nlp + Data

133 Komentar Tersembunyi "Membuat atau Membagi Elemen di Bawah Header"

Posting Komentar

[ ↑ ] Ke Atas [ ↑ ]