prev next

18/11/12

Cara Membuat Template 2 Kolom Menjadi 3 Kolom Pada Blogger

Posted on 05.01 by tris KT

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

1 Response to "Cara Membuat Template 2 Kolom Menjadi 3 Kolom Pada Blogger"

.
gravatar
Apotek Herbal ACE MAXS Says....

makasih banyak buat tutornya sob,, sangat bermanfaat..

http://goo.gl/4Gnhee

Komentar Anda