Jumat, 15 Juni 2012

Membuat Widget 3 Kolom Dibawah Header

miscah


HOWABOUTNEWS.BLOGSPOT.COM-Widget 3 kolom dibawah header ini sebenarnya bisa sobat tambahkan jika pada bagian sidebar template sudah penuh dan terlalu panjang. Sebagai alternatif untuk meletakkan kode html ataupun javascript yang mungkin sobat perlukan. Kurang lebih sama dengan postingan saya yang dulu tentang membuat multi kolom yang diletakkan di bagian bawah blog, namun kali ini saya meletakkannya bagian atas atau tepatnya dibawah header. Widget 3 kolom ini bisa sobat lihat demonya disini.

Baiklah langsung menuju lokasi pengeditan template-nya.
1.Silahkan login ke blogger.
2.Tuju Tata Letak.jangan lupa membackup template dulu.
3.Pilih tab Edit HML.
4. klik Expand Template Widget. cari kode
untuk mempermudah pencarian klik ctrl +f ...letakkan kode berikut diatas kode

/* –- Top --*/
#top {
background:#fff;
margin-top:10px auto;
width:960px;
overflow:hidden;
font-size:12px;
padding:10px;
}

#top h2 {
background:#000 url(http://lh5.ggpht.com/_7Y9pl24WpQY/Ss37F0ZA9kI/AAAAAAAAB2k/c_ySi8QZg20/header_thumb%5B2%5D.jpg) repeat-x;
font-size:14pt;
font-weight:400;
text-align:center;
font-style:normal;
line-height:1.3em;
color:#fff;
padding:5px;
margin-top:-10px;
margin-left:-10px;
margin-right:-10px;
}

#top ul {
color:#333;
margin:0;
padding:0;
}

#top ul li {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvieJY39Sxt-65LHZvmJvR6WMG9E-sI8LM8mhZpe1caK1OjVztd5lCQLJ3IqAeyvBciCfC2VftAAO61tJi0SQ873vFMsMmWWG-MhQpMWEnxN1d7vMPSUGVVPW9LnO-85SzRmfeEX4GF8Z6/s320/b3.gif) no-repeat;
list-style-type:none;
border-bottom:1px dashed #CCC;
margin:0 0 10px;
padding:0 0 5px 20px;
}

#top ul li a:hover {
margin:0px 0px 5px;
padding:0px;
}

#topcenter {
width:300px;
float:left;
margin-left:10px;
background:#fff;
padding:10px
}

#topleft {
width:280px;
float:left;
margin-left:10px;
background:#fff;
padding:10px;
}

#topright {
width:280px;
float:right;
margin-left:10px;
background:#fff;
padding:10px;
}

5.Cari kode yang mirip seperti ini, biasanya letaknya dibawah

6.Kemudian letakkan kode berikut ini tepat setelah kode diatas :

Simpan Template.

Tidak ada komentar:

Posting Komentar