Membuat Desain Blog Tiga Kolom di Blogger

Satu hal yang membuat banyak pengguna WordPress (termasuk saya) merasa ‘gemas’ adalah tidak diijinkannya pengguna memodifikasi template dengan men-tweak script-nya, kecuali kita membayar biaya langganan bulanan. Jika kasta anda cuma pengguna gratisan, anda hanya dapat melakukan sedikit modifikasi pada WordPress, misalnya sekadar bongkar-pasang widget atau mengganti image header. Itu saja.

Sebaliknya dengan layanan Blogger. Walau desain templat blog yang disediakan amat bersahaja, namun pengguna diberi keleluasaan penuh untuk men-tweak-nya sesuai selera. Sebuah blog di Blogger bahkan dapat dibikin jauh lebih bagus dan variatif dari WordPress. Tinggal kreativitas penggunanya saja yang menentukan. Anda bahkan dapat mengkomersialkan blog anda di Blogger dengan menempatkan script iklan AdSense (setelah mendaftar terlebih dahulu ke layanan Google AdSense).

Secara default semua template yang disediakan Blogger hanya memiliki dua kolom: satu kolom utama dan satu sidebar (kolom samping). Pada tulisan ini saya akan memberikan tips memodifikasi template tersebut menjadi tiga kolom: satu kolom utama dan dua sidebar. Dengan tiga kolom anda lebih leluasa untuk menempatkan berbagai fungsi tambahan, widget, hingga kode html/javascript untuk menambah fungsionalitas blog anda.

Templat Blogger yang saya gunakan adalah Minima.

Langkah-langkah:

Sebelum mengubah apapun, pastikan untuk membuat backup templat asli. Setelah login, pada Dashboard Blogger klik Layout > Template > Edit HTML. Klik pada tulisan “Download Full Template” untuk menyimpan backup templat dalam file .xml di komputer anda.

Kini arahkan perhatian ke script CSS yang terdapat pada kotak. Scroll ke bawah tampilan script hingga anda menemukan baris berikut:

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

#main-wrapper {
width: 410px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
width: 220px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Kopi blok script Sidebar-Wrapper, lalu paste di bagian bawahnya. Jangan lupa ganti namanya dengan nama lain, misalnya Newsidebar-wrapper, sehingga keseluruhan baris di atas menjadi seperti ini (script tambahan saya beri warna merah):

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

#main-wrapper {
width: 410px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
width: 220px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#newsidebar-wrapper {
width: 150px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Pada properti float, anda dapat mengubah nilainya menjadi left atau right. Jika anda ingin tampilan sidebar mengapit bagian utama (main-wrapper), beri newsidebar nilai float: left. Artinya dia akan ditempatkan di sisi kiri halaman. Dan sebaliknya.

Anda dapat pula mengutak-atik lebar masing-masing komponen dengan mengubah nilai width. Misal, anda ingin melebarkan tampilan main-wrapper, pada blok main-wrapper ubah nilai default width: 410px menjadi, misalnya, 500px.

Setelah mengubah script tampilan blog, anda juga perlu mengubah tampilan Layout Editor untuk menyesuaikannya. Cari baris kode berikut:

/** Page structure tweaks for layout editor wireframe */
body#layout #header {
margin-left: 0px;
margin-right: 0px;
}

Tambahkan baris kode berikut tepat di bawahnya:

body#layout #outer-wrapper,
body#layout #header-wrapper,
body#layout #footer {
width: 750px;
padding: 0px;
}

body#layout #main-wrapper {
width: 400px;
margin-left: 20px;
}

body#layout #sidebar-wrapper,
body#layout #newsidebar-wrapper {
width: 150px;
}

Sehingga menjadi seperti ini:

/** Page structure tweaks for layout editor wireframe */
body#layout #header {
margin-left: 0px;
margin-right: 0px;
}

body#layout #outer-wrapper,
body#layout #header-wrapper,
body#layout #footer {
width: 750px;
padding: 0px;
}

body#layout #main-wrapper {
width: 400px;
margin-left: 20px;
}

body#layout #sidebar-wrapper,
body#layout #newsidebar-wrapper {
width: 150px;
}

Script di atas berfungsi untuk mengubah Layout Editor sehingga untuk selanjutnya anda lebih mudah menambahkan widget dsb, tidak harus repot kembali berurusan dengan kode-kode CSS. Layout editor akan berubah menjadi tiga kolom pula seperti ini:

