mau dapat artikel terbaru blog ini? silahkan ikuti update blog ini

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 *

14 komentar:

James Edy mengatakan...

ces, postingannya dah lumayan bagus, tapi lebih bagus lagi klo kirim file yang isinya "HTML layout blog 3 kolom" lewat emailku (kr_james_09@yahoo.co.id), aku masih puyeng ma "READ MORE", aku mau plajari strukturnya cos dah banyak postingan yang aku baca tapi g kompatible dengan templateku. ok cezzzzzzzzzzzzzz
hidup teknik

Oentoe_09 mengatakan...

@ Coly:
supaya gak puyeng..sebelum dimodif "JANGAN LUPA SAVE!!!" html asli templatenya Bro...nanti scopy paste ke notepad save. kemudian setelah dimodif baru di "save as" hasil save as tadi coba pindahkan ke html template tadi OK, kalo ada error balikin lagi template lama yang dah copy paste tadi OK..???

Madrasah Aliyah Tembilahan mengatakan...

ok juga tu infonya, thanks.

Oentoe_09 mengatakan...

@ Madrasah Aliyah Tembilahan :
Makasih juga dah datang ke blog ini. but biar aman jangan lupa backup dulu template lamanya ya?
kayak komen Saya diatas

anton mengatakan...

Mantap postingannya bro...btw saya sudah ikutin komentar sarannya buat blogku cuma ada sedikit masalah, siapa tau bro bisa bantu kasih solusi. Sesuai sarannya sekarang saya sudah pake template 3 kolom dengan main contentnya di sebelah kiri cuma masalahnya sekarang paragraf yang ada imagenya kok jadi sedikit aneh..cuma bisa 1 paragraf yang ada di samping gambar terus paragraf berikutnya langsung turun di bawah gambar jadi banyak kosongnya di samping gambar. Klo mau lebih jelasnya liat langsung saja di blogku...thanks before

Oentoe_09 mengatakan...

alhamdulilah klo begitu Bro..nanti sy liat dulu, ya mudah2an saya bisa bantu

new mengatakan...

saya bingung.
codenya saja langsung 3 kolom.......!
mohon pencerahan

Oentoe_09 mengatakan...

silahkan ikuti saja tutorial diatas, kalo boleh tahu bingungnya dimana..??

rictric mengatakan...

wadoh gagal euy...btw thanks infonya..kayanya sih gw aja yang gak mudeng nih..wekeke..

rictric mengatakan...

lah..error..
loh, pas balik ke blogger.com kok masuk ke dashboard dan gpp? duh bingung euy..error pa ga nih jadinya?

Oentoe_09 mengatakan...

cuba ganti browser kali (walah kayaknya kagak nyambung deh :x ) biasanya klo pake FF akhir-akhir ini sering "error"

Ikhsan mengatakan...

Macam mana ya aku dah coba otak atik blm bs juga jadi 3 kolom. Pening aku... Munnkin dak mudeng jua nii....
http://ikhsanu.blogspot.com

resep masakan indonesia mengatakan...

wah, berguna sekali buat ngubah template standar, terima kasih atas tutorialnya

Oentoe_09 mengatakan...

@ Masakan Indonesia:
Alhamdulilah jika artikel ini bisa bermanfaat, makasih dah mampir and Salam Kenal ya ;)

Posting Komentar

Label

Blog support

Entri Populer