Mengubah Blog jadi Tiga Kolom

Berbeda dengan Wordpress pengguna Blogger dapat merubah template sesuai dengan keinginannya sendiri.

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.

Cara-caranya adalah sebagai berikut :

• Login ke akun Blogger anda.


• Pada Dashboard Blogger klik Layout > Template > Edit HTML. Download-lah template anda dahulu dengan meng-klik "Download Full Template" apabila ada kesalahan anda tinggal mendownload lagi template anda tersebut.


• Carilah baris berikut ini (Tidak semuanya sama persis) :

#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 */

}

• Copy lah tulisan yang berwarna orange, lalu paste tepat dibawahnya. Jangan lupa ganti nama Sidebar-Wrapper dengan nama lain, misalnya New Sidebar. Sehingga semua baris akan seperti ini (warna hijau adalah hasil tambahannya) :

#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 */

}

#New sidebar {

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

}

• 
  
  Pada pilihan float, anda bisa merubah nilainya menjadi left ataupun 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 kebalikkannya. 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 ini dibawahnya :

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{

width: 150px;

}

• 
  
  Sehingga menjadi seperti dibawah 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{

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 :

• 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 kode berikut diatas div id=’main-wrapper’ :

<div id=’newsidebar’>

<b:section class=’sidebar’ id=’newsidebar’ preferred=’yes’>

<b:widget id=’NewProfile’ locked=’false’ title=’About Me’ type=’Profile’/>

</b:section>

</div>

• Sehingga jika di gabungkan akan tampak seperti berikut :

<div id=’newsidebar’>

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

• 
  
  Klik tombol "Preview"dahulu jika template yang anda ubah telah sesuai dengan keinginan anda barulah tekan tombol "Save Change" untuk menyimpan perubahan diatas.


• 
  
  Selamat mencoba!!!!!!

Bloggtrik