layout editor

Setelah itu cari baris kode berikut (berada hampir di bagian paling bawah script):

<div id=’main-wrapper’>
<b:section class=’main’ id=’main’ showaddelement=’no’>
<b:widget id=’Blog1′ locked=’true’ title=’Blog Posts’ type=’Blog’/>
</b:section>
</div>

<div id=’sidebar-wrapper’>
<b:section class=’sidebar’ id=’sidebar’ preferred=’yes’/>
</div>

Tambahkan script berikut di atas div id=’main-wrapper’:

<div id=’newsidebar-wrapper’>
<b:section class=’sidebar’ id=’newsidebar’ preferred=’yes’>
<b:widget id=’NewProfile’ locked=’false’ title=’About Me’ type=’Profile’/>
</b:section>
</div>

Sehingga keseluruhan blok script di atas menjadi:

<div id=’newsidebar-wrapper’>
<b:section class=’sidebar’ id=’newsidebar’ preferred=’yes’>
<b:widget id=’NewProfile’ locked=’false’ title=’About Me’ type=’Profile’/>
</b:section>
</div>

<div id=’main-wrapper’>
<b:section class=’main’ id=’main’ showaddelement=’no’>
<b:widget id=’Blog1′ locked=’true’ title=’Blog Posts’ type=’Blog’/>
</b:section>
</div>

<div id=’sidebar-wrapper’>
<b:section class=’sidebar’ id=’sidebar’ preferred=’yes’/>
</div>

Selalu klik tombol “Preview” untuk melihat perubahan tampilan blog anda. Jika puas, baru klik “Save Change” untuk menyimpan perubahan yang anda buat secara permanen. Kini blog anda di Blogger manjadi tiga kolom!!

Sebagai gambaran, berikut blog eksperimental saya di blogger yang telah saya modifikasi menjadi tiga kolom (dari mula-mula templat minima):

http://remsonglyrics.blogspot.com

Lihat kode HTML/CSS-nya (pada Mozilla Firefox: klik kanan > View Page Source) jika ingin mengevaluasi modifikasi script yang saya buat.

Jika anda tidak mau repot, di internet banyak terdapat situs yang menawarkan templat blogger tiga kolom gratisan. Cari dengan Google. Tutorial ini hanya ditujukan buat anda yang ingin ‘maju‘ dengan memodifikasi sendiri sekaligus belajar melakukan tweak HTML/CSS secara mandiri. Menyenangkan loh, kalau bisa melakukan sendiri!

Salam,

About these ads

28 Balasan ke Membuat Desain Blog Tiga Kolom di Blogger

  1. agus mengatakan:

    mas scrip mu itu asli template blogger waktu bikin blog atau sudah di ganti template klasik?????????

  2. agus mengatakan:

    maksudku scrip yang 3 kolom punya sampean yang remsonglyric.blogspot.com itu, tks

  3. Hermanu mengatakan:

    Asli dari templat minima. Kalo modifikasi templat lain saya belum nyoba, tapi mestinya prosedurnya ga jauh beda. Script yg warna merah yg ditambahkan itu sebetulnya script sidebar yg dikopi-paste dan diganti namanya menjadi newsidebar (pake nama lain jg bisa). Jadi nggak membikin script baru, cuma memodifikasi yg ada saja.

  4. 3a1 mengatakan:

    wuih pagerank ny 11 kie

  5. Putra Kelana mengatakan:

    Salam kenal Bos

    Ini dia yg gw cari

    makasih ya Tutorialnya

    jelas banget

  6. cecs fabregas mengatakan:

    keren keren..
    asli keren…
    semangat,..!

  7. novita mengatakan:

    ty infonya mas,

  8. arifsani mengatakan:

    mas, saya buat blog dengan template :

    Blogger Template Style
    Name: Minima
    Designer: Douglas Bowman
    URL: http://www.stopdesign.com
    Date: 26 Feb 2004
    Updated by: Blogger Team

    Saya ingin membuat blog dengan 3 kolom trus saya ubah tempalte tersebut dengan saran mas diatas tapi kok gak bisa ya.

    Mohon Pencerahannya.

    Thanks

  9. leksono mengatakan:

    terima kasih tutorialnya…sukses selalu

  10. Hotma mengatakan:

    mas, saya kurang mengerti di bagian:

    /** Page structure tweaks for layout editor wireframe */
    body#layout #header {
    margin-left: 0px;
    margin-right: 0px;
    }

    kok punya saya ga ada ya?
    atau bwntuknya lain?

    mohon bantuan mas

    Terima Kasih

    • Hermanu mengatakan:

      Pasti ada. Itu script buat memodifikasi halaman layout editor (tempat pengguna Blogger bisa menggeser-geser/drag-and drop widget dengan mouse). Cari saja lebih teliti. Oya, jangan lupa sebelumnya klik checkbox “Expand Widget Templates” tepat di pojok kanan atas templat html blog anda. Kalo itu ndak diklik ya ndak bakalan ketemu scriptnya.

  11. wayan m.natsir mengatakan:

    Matur nuhun, Kang Mas atas ilmunya. Smg manfaat untuk kemajuan newbie kayak saya ne..
    tulung disupport ya…

    Lam kenal saking Mbali

  12. iis mengatakan:

    wah aku sampe kriting nyari
    /** Page structure tweaks for layout editor wireframe */
    body#layout #header {
    margin-left: 0px;
    margin-right: 0px;
    }
    untung pertanyaan mas hotma dijawab.thanks mas

  13. maspigih mengatakan:

    Dulu khan ada tutorial tentang cara buat template, nha sekarang gimana caranya buat postingannya di bagian tengah, sidebar leftnya di kiri post n sidebar rightnya di kanan posting….
    Padahal saya sudah berhasil membuat template, eeehh…..malahan tempatnya jadi kacau

  14. aree mengatakan:

    makasih boz..gimana cara buat daftar isi di blog??

  15. leo mengatakan:

    saya telah mencoba membuat tiga kolom pada blog saya dengan menggunakan script yg disediakan di lakuningsurya.wordpress.com tp kok malah berantakan waktu melihat di page elemen, kolom sebelah kanan yg ada sebelumnya pindah ke bagian bawa posting dan tidak terjadi penambahan kolom…. tolong di jelaskan …. saya baru belajar membuat blog sehingga tahu mengenai pengelolaan script pada html tolong di bantu…. atas bantuannya di ucapkan trima kasih

  16. djmjg01 mengatakan:

    waduh pusing,mas. Ada ga templatenya yg tinggal pasang di blog. Soalnya saya pake hape jadul.

    • Hermanu mengatakan:

      Banyak, dan gratis pula. Tinggal search di Google pake kata kunci “free blogger template”. Download terus dipasang langsung di blog kamu. Ngotak-atik templat sendiri sih cuma kegiatan iseng buat yg hobi. Buat yg pengen langsung beres ya mending cari templat siap pakai ajah :)

  17. resi mengatakan:

    maaf mas kok udah saya cari-cari kok ga nemu juga ya crif yang kayak di bawah ini
    padahal udah saya contreng expand widget nya mas…
    /** Page structure tweaks for layout editor wireframe */
    body#layout #header {
    margin-left: 0px;
    margin-right: 0px;
    }
    tolong bantuannya….trims

  18. nova mengatakan:

    thanks ya kang infonya…..ya kalau sempat mampir nti nova suguhin pulsa he…..

  19. Rahasia masa depan mengatakan:

    nice info..
    mao cobain ah..

    hohooh..
    thx mas buat infonya..
    lam kenal yah..
    blognya bagus bgt lho..
    sayang kalo gag d jalanin lagi..
    ^^

  20. tyo.. mengatakan:

    om2.. gw stress banget nih gak ketemu2 yg bagian..

    /** Page structure tweaks for layout editor wireframe */
    body#layout #header {
    margin-left: 0px;
    margin-right: 0px;
    }

    gw udah nyoba cara om yg om kasih buat bung hotma tp tetep aj gak bisa.. gw udah nyari pake findernya notepad tetep aj gak ada.. di bagian mana sih??

  21. heri mengatakan:

    tolong jelasin padding juga donk

  22. Hans mengatakan:

    salam kenal,

    mas gmn yah caranya ngilangin garis ditengah blog

    ini blog sy mas http://make-money-go.blogspot.com/

    trims atas bantuannya

  23. sekow mengatakan:

    waduh masih puyeng nih…
    makLum pemula :(

  24. wildan mengatakan:

    bingung,………………tapi keren abhis

  25. Jo4n3z mengatakan:

    Wah msh bingung ne.. Pake hp jadul agak ribet.

Ikuti

Get every new post delivered to your Inbox.

%d blogger menyukai ini: