Cara Membuat 3 Kolom Widget di Bawah Header Blog

Baca Juga

Berikut ini Cara Membuat 3 Kolom Widget di Bawah Header Blog di template bawaan Blogger, khususnya tema Sederhana (Simple).

Cara Membuat 3 Kolom Widget di Bawah Header Blog

Berikut ini Cara Membuat 3 Kolom Widget di Bawah Header Blog. Login ke Blogger dan pilih blog yang akan diedit.

1. Klik Tema > Edit HTM
2. Copas kode berikut ini i atas kode  ]]></b:skin>

#topheader {width:100%;max-width:970px;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:30%;float:left;padding-left:15px;}
#center-topheader {width:30%;float:left;padding:0 20px;}
#right-topheader {width:30%;float:right;padding-right:15px;}

3. Cari kode seperti di bawah ini:

<b:section class='blogname' id='top' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='(Header)' type='Header'/>
</b:section>

4. Tambahkan kode berikut di bawah kode tersebut:

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

Jika akan menempatkan tiga kolom widget di bawah Navigasi Menu, maka simpan kode nomor 4 tersebut di bawah kode menu blog Anda.*