Membuat Widget 3 Kolom Dibawah Header

image 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(http://2.bp.blogspot.com/_7Y9pl24WpQY/SqkUYNZmPxI/AAAAAAAAA4U/se2boblD4-M/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.

Berlangganan artikel terbaru via Email
Artikel Lainnya :

28 comments

21 April 2010 08.43

thank you.... saya pakai template yg sudah jadi saja 3 coloum footer - biar ga repot lagi :)

22 April 2010 15.06

ok deh sob, blog q juga dah bawaan

22 April 2010 18.28

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

22 April 2010 18.40

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

22 April 2010 22.51

@ Rizky2009 : oke thanks ya rizky sdh mengerti, tp linknya salah tuh mas rizky

25 April 2010 01.51

mantap!!!

4 Mei 2010 10.59

ok sob linkny dah aq perbaiki silakan cek yah, makasih sebelumnya

22 Juni 2010 19.23

makasi atas artikelnya...

Anonim
7 Juli 2010 06.24

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?

3 Oktober 2010 02.23

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

10 Oktober 2010 11.57

mantab
http://www.gi-zue.co.cc

10 Oktober 2010 14.21

@suramadu Sob mau berbagi nih... Expand Widget Templates nya udah di centang ga..? coba lagi deh
maaf lancang yah buat yang punya blog ^_^

10 Oktober 2010 20.39

@Djaka Tulalit : ga perlu expand template widget sdh ada kok kode tst, mungkin sobat suramadu pke template baru blogger jd tdk ada bagian tsb

18 November 2010 01.41

terima kasih postinganya sangat membantu,untk saya yg masih pemula...la...la..la...hehehe

20 Desember 2010 11.32

thanks atas infonya bos...
main2 ke blog aku yah??

24 Desember 2010 13.04

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

25 Februari 2011 23.30

posting hebat bos walaupun dengan meraba-raba karena ga ada kode "header weapper" akhir ketemu juga n tengkyu........

21 Maret 2011 13.16

makasih yaa articlenya sob!

1 Juli 2011 15.35

thanks atas ertikel nya
sgt bermanfaat

Anonim
8 Juli 2011 12.55

bagus banged neh artikel,, ku coba yeah, mdh2an berhasil,, hehehe,, thx bro,,,

10 Juli 2011 00.02

thanks atas infonya. langsung saya praktekkan

24 Agustus 2011 14.23

mkasih gan infonya ,
gaspol gan :)

11 November 2011 15.21

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

10 Desember 2011 11.33

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?

15 Juni 2012 02.57

thanks tutornya om. berkunjung nih.

26 Juni 2012 00.32

thanks gan infonya, dapatkan info menarik http://www.kipasbis.com/

Thanks :)

Poskan Komentar

Reader Community

Recent Comments