Memodifikasi Template Blogger : Membuat Template Tiga Kolom

Tulisan ini masih dalam serial bagaimana cara membuat template. Seperti yang sudah saya jelaskan sebelumnya cara termudah membuat template adalah dengan memodifikasi template bawaan blogger, saya menggunakan template minima. Lalu bagaimana cara membuat template tiga kolom? Karena template bawaan blogger rata-rata hanya memiliki dua kolom. Untuk membuat template tiga kolom kita hanya harus menambah kolom baru pada template yang kita modifikasi. Melalui tulisan ini saya akan mencoba sedikit menjelaskan bagaimana cara membuat template tiga kolom dengan memodifikasi template minima.

Apa yang dimaksud dengan kolom? Kolom disini merujuk pada elemen yang terdapat di antara elemen header dan footer, yaitu main (area untuk posting) dan sidebar (area untuk widget, menu navigasi dll). Template minima yang sekarang kita gunakan untuk berlatih memiliki satu elemen main dan satu elemen sidebar, karena itu biasa disebut template dua kolom. Untuk membuat template tiga kolom kita akan menambahkan satu elemen yaitu sidebar. Sehingga nantinya template minima yang kita modifikasi memiliki satu elemen main dan dua elemen sidebar.
Untuk menambah elemen sidebar yang perlu anda lakukan adalah menambahkannya didalam kode HTML. Kode untuk sidebar ditemplate minima adalah

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'/>
<b:widget id='Profile2' locked='false' title='Mengenai Saya' type='Profile'/>
</b:section>
</div>

Untuk menambah sidebar baru anda copy saja kode diatas lalu paste dibawah nya sehingga menjadi

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'/>
<b:widget id='Profile2' locked='false' title='Mengenai Saya' type='Profile'/>
</b:section>
</div>
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'/>
<b:widget id='Profile2' locked='false' title='Mengenai Saya' type='Profile'/>
</b:section>
</div>

Lalu ganti nama sidebar yang baru misalnya newsidebar. Sidebar baru yang telah anda buat tersebut mempunyai widget yang sama dengan sidebar yang lama. Anda bisa menghapusnya juga dan menambahkan widget baru nantinya lewat halaman “add elemen” sehingga kode untuk sidebar baru anda menjadi seperti ini

<div id="sidebar-wrapper">
<b:section class="sidebar" id="sidebar" preferred="yes">
<b:widget id="BlogArchive2" locked="false" title="Arsip Blog" type="BlogArchive">
<b:widget id="Profile2" locked="false" title="Mengenai Saya" type="Profile">
</b:widget>
</b:widget></b:section></div>
<div id="newsidebar-wrapper">
<b:section class="sidebar" id="newsidebar" preferred="yes">
</b:section>
</div>

(sidebar baru belum mempunyai widget)
Setelah anda menambahkan elemen sidebar baru yang perlu dilakukan adalah menentukan letaknya. Pada contoh diatas kita meletakkan kode HTML sidebar baru dibawah kode HTML sidebar lama. Artinya adalah nantinya pada tampilan template kita sidebar akan terletak disebelah kanan sidebar lama. Dengan kata lain urutannya adalah main-wrapper sidebar-wrapper lalu newsidebar-wrapper.
Atau jika anda ingin mengatur posisinya sebelum elemen main-wrapper maka letakkan kode HTML sidebar baru sebelum kode HTML elemen main-wrapper sehingga menjadi

<div id="newsidebar-wrapper">
<b:section class="sidebar" id="newsidebar" preferred="yes">
</b:section>
</div>
<div id="main-wrapper">
<b:section class="main" id="main" showaddelement="no">
<b:widget id="Blog1" locked="true" title="Posting Blog" type="Blog">
</b:widget>
</b:section></div>

Pengaturan kode kode diatas hanya menentukan urutan tampilan elemen saja, untuk mengatur lebih lanjut kita harus memodifikasi kode CSS nya juga. Untuk menambahkan kode CSS sidebar baru anda juga bisa meng-copynya dari kode CSS sidebar yang lama lalu paste dibawahnya dan ganti namanya (sama dengan nama di kode HTML nya). Sehingga menjadi seperti ini

#sidebar-wrapper {
width: 220px;
float: $endSide;
background: #BBD6F4;
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 */
}
#newsidebar-wrapper {
width: 220px;
float: $endSide;
background: #BBD6F4;
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 */
}

Ok sekarang save perubahan yang telah anda buat. Dan lihat hasilnya. Apakah terlihat perubahannya? Barangkali tidak, hal ini karena anda belum manambahkan widget untuk sidebar baru anda. Sekarang cobalah tambahkan widget untuk sidebar baru anda. Bagaimana hasilnya? Ternyata posisi sidebar baru terletak dibawah sidebar lama. Hal ini dikarenakan lebar elemen main-wrapper ditambah sidebar-wrapper dan new sidebar-wrapper melebihi lebar dari elemen outer-wrapper
Perhatikan hitung hitungan dibawah ini
Main-wrapper + Sidebar-wrapper + Newsidebar-wrapper = 410px + 220px + 220px = 850px
sedangkan lebar dari elemen yang membungkusnya yaitu outer-wrapper hanya sebesar 660px. Ini berarti tidak cukup ruang untuk sidebar baru disamping sidebar lama sehingga sidebar baru oleh browser ditempatkan dibawah sidebar lama. Sekarang coba ganti ukuran lebar elemen outer-wrapper menjadi 850px

#outer-wrapper {
width: 850px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

Sekarang coba lihat hasilnya. Sidebar baru telah berada disisi kanan sidebar lama tetapi posisinya masih menempel. Untuk memberi jarak antar elemen yang perlu kita modifikasi adalah margin untuk sidebar lama maupun sidebar baru

#outer-wrapper {
width: 870px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#sidebar-wrapper {
width: 220px;
float: $startSide;
background: #BBD6F4;
margin-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 */
}

#newsidebar-wrapper {
width: 220px;
float: $endSide;
margin-left: 10px;
background: #BBD6F4;
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 */
}

Kita menambahkan margin untuk sisi kiri dari masing masing sidebar untuk memberi jarak antara elemen sidebar-wrapper dengan elemen main-wrapper dan antara elemen newsidebar-wrapper dengan elemen sidebar-wrapper, perhatikan kode yang berwarna merah.
Selain menambah margin kita juga merubah nilai untuk properties float dari elemen sidebar-wrapper menjadi startSide dan untuk elemen newsidebar-wrapper biarkan saja nilai floatnya tetap endSide, perhatikan kode yang berwarna biru.
Setelah menambah margin maka hitung-hitungan untuk elemen main-wrapper + sidebar-wrapper + newsidebar-wrapper adalah
410px + 10px + 220px + 10px + 220px = 870px
Maka kita juga harus merubah ukuran lebar elemen outer-wrapper menjadi 870 pixel, perhatikan kode yang berwarna hijau. Sekarang simpan perubahan yang telah anda buat dan lihat hasilnya.
Untuk elemen header-wrapper dan footer bisa anda sesuaikan juga lebarnya menjadi 870 pixel.

#header-wrapper {
width:870px;
margin:0 auto 10px;
background: #000000 url(http://img7.imageshack.us/img7/7247/soccershoot.jpg);
border:1px solid $bordercolor;
}

#footer {
width:870px;
clear:both;
margin:0 auto;
background: #EFAB7A;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

Sudah tuh gitu aja cara menambah kolom pada template blog. Sekarang mudah mudahan anda sudah bisa memodifikasi template sesuai dengan keinginan anda. Merubah ukuran elemen sudah, merubah warna background sudah, menambah kolom sudah. Saya kira tiga hal itu cukup untuk anda berkreasi memodifikasi template. Sering sering berlatih dan berlatih.

Related Articles by Categories