MEMBUAT SIDEBAR JADI 2

epg-studio.blogspot.com
Penampilan sebuah blog akan semakin cantik jika memiliki 2 buah sidebar. Disamping itu kita akan lebih leluasa dalam menempatkan elemen halaman baik berupa tulisan ataupun widget
Tidak sulit membuatnya, anda tinggal mengikuti langkah-langkah dibawah ini.
Ingat...jangan diberi tanda centang pada Expand widget Template karena akan muncul kode-kode yang rumit sehingga dapat membingungkan.
Perlu diingat kode yang ditampilkan pada tips ini merupakan kode yang berasal dari template Tata Letak. Jadi jika anda kesesulitan menemukan kodenya berarti templatenya berbeda.

Langkah pertama

1. Masuk ke Blogger
2. Pilih Rancangan bagian Edit HTML
3. Cari Kode dibawah ini (biasanya berada dibagian atas)
   
   
* Outer-Wrapper
------------------------------------------ */
#outer-wrapper {
width: 840px
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: 200px;
float: right;
padding-left:10px; (tambahkan kode ini biar tampak ada 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 */

4. Sesuaikan dulu lebar outer wrapper, main wrapper dan sidebar wrapper dengan contoh diatas. Ini agar hasilnya sesuai dengan harapan anda.
5. Jika udah sesuai, Copy kode dibawah ini kemudian paste tepat dibawah kode-kode tadi
   
   #sidebarbaru-wrapper {
width: 200px;
float: right;
padding-left:10px;
word-wrap: break-word;
overflow: hidden;
}
6. Kode diatas menunjukan sidebar baru terletak disebelah kanan. Ubahlah kode tersebut menjadi kode seperti dibawah jika sidebar ingin diletakan di sebelah kiri.
   
   
#sidebarbaru-wrapper {
width: 200px;
float: left;
padding-right:10px;
word-wrap: break-word;
overflow: hidden;
}

Langkah Kedua

1. Masih pada bagian Edit HTML
2. Cari kode HTML dibawah ini pada bagian body
   
<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>
3. Copy kode dibawah ini kemudian paste tepat diatas kode tadi jika sidebar ingin berada di sebelah kiri dan paste tepat dibawahmya jika ingin berada di sebelah kanan. Jangan lupa kode yang diatas( #sidebarbaru-wrapper...dst ) harus disesuaikan, dimana akan meletakkannya..?
   
<div id='sidebarbaru-wrapper'>
<b:section class='sidebar' id='sidebarbaru' preferred='yes'/>
</div>
4. Apabila sudah selesai menempatkan kode sidebar baru, silahkan akhiri dengan menekan tombol Simpan Template, selesai.
5. Silahkan lihat hasilnya !
6. Jika hasilnya tidak seperti harapan anda, kemungkinan lebar dari main wrapper, sidebar wrapper dan sidebar baru wrapper jumlahnya tidak sama dengan lebar outer wrapper, sehingga salah satu sidebar akan kebawah. Solusinya.....cobalah ubah lebar (width) dari sidebar agar hasilnya sesuai dengan keinginan kita. Lihat Klik disini untuk mengubah lebar sidebar.
7. Selamat mencoba, semoga bermanfaat...

Posted in: Tutorial Blogger