Cara Dasar Mengubah Template Menjadi 3 Kolom

Mungkin sebagian orang ingin membuat template-nya yang semula dua kolom menjadi tiga kolom. Tapi bagaimana caranya ? Dari berbagai pengalaman yang Saya dapatkan dari BlogWalking, Saya mendapat sebuah kesimpulan trik mengubah template yang semula dua kolom menjadi tiga kolom, trik-nya sebagai berikut:

Tapi ingat, instruksi ini akan berjalan mulus bila di Minima Template milik Blogger. Tetapi tidak menutup kemungkinan untuk bisa berjalan di template lain buatan orang lain. Dan satu lagi yang harus di ingat, yaitu, template yang diubah harus template Blogger Beta atau Blogger New, bukan yang Classic.

Pertama-tama yang harus dilakukan yang pasti melalui Layout > Edit HTML. Kemudian, cari code di bawah ini:

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

Code di atas mendefinisikan format dari sebuah Sidebar dalam Blog, sebagai contoh ini diambil dari template Minima. Nah, selanjutnya kita akan membuat satu Sidebar lagi yang nantinya akan ditaruh di sebelah kiri dari Blog. Kita harus menambahkan lagi code berikut ini tepat di bawah code tadi.

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

Selanjutnya adalah mengubah lebar dari Blog sehingga tatanan kolom ketiga yang baru kita buat tadi tidak berantakan. Biasanya kalua Minima, lebar dari sebuah Blog adalah 600px. Tetapi karena kita baru saja membuat Sidebar baru, kita harus menata dan menghitung lagi. Rumusnya adalah LeftSidebar+Main+RightSidebar, atau 220px+410px+220=850px. Ingat angka-angka ini bukan sembarangan angka, jadi kita harus mengetahui pasti px-px itu.

Misalnya kalau ingin mengetahui lebar LeftSider, kita harus mencari #newSider-wrapper dan lihat berapa angka width yang ada di sana. Jika ingin melihat berapa angka width-nya Main, berarti kita harus mencari #main-wrapper. Dan jika kita mencari rightSidebar, kita harus melihat referensi Width dari #Sidebar-wrapper. Sehingga kalau sudah, Outer-Wrapper harus diubah width-nya hingga menjadi seperti berikut :

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

Memang kita sudah memasukkan kolom baru ke dalam Blog, tetapi kita tetap butuh untuk memasukkannya ke dalam Page Elements, kan percuma, kalau sudah ada di code tapi belum ada di Page Elements, ya kan? Untuk itu, cari code ini terlebih dahulu: <div id='sidebar-wrapper'> atau lengkapnya code tadi seperti berikut:

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

<b:widget id='BlogArchive1' locked='false' title='BlogArchive' type='BlogArchive'/>

<b:widget id='Profile1' locked='false' title='About Me' type='Profile1'/>
</b:section>
</div>

Code di atas adalah milik Sidebar-wrapper, yakni Sidebar yang ada di kanan. Kalau begitu, kita harus memambahkan sedikit trick untuk newSidebar-wrapper, alias Sidebar yang ada di kiri. Kalau begitu, tambahkan code berikut ini tepat setelah code di atas tadi:

<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
<b:widget id='Text1' locked='false' title='' type='Text'/>
</b:section>
</div>

Selanjutnya simpan dan segera pergi ke Page Elements dan lihat apakah ada kolom ketiga atau tidak. Jika ada, berarti kita sudah berhasil mengubah template tersebut.

Print This Page

Masukkan Email Kalian Untuk Mendapatkan Artikel-Artikel Seperti Di Atas:

Delivered by FeedBurner