menambah kolom pada template minima menjadi 3 kolom

Pada umumnya template yang di sediakan di blogspot masih dua kolom, kita dapat menambah dan mengedit setiap elemen halaman sesuai dengan yang kiat inginkan. Kali ini kita ajkan mencoba untuk menambah sebuah kolom pada template minima. ikuti langkah berikut:

1. login ke blog


2. pilih kostumisasi


3. edit HTML, sebaiknya sebelum mengedit copy dulu HTML template ke notepad, biar aman jika terjadi kekeliruan


4. cari kode ini:
   
   /* Outer-Wrapper<br />----------------------------------------------- */

   di bawah kode tersebut terdapat outer-wrapper, main-wrapper ,sidebar-wrapper. outer-wraper menggambarkan pengaturan keseluruhan blog dari kiri kekanan, main-wraper merupakan tempat postingan dan sidebar-wrapper merupakan kolom disamping kolom posting. Kita dapat menambahkan sidebar baru. sehingga blog memiliki 3 kolom


5. tambahkan kode ini
   #sidebarbaru-wrapper {<br /> width: 200px;<br /> float: left;background:; border:0px solid $bordercolor;white; padding:5px 5px .25em;<br /> psdding-right:5px;<br /> word-wrap: break-word; <br /> overflow: hidden; <br />}

   
   dibawah
   
   #sidebar-wrapper {<br /> width: 200px;<br /> float: $endSide;background:; border:0px solid $bordercolor;white; padding:5px 5px .25em;<br /> word-wrap: break-word; /* fix for long text breaking sidebar float in IE */<br /> overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

   background, border, dan padding tambahan saja, silahkan atur sendiri atau tidak ada juga tidak apa-apa, jika dipakai, tambahkan juga pada main-wrapper


6. atur lebar masing-masing wrapper agar wraper tidak saling dempet, misal outer wraper widht=850 (ini berarti jumlah lebar main-wrapper,sidebar-wraper dan sidebarbaru-wrapper, padding masing-masing wrapper harus 850), kemudian main-wrapper widht=400, sidebar-wrapper dan sidebarbaru-wrapper masing-masing 200


7. sehingga secara keseluruhan seperti di bawah ini:
   
   /* Outer-Wrapper<br />----------------------------------------------- */<br />#outer-wrapper {<br /> width: 850px;<br /> margin:10 auto;<br /> padding:0px;<br /> text-align:$startSide;<br /> font: $bodyfont;<br /> }<br /><br />#main-wrapper {<br /> width: 400px;<br /> float: $startSide;background:;border:0px solid $bordercolor;;padding:15px 15px .25em;<br /> word-wrap: break-word; /* fix for long text breaking sidebar float in IE */<br /> overflow: hidden; /* fix for long non-text content breaking IE sidebar float */<br /> }<br /><br />#sidebar-wrapper {<br /> width: 200px;<br /> float: $endSide;background:; border:0px solid $bordercolor;white; padding:5px 5px .25em;<br /> word-wrap: break-word; /* fix for long text breaking sidebar float in IE */<br /> overflow: hidden; /* fix for long non-text content breaking IE sidebar float */<br />}<br />#sidebarbaru-wrapper {<br /> width: 200px;<br /> float: left;background:; border:0px solid $bordercolor;white; padding:5px 5px .25em;<br /> psdding-right:5px;<br /> word-wrap: break-word; <br /> overflow: hidden; <br />}



8. jika sudah lanjutkan dengan menambahkan ini:
   
   <div id='sidebarbaru-wrapper'><br /><b:section class='sidebar' id='sidebarbaru' preferred='yes'/><br /></div><br />

   
   sebelum :
   
   <br /><div id='main-wrapper'><br /> <b:section class='main' id='main' showaddelement='no'><br /><b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/><br /></b:section><br /> </div>



9. coba klik pratinjau


10. jika sudah bertambah sidebarbaru, silahkan disimpan

Tulisan Terkait :

Best Quote Today:
Keberhasilan adalah kemampuan untuk melewati dan mengatasi dari satu kegagalan ke kegagalan berikutnya tanpa kehilangan semangat. (Winston Chuchill)

Jika Anda menyukai tulisan diatas jangan lupa untuk klik tombol suka untuk berbagi dengan teman facebook Anda. Anda juga bisa membagikan tulisan ini di twitter dan jejaring sosial lainnya. Berbagi itu indah.

Become a Fan