menambah kolom pada tempate baru di blogspot

Jika mengacu kepada standarisasi dari template blogger, maka sebuah template akan mempunyai tiga elemen penting, yaitu :

Elemen Header

Elemen Outer

Elemen Footer


Untuk elemen Outer di bagi kembali menjadi :

Elemen main, elemen main ini adalah elemen tempat kita menyimpan posting, jadi apabila kita memposting sebuah artikel maka akan masuk dan di tampilkan pada elemen ini

Elemen Sidebar, elemen sidebar ini adalah merupakan elemen untuk menyimpan berbagai blog tools ataupun aksesori yang kita inginkan untuk mempercantik blog.


uke..langsung aj yiaa....

Sign in di blogger

Klik menu Layout

Klik menu Edit HTML

Ingat ! jangan memberi tanda centang pada kotak kecil di samping tulisan Expand Widget Template, sekali lagi jangan mencentangnya, karena jika sobat mencentangnya nanti akan keluar kode-kode widget yang memusingkan kepala.
cari kode sperti di bawah ini:

#header-wrapper {<br /> width:660px;<br /> margin:0 auto 10px;<br /> border:1px solid $bordercolor;<br /> }

ganti nilai 660px dengan 840px, sehingga kodenya jadi seperti ini :


#header-wrapper {<br /> width:840px;<br /> margin:0 auto 10px;<br /> border:1px solid $bordercolor;<br /> }

Cari kode seperti di bawah ini :


#outer-wrapper {<br /> width: 660px;<br /> margin:0 auto;<br /> padding:10px;<br /> text-align:left;<br /> font: $bodyfont;<br /> }

ganti nilai 660px menjadi 840px, sehingga kodenya menjadi seperti ini :


#outer-wrapper {<br /> width: 840px;<br /> margin:0 auto;<br /> padding:10px;<br /> text-align:left;<br /> font: $bodyfont;<br /> }

cari kode seperti di bawah ini :


#sidebar-wrapper {<br /> width: 220px;<br /> float: right;<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 />}

Copy paste kode berikut persis di bawah kode yang seperti di atas :


#sidebarbaru-wrapper {<br /> width: 180px;<br /> float: right;<br /> psdding-left:10px;<br /> word-wrap: break-word; <br /> overflow: hidden; <br />}

Cari kode seperti di bawah ini :


#footer {<br /> width:660px;<br /> clear:both;<br /> margin:0 auto;<br /> padding-top:15px;<br /> line-height: 1.6em;<br /> text-transform:uppercase;<br /> letter-spacing:.1em;<br /> text-align: center;<br />}

Ganti nilai 660px menjadi 840 px, sehingga kodenya akan seperti ini :


#footer {<br /> width:840px;<br /> clear:both;<br /> margin:0 auto;<br /> padding-top:15px;<br /> line-height: 1.6em;<br /> text-transform:uppercase;<br /> letter-spacing:.1em;<br /> text-align: center;<br />}

Cari kode seperti di bawah ini :


<div id="'sidebar-wrapper'"><br /> <b:section class="'sidebar'" id="'sidebar'" preferred="'yes'"><br /><b:widget id="'Profile1'" locked="'false'" title="'Mengenai" type="'Profile'/"><br /><b:widget id="'BlogArchive1'" locked="'false'" title="'Arsip" type="'BlogArchive'/"><br /></b:section><br /> </div>

Copy kode berikut, lalu paste persis di bawah kode yang seperti di atas :


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


# Klik tombol Simpan Template

# Selesai.

Untuk melihat efek hasilnya, silahkan klik Elemen Halaman apakah sudah berformasi tiga kolom atau belum? jika sudah, silahkan isi sidebar tersebut dengan apa saja lalu lihatlah hasil nyatanya.

Langkah-langkah di atas merupakan metoda dasar saja, untuk menambahkan variasi lain, sobat memerlukan pengetahuan serta kretifitas. Agar sobat yakin dengan apa yang saya terangkan, sobat bisa melihat contoh yang sudah jadi, silahkan klik di sini !