Mengubah template Standar Blogspot 2 Columns menjadi 3 Columns

Bosan dengan tampilan blog anda saat ini??? Atau Apakah space sidebar Blog anda menjadi sangat panjang turun ke bawah karena kebanyakan widget yang anda pasang???, padahal posting artikel di blog sudah habis, kejadian ini biasa dialami oleh bloger yang menggunakan template 2 columns.

Salah satu solusinya adalah dengan mengganti template kita ke template yang 3 columns yang banyak disediakan di situs-situs penyedia template, baik itu gratis maupun berbayar, namun kekurangannya adalah setelah kita mengganti template lama kita beberapa widget yang sudah kita pasang terhapus secara otomatis.

Nah…jika hal ini menjadi masalah buat Anda salah satu solusinya adalah dengan memodifikasi template lama kita, berikut ini adalah cara yang saya lakukan untuk mengubah template blog ini menjadi 3 columns :

Buat catatan kecil sebagai referensi anda dalam menentukan besar template keseluruhan untuk template baru anda, sebagai contoh lihat catatan dibawah ini (template yang saya gunakan adalah template standar blogspot tipe “minima”):

Lebar keseluruhan = 800px

Main wrapper = 400px

Sidebar kanan =200px

Sidebar kiri = 200px

(besar ukuran template sesuai keinginan)

Masuk ke akun blogger Anda, pilih “Tata Letak” kemudian klik “Edit HTML” (pastikan bahasa yang anda pilih adalah bahasa Indonesia).

Untuk menghindari kesalahan saat proses hack code HTML, jangan lupa lakukan backup template (Download Template) ke hardisk PC Anda. Setelah selesai mem-backup template beri tanda centang pada “Expand Widget”.

Tahap pertama “MEMODIFIKASI UKURAN” :

Cari kode dibawah ini (tekan ctrl + F), lalu ubah ukurannya sesuai dengan yang telah direncanakan :

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

Tambahkan kode berikut tepat dibawah kode tersebut sesuai dengan ukuran yang telah direncanakan :

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

Cari kode HTML seperti dibawah ini, lalu ubah ukurannya sesuai dengan yang telah direncanakan tadi :

#outer-wrapper {
width : 800px;
margin: 0 auto;
padding: 10px;
text-align:left;
font: $bodyfont;
}
#main-wrapper {
width : 400px;
margin-left: 20px
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
over-flow: hidden; /* break-word; /* fix for long non-text content breaking sidebar float in IE */
}
#sidebar-wrapper {
width: 200px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
over-flow: hidden; /* break-word; /* fix for long non-text content breaking sidebar float in IE */
}

Setelah itu lanjutkan proses peng-Edit-an kode HTML dengan mencari kode seperti ini:

body#layout #outer-wrapper,
body#layout #header-wrapper,
body#layout #footer,
with: 800px;
padding: 0px;
}
body# layout #sidebar-wrapper {
width: 400px;
margin-left: 20px
}
body#layout #sidebar-wrapper,
body#layout#newsidebar-wrapper {
width: 200px
}

Tahap kedua “MENAMBAHKAN SIDEBAR BARU” :
Cari dan tambahkan lagi tepat diatas kode ini <div id=’main-wrapper’> :

<div id='newsidebar-wrapper'>
<b: section class='sidebar' id='newsidebar- preferred='yes'>
<b: widget id='NewProfile' locked='false' tittle='Tentang Saya' type='Profile'/>
</b:section>
</div>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement=’yes’>
<b:widget id='blog1' locked='true' tittle='Blog Posts' tipe='Blog'/>
</b:section>
</div>

Setelah langkah diatas selesai langkah diatas, simpan (SAVE) hasil proses pengeditan kode HTML tadi. Untuk melihat hasilnya tekan tombol “Pratinjau” atau mengatur Widget element template dengan mengatur kembali posisinya dengan mengklik “Tata Letak”.

Semoga tulisan ini bermanfaat, dan jika ada pertanyaan, saran dan kritik seputar artikel dan atau sekedar membuat “backlink” di blog ini dipersilahkan dengan masukkan komentar Anda di artikel ini (Asal bukan Spam) :) .

Artikel lain tentang “Memodifikasi template Blog”:

* Bikin sendiri Menubar untuk Blog di Blogspot * Bikin sendiri Image Header untuk Blog di Blogspot * Modifikasi template Blog di Blogspot * Modifikasi ukuran mainbar dan sidebar *