Menambah 3 Kolom/Elemen Halaman Widget di Bawah Header

11/15/2010 Blogger Dsain Template dsign template Tips Trik Blog Tutorial Blogger
Lagi lagi sore ini kita akan membahas tentang Dsain Blog, tidak ada habis habisnya ya tutorial hehehe, karena demi teman yang baru gabung di dunia blogger alias yang masih awam seperti saya, makanya gak mao henti henti untuk memberikan tips dan trik kepada sobat semua. sama seperti saya kalau punya keinginan pingin cepat terkabulkan, disinilah saya akan mengabulkan keinginan-keinginan sobat, karena dulu perna salah satu sahabat saya minta di postingkan cara Nambah Elemen Halam,an Widget di bawah Header.

Sebelumnya saya pernah posting cara menambah Dua Kolom/Elemen Widget di Bawah Header, sekarang saya tambah lagi satu elemen. jadi judulnyapun menjadi Menambah 3 Kolom/Elemen Halaman Widget di Bawah Header.

Baik saya tidak akan panjang lebar lagi ngomongnya hehe, kita langsung aja ke TKP, di bawah ini gambar tampilan yang kita bahas sekarang ini :



Caranya sangat mudah dansimpel saya yakin bagi pemula juga pasti bisa OK. berikut langkah langkahnya :

1. Seperti biasa Login dulu ke blog sobat
2. Pada dasbor klik Tata Letak=> Edit HTML=> Cari kode berikut ]]></b:skin> jika sudah dapat, letakkan kode berikut diatasnya:

#box-main-container {
clear:both;
}
.box-column {
padding:0px 10px 10px 10px;
border:1px dotted $bordercolor;
}


Kalau sobat dah bisa ngedit CSS atau sedikit bisa membaca maksud perintahnya silahkan edit exp: padding, margin atau bordernya!

2. Kemudian cari kode <div id='main-wrapper'> setelah dapat letakkan kode beikut diatasnya

<div id='box-main-container'>
<div id='box1' style='width: 30%; 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: 40%; 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: 30%; 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>


3. Simpan template dan lihat hasilnya dibagian elemen halaman, jika berhasil sobat akan melihat seperti gambar diatas.

Gampang dan Simpel Khaaann??

Se;amat Mencoba semoga berhasil dan mudah mudahan tips ini bermanfaat di hati sobat Amiin..

KOMENTAR ANDA SANGAT BERMANFAAT BAGI PERKEMBANGAN BLOG INI

Artikel Terkait

Previous
Next Post »
Penulisan markup di komentar
  • Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline silahkan gunakan <u></u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
  • Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

17 comments

kalau di tempat seri jarang ada blog yang membuat tutorial atau SEO seperti bloger di Indonesia.

Balas

@Seri BahasaMasa sob!! gak suka kali hehe, makanya sering-sering maen ke sini aja.

Balas

bolrh sob silahkan aja di coba coba

Balas

wah ane coba ya bro pas banget lagi butuh...
thanks sharing nya...
kunjung balik akang di

http://32s-fereral.blogspot.com

sapa tau bisa saling tukar ilmu blogging...
permisi juga pasang banner akang di blog ane...

Balas

Mas Mmbuat Background ( style ) Garis pinggir postingan seperti mas apa kodenya mas

Balas

Mas...mau minta tolong cara buat plugin sosial facebook suka gimana...???seperti punya Mas sebelah kanan atas itu.

Balas

Keren gan tips dan trik nya.. dah ane coba berhasil.. thanks :D

Balas

keren mas tip and trik nya.

Makasih ea gan.
jangan lupa kunjungi blog aku ya mas

baru buat lagi, krna yg kemarin hilang di makan lupa pasword

http://fransyumory.blogspot.com

makasih ya :)

Balas

gak ketemu kode div id='main-wrapper'gimana ni kang??

Balas

Terima kasih banyak gan, salam kenal dari arrahman blog, artikel agan bagus dan sangat membantu pemula seperti saya ini. terima kasih banya,

Balas

terimakasih Sob telah berkunjung. Salam kenal Juga

Balas

Makasih gan informasinya, sangat membantu :)
Ijin share http://grosiracemaxstasik.com/obat-tradisional-alzheimer/

Balas

ini dia yang di cari-cari, terimakasih atas informasinya :)

Balas