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.
- Silahkan login ke blogger.
- Tuju Tata Letak.
- Pilih tab Edit HML.
- Jangan di klik Expand Template Widget, karena akan memusingkan sobat.
- Letakkan kode css berikut ini diatas kode ]]></b:skin>
/* –- 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/AVvXsEgd4fmhorg2SL61nJU3YDvBvw-Kv1E8Vml5PXN3ub0VPofqWJguDBolc_71F7cF_bxD-M1_e7Cnzpz17A1rTgVQOVV17pmU5C0ZKs5QLfswOMwyCpvXHTtWnDsGeiBg1bv30oV92WUgk-mQ/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;
}
- Cari kode yang mirip seperti ini, biasanya letaknya dibawah </head>
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='JUDUL BLOG SOBAT (Header)' type='Header'/>
</b:section></div>
- Kemudian letakkan kode berikut ini tepat setelah kode diatas :
<div id='top'>
<b:section class='top' id='topleft' preferred='yes' showaddelement='yes'>
</b:section><b:section class='topcenter' id='topcenter' preferred='yes' showaddelement='yes'>
</b:section><b:section class='topright' id='topright' preferred='yes' showaddelement='yes'>
</b:section>
</div> - Simpan Template.
Semoga bermanfaat dan bisa membuat blog sobat jadi ramai. 
|
Tweet
|
Berlangganan artikel terbaru via Email
|
){kind=link}
28 comments
thank you.... saya pakai template yg sudah jadi saja 3 coloum footer - biar ga repot lagi :)
ok deh sob, blog q juga dah bawaan
maaf sob, template yang aq pakai sekarang a/ pemberian dari temen, yg di kirimkan via email, mang aq sempet bilang ama temen q pengen ganti template, terus aq ditawarin template yg aq pakai sekarang setelah tak test. aq suka y udah aku pakai, jd maaf sebelumnya jikalau ini template buatan kamu karena aq pikir temen q yang bikinkan, aq jadi g enak nih ama kamu, ok deh akan aq pasang link creditnya. sekali lagi aq minta maaf sob atas ketidak tahuan q. kalau template yang aq pakai sekarang a/ ternyata bikinan kamu, bukan bikinan temen q, jika tidak berkenan, aq bisa ganti kok templatenya. terima kasih sebelumnya sudah mengingatkan. ttd Rizky2009
template by'nya dah aq cantumkan, jika ada yang masih kurang tlong beri tahu saya, dan jika tidak berkenan template kamu aq pakai akan langsung aq ganti. terima kasih
@ Rizky2009 : oke thanks ya rizky sdh mengerti, tp linknya salah tuh mas rizky
mantap!!!
ok sob linkny dah aq perbaiki silakan cek yah, makasih sebelumnya
makasi atas artikelnya...
aku kok gak bisa ya make ini ada tulisannya gini
"Lebih dari satu widget ditemukan dengan id: Header1. ID Widget seharusnya unik."
ituh gimana yaa?
saya pengin baget menambahkan 3 kolom di bawah header tapi saya tak bisa menemukan code <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>
</div> apa ada yang harus di ganti ? tolong banget ya..... www.marfinsyah.co.cc
mantab
http://www.gi-zue.co.cc
@suramadu Sob mau berbagi nih... Expand Widget Templates nya udah di centang ga..? coba lagi deh
maaf lancang yah buat yang punya blog ^_^
@Djaka Tulalit : ga perlu expand template widget sdh ada kok kode tst, mungkin sobat suramadu pke template baru blogger jd tdk ada bagian tsb
terima kasih postinganya sangat membantu,untk saya yg masih pemula...la...la..la...hehehe
thanks atas infonya bos...
main2 ke blog aku yah??
makasih bang saya sudah bisa pasangnya...hehehee...bang kalau mau di pindah di bawah gmana caranya...terus bisa gak ya tampilannya lebih dari tiga postingan atau tampilannya seperti random post otomatis yang bisa mengindex seluh kategori berdasarkan labels...makasih ya bang sekali lagi...semoga bermanfaat juga buat yang lainnya dan mahesa (makin hebat saja). oh ya bang sekali-sekali berkunjung ke blog saya dan tolong tinggalkan masukan untuk kemajuan kedepannya...keep spirits and do the best
posting hebat bos walaupun dengan meraba-raba karena ga ada kode "header weapper" akhir ketemu juga n tengkyu........
makasih yaa articlenya sob!
thanks atas ertikel nya
sgt bermanfaat
bagus banged neh artikel,, ku coba yeah, mdh2an berhasil,, hehehe,, thx bro,,,
thanks atas infonya. langsung saya praktekkan
mkasih gan infonya ,
gaspol gan :)
Terima kasih mas doddy atas share cssnya, templte designmu si VUDION aku suka sekali memakainya aku beri link tuh my bloggerthemes. thanks ya sekali lagi oom doddy.hei...ganteng juga kamu..
Sudah Saya Buat, tetapi timbul 1 masalah : header saya berantakan nih. lihat di http://walfchild.blogspot.com
kOK BERANTAKAN HASILNYA BOS, NGK SEJAJAR GITU,SAYA SALAH DIMANA YA?
thanks tutornya om. berkunjung nih.
thanks gan infonya, dapatkan info menarik http://www.kipasbis.com/
Thanks :)
Posting Komentar