Menambah kolom
sidebar blogspot sebenarnya agak sulit namun asik. Kalau kita memilih template
minima maka akan terdapat dua kolom saja yaitu kolom pada bagian postingan dan
kolom pada bagian sidebar. Banyak blogger yang suka hanya dua kolom saja namun
ada juga beberapa blogger yang suka blog dengan tiga sidebar atau bahkan empat
sidebar.
Sebenarnya kalau
dicari template blog untuk blogspot yang tiga sidebar dan empat sidebar sangat
banyak dan tinggal download saja dan dipakai.Namun bagaimana kalau kita mencoba
modifikasi template default minima menjadi beberapa sidebar. Tentunya ada rasa
kepuasan tersendiri bukan? Itung-itung buat belajar dan nambah kemampuan trik
blogspot yang kita miliki.
Elemen pada
template blogger ada tiga, yaitu:
* Elemen Header
* Elemen Outer
* Elemen Footer
Untuk Elemen
Outer masih dibagi menjadi dua bagian:
Elemen Main,
elemen ini adalah elemen tempat kita menyimpan posting artikel. Jadi bila kita
membuat artikel posting, maka postingan akan masuk ke bagian ini.Elemen
Sidebar, elemen ini adalah tempat untuk menambahkan asesoris lainnya untuk
mempercatik blog danmenambah widget seta tools lainnya.
Untuk siapa saja
yang suka berkreasi dengan kode-kode HTML, inilah salah satu cara terbaik untuk
mengasah ilmu HTML. Karena dengan membuat elemen sidebar blogspot tambahan,
maka kamu akan dihadapkan dengan kode HTML.
Menambahkan
kolom sidebar berarti perlu memperhatikan kode-kode pada Outer Wraper berikut.
/* 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 */
}
Dengan
menambahkan elemen sidebar baru berarti secara logika maka akan terjadi
penambahan nilai lebar keseluruhan pada Outer Wraper. Mengapa? Karena seperti
yang saya katakan tadi, bahwa outer wraper terbagi atas dua bagian yaitu main
wraper dan sidebar wraper.
Sekarang
bagaimana cara menambahkan elemen sidebar baru atau kolom baru di blogspot?
Pertama sekali
harus diperhitungkan berapa lebar dari kolom baru yang akan kita buat. Misalnya
kita ambil nilai lebar sidebar baru 220 pixel. Maka secara keseluruhan lebar
outer wraper menjadi kira-kira 410 pixel + 220 pixel + 220 pixel + 20 pixel =
870 pixel. Bisa ditambahkan 10 pixel lagi untuk sela pada outer wraper sehingga
lebar keseluruhan adalah 880 pixel.
Kode penambahan
sidebar baru dengan nilai di atas adalah:
#sidebarbaru-wrapper {
width: 220px;
float: right;
padding-left:10px;
word-wrap: break-word;
overflow: hidden;
}
Setelah
ditambahkan maka kodenya akan menjadi seperti ini:
/* Outer-Wrapper
------------------------------------------
*/
#outer-wrapper {
width: 880px;
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; /* yang ini adalah
tambahan untuk jarak sela */
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: 220px;
float: right;
padding-left:10px;
word-wrap: break-word;
overflow: hidden;
}
Kode-kode di
atas merupakan langkah pertama yang harus ditambahkan. Berikutnya adalah
menambahkan kode id untuk elemen sidebar baru tersebut. Untuk kode id sidebar
sebelum penambahan kolom adalah seperti ini:
Karena kita
telah menambahkan elemen baru pada sidebar maka kita juga harus membuat id
sidebar baru tersebut pada bagian body. Kodenya adalah ini:
Selanjutnya
adalah menyatukan kode sidebar baru tersebut pada kode id side bar yang
sebelumnya, sehingga kodenya menjadi seperti ini:
Selesai dan
kolom baru atau elemen baru pada sidebar blogspot telah ditambahkan. Nilai dari
header dan footer sebaiknya disamakan dengan nilai outer wrapper tersebut yaitu
sebesar 880 pixel. Sehingga menjadi sama dan lebih klop. Mudahkan? Ok, mari
bermain kode HTML dengan blog yang bukan blog utama kita. Buatlah blog baru
sebagai blog uji coba kamu sebagai bahan percobaan untuk memodifikasi sidebar
template minima blogspot.
Loggin di blogger » Klik Layout » Klik Edit HTML »
Jangan memberi
tanda centang pada kotak kecil di samping tulisan Expand Widget Template. Tips
untuk memudahkan mencari kode berikut, dengan tekan Ctrl F atau F3 pada kebor
maka akan muncul tools kotak cari pada layar bawah monitor komputer.
Cari kode di
bawah ini:
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
Ganti nilai
660px menjadi 880px, sehingga kodenya jadi seperti ini :
#header-wrapper {
width:880px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
Cari kode
seperti di bawah ini :
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
Ganti nilai
660px menjadi 880px, sehingga kodenya menjadi seperti ini :
#outer-wrapper {
width: 880px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
Cari kode
seperti di bawah ini :
#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 */
}
Copy kode
berikut dan paste persis di bawah kode di atas :
#sidebarbaru-wrapper {
width: 220px;
float: right;
padding-left:10px;
word-wrap: break-word;
overflow: hidden;
}
Cari kode
seperti di bawah ini :
#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}
Ganti nilai
660px menjadi 880 px, sehingga kodenya akan seperti ini :
#footer {
width:880px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}
Cari kode di
bawah ini :
Copy kode
berikut, lalu paste persis di bawah kode yang di atas :
Klik Simpan
Template dan selesai.
Untuk melihat
hasilnya, tinggal klik Elemen Halaman dan lihat apakah kolom kamu sudah menjadi
tiga elemen. Bila sudah, kamu bisa tambahkan widget baru pada sidebar tersebut
dan lihat hasilnya. Sebenarnya kode-kode di atas masih bisa dirubah lagi sesuai
dengan selera. Tinggal dibutuhkan kesabaran dan kreatifitas saja. Sebagai tips,
jangan pernah takut berhadapan dengan kode HTML.
Belajar dan
belajar adalah cara termudah untuk berkreasi. Sumber bacaan dari banyak artikel
di internet mengacu pada tulisan Kang Rohman di Tips Menambah Kolom Pada
Template Baru. Untuk template default minima juga bisa menambahkan elemen baru
di atas dan di bawah elemen kolom posting. Menambah elemen di bawah header.
Menambah elemen di atas footer.
Pokoknya berani
bereksperimen dan coba-coba.
Pengen tahu lebih jelas cara-cara kunjungin aja Disini