Cara Membuat Template 2 Kolom Menjadi 3 Kolom Pada Blogger

18/11/12

Cara Membuat Template 2 Kolom Menjadi 3 Kolom Pada Blogger

Posted on 05.01 by Unknown

Membuat template 2 kolom menjadi 3 kolom pada Blogger tidaklah sulit asal Saudara benar-benar mengikuti tutorial dan tip-trik dibawah ini.

Pada dasarnya untuk menambah kolom sidebar baik itu sidebar kiri atau sidebar kanan yang Saudara harus perhatikan adalah kode-kode seperti : #outer-wrapper ; #main-wrapper ; #sidebar-wrapper , sebab kode inilah yang nantinya kita rubah di template.
Sebagai contoh template Saudara sekarang adalah template sederhana, umumnya menggunakan lebar/ width #outer-wrapper : 660 px dan #main-wrapper : 410 px, #sidebar-wrapper : 220px, kalau saudara mau menambah kolom sidebar baru ukuran 180 px misalnya, maka otomatis Anda harus menambah ukuran #outer-wrapper = #main-wrapper + #sidebar-wrapper + #sidebarbaru-wrapper + margin left.

#outer-wrapper = 410 px + 220 px + 180 px + 20 px = 830 px

Agar sidebar tidak berdempetan dengan main elemen berikan jarak antara keduanya 10 px, sehingga ukuran
#outer-wrapper = 840 px

Masuk ke Blogger " Edit HTML Template"

Backup template Saudara yang sekarang secara lengkap untuk mengantisipasi jika error
Jangan Lupa centang Expand Template Widget
Tekan F3 untuk pencarian pada Edit HTML

Perhatikan kode css tersebut :

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

Saudara fokuskan pada kode-kode yang diwaranai diatas, dan lakukan trik tersebut :

rubah #outer-wrapper width: 660px menjadi 840 px tambahkan padding-left:10px; pada #sidebar-wrapper tambahkan kode kolom baru ini :
#sidebarbaru-wrapper {width: 180px;float: right;padding-left:10px; word-wrap: break-word; overflow: hidden; }

Sehingga kodenya menjadi seperti ini :

* Outer-Wrapper
------------------------------------------ */
#outer-wrapper {
width: 840px;
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;
padding-left:10px;
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 */
}
#sidebarbaru-wrapper {
width: 180px;
float: right;
padding-left:10px;
word-wrap: break-word;
overflow: hidden;
}

Setelah pemasangan kode css sidebar baru telah selesai,selanjutnya Saudara juga perlu memasang code id sidebar baru pada <body/> template.

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/>
<b:widget id='BlogArchive1' locked='false' title='Archive' type='BlogArchive'/>
</b:section>
</div>

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

Setelah langkah diatas selesai, maka Save Template
Saudara bisa cek di Tata Letak, disini Saudara bisa melihat tampilan template telah menjadi 3 kolom.
Selamat belaja dan mencoba..........................

Jika Saudara masih bingung tentang cara Membuat Template Blogger Jadi 3 Kolom, silahkan bertanya di form komentar dibawah ini.....dan jangan lupa jempolnya ya!!!!!!!!!!!!

Belajar Itu Mengasikkan

Sistem Gerak Mobile Robot Berkak

18/11/12