Menambahkan Sidebar Pada Blog

Semua template standar yang disediakan oleh blogger hanya menempatkan satu buah side-bar di kiri atau di sebelah kanan dari area utama (main wrapper/ area posting). hal ini tentu saja menjengkelkan karena dengan terpaksa kita hanya bisa menempatkan sedikit sekali widget di bagian yang sangat sering di lihat pengunjung (bagian atas atau awal dari blog)

Tapi ini semua bukan akhir dari segalanya, kita bisa menambahkan side-bar tambahan disebelah kanan atau kiri dari blog kita. saat ini layout yang sering dipakai oleh para blogger adalah menempatkan dua buah sidebar disebelah kanan blog. tapi pada dasarnya semua sama yaitu menambahkan sebuah sidebar baru pada plog kita (bahkan kita bisa menambahkan banyak side-bar pada blog kita tergantung selera kita).

Oke kita mulai saja bagaimana menambahkan sebuah side-bar. pada tutorial ini dicontohkan hanya menambahkan satu side-bar baru, anda bebas menambahkan jumlah side-bar baru dengan meng-kustom kode tutorial dibawah. tutorial ini menggunakan template dengan side-bar default berada disebelah kanan.

Pertama anda login dulu ke blogger. Setelah masuk ke menu dasbor, klik TATA LETAK>>Edit HTML lalu pada EDIT TEMPLATE cari kode dibawah ini :

#header-wrapper {
width:940px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

* teks yang di beri warna merah rubah oleh anda, saya rekomendasikan nilainya 940px; nilai ini merupakan nilai lebar dari area header. lalu cari kode dibawah ini

#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:940px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}

* teks yang di beri warna merah rubah oleh anda, saya rekomendasikan nilainya 940px; atau samakan dengan nilai lebar header. nilai ini merupakan nilai lebar dari area deskripsi header. lalu cari kode dibawah ini

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

* teks yang di beri warna merah rubah oleh anda, saya rekomendasikan nilainya 940px; atau samakan dengan nilai lebar header. nilai ini merupakan nilai lebar dari area outer. lalu cari kode dibawah ini

#main-wrapper {
width: 460px;
float: $startSide;
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 */
}

Nah nilai yang diberi warna merah merupakan nilai lebar untuk area posting, rubah oleh anda berdasarkan pembagian area di blog. Begini; apabila anda menambahkan sebuah side-bar tentu saja berarti blog anda di bagi menjadi 3 kolom, yaitu side-bar-1(sidebar default), main-wrapper (area dimana posting ditampilkan), dan side bar 2 (yang anda akan tambahkan). apabila anda ingin menyamakan semua lebar dari ketiga area tersebut maka setiap area diberi nilai 940 (nilai dari outer-wrapper) / 3 = 313px, tapi tentu saja anda bebas menentukan sendiri lebarnya! dan hal yang perlu diperhatikan area main-wrapper ini haruslah lebih besar dari area side-bar, karena area ini dimana posting ditampilkan, tapi tetap patokan untuk menentukan lebar dari ketiga area ini adalah semua nilai lebar dari ketiga area ini bila dijumlahkan sama dengan nilai lebar outer-wrapper. selanjutnya cari kode dibawah 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 */
}

Nilai yang diberi warna merah merupakan nilai lebar untuk area side-bar (side-bar yang sudah ada secara default), beri/ rubah nilai sidebar ini berdasarkan keinginan anda. setelah itu tambahkan kode dibawah ini tepat dibawah kode diatas.

#newsidebar-wrapper {
width: 220px;
float: $startSide;
padding-right:10px;
word-wrap: break-word;
overflow: hidden;
}

apabila anda ingin menambahkan dua buah side-bar baru maka kode diatas digandakan, contoh menambahkan 2 buah sise-bar

#newsidebar-wrapper1 {
width: 100px;
float: $startSide;
padding-right:10px;
word-wrap: break-word;
overflow: hidden;
}
#newsidebar-wrapper2{
width: 100px;
float: $startSide;
padding-right:10px;
word-wrap: break-word;
overflow: hidden;
}

Dengan kode diatas maka pada blog anda akan terdapat 3 side-bar.

lalu cari kode dibawah ini

#footer {
width:900px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
background-color:#000000;
border:2px solid #ffffff;
}

Nilai yang diberi warna merah merupakan nilai lebar untuk area footer samakan nilainya dengan nilai outer-wrapper

Sekarang bagaimana menempatkan side-bar baru, apabila anda ingin menempatkan side-bar baru berdampingan dengan side-bar lama (yang telah ada) atau disebelah kanan dari blog anda. maka cari kode dibawah ini

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

lalu copy kode dibawah tepat sesudah kode diatas.

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

contoh:

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

Apabila anda menambahkan dua buah side bar baru maka gandakan kode diatas, contoh

<div id='newsidebar-wrapper1'>
<b:section class='sidebar' id='newsidebar1' preferred='yes'>
</b:section>
</div>
<div id='newsidebar-wrapper2'>
<b:section class='sidebar' id='newsidebar2' preferred='yes'>
</b:section>
</div>

Sedangaka apabila anda ingin menempatkan side-bar baru disebelah kiri dari area main-wrapper maka tempatkan kode diatas tadi tepat sebelum kode diatas. contoh

<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:section>
</div>

Lalu Save Template, dan cek hasilnya di menu tabulasi TATA LETAK . lihat hasilnya biasanya anda harus merubah-rubah lagi settingan dari nilai-nilai lebar dari area-area pada blog (area header-wrapper, main-wrapper, footer, dll) agar semuanya pas dan sesuai dengan keinginan anda