Minal 'Aidin wal Faizin
Mampukah setiap tahun bertambah baik?
Sebuah tantangan bagi siapapun. Jadikan Idul fitri sebagai mement yang indah dan tepat untuk setiap kali merubah diri menjadi pribadi yang jauh lebih baik, lebih peduli, jauh dari korupsi, jauh dari iri hati dan dengki... dan tentu saja ... jauh lebih lebih berharga dimata Allah dan dan sesama.

Cara Membuat 3 Kolom di Bawah Header di blogspot

Pada saat pertama kali kita membuat blog kita tidak menyadari untuk memilih jenis template apakah yang template yang menggunakan satu sidebar atau dua sidebar. semakin lama kita menyadari betapa pentingnya suatu kolom itu untuk mengisi iklan misalnya. untuk itu EFA akan mencoba membahas tentang bagaimana cara  membuat tiga kolom dibawah header. ikuti langkah langkahnya step by step:
1.  login dulu Blogger, pilih Rancangan/Layout => Edit HTML, kasih tanda centang pada  
    Expand Template   Widget;
2. Cari kode ]]></b:skin>
3. Sebelum atau di atas kode]]></b:skin> , letakkan kode di bawah ini:

/* Top Header
---------------------------- */
#topheader {
width:930px;
clear:both;
float:left;
color:#333;
background:#fff;
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:fff;
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;
}
Keterangan:
#topheader adalah kode untuk kolom secara keseluruhan;
#left-topheader adalah kode untuk kolom sebelah kanan;
#center-topheader adalah kode untuk kolom pada posisi tengah;
#right-topheader adalah kode untuk kolom sebelah kiri;
Width: px adalah kode untuk ukuran lebar kolom;
Padding adalah jarak sela antara kolom satu dengan lainnya;

Silahkan dimodifikasi, dengan catatan harus sama dengan jumlah lebar pada template Anda dan untuk mengetahui ukuran lebar template, cari kode: #outer-wrapper dan lihat nilai width-nya;

4. Selanjunya cari kode seperti dibawah 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> 

5. Tepat di bawah kode di atas, tambahkan kode di bawah ini: 

<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> 

6. Yang terakhir dan paling utama simpan. End

Semoga bermanfaat....

Mohon tinggalkan pesan...Oce..

The Owner of Education For All Blog hanyalah seorang Blogger pemula namun bila sobat blogger mania berminat untuk melihat tutorial lainya bergaya magazine blog silahkan. Akses melalui link di bawah ini :





» Selamat Berkreasi - E F A «


6comments:

  1. Dari langkah ke 5 nggak ada scriptnya di Html q gmana donk ???balas ke www.viesinaga.blogspot.com

    thanx

    ReplyDelete
  2. terimakasih gan,,oh iya gan ini alamat blogku http://ujangsyahid.blogspot.com,,nah aku mau buat widget baru dibawah recent comment,,kl agan berkenan membantu,,tolong ya,.tks

    ReplyDelete
  3. Boleh juga infonya gan. cuma ketika di praktekkan kolomnya jadi panjang n jelek kalo di lihat dari dashboard

    ReplyDelete
  4. Boleh juga infonya gan. cuma ketika di praktekkan kolomnya jadi panjang n jelek kalo di lihat dari dashboard

    ReplyDelete
  5. artikel menarik mas, dan juga sangat menarik ulasannya dan saya suka, dan salam kenal dari mico dan juga bagi teman2 yg suka dengan download film box office terbaru silakan kunjungi situsnya loe, makasi untuk admin juga. thanks

    ReplyDelete

Terimakasih Atas Komentar Anda dan EFA akan segera menuju Blog anda...

NextPrev