Home » » Menambah Elemen Sidebar Sebelah Kiri di Blogspot

Menambah Elemen Sidebar Sebelah Kiri di Blogspot

Cara Menambah Sidebar Sebelah Kiri - Otak-atik tampilan template blog memang mengasyikkan supaya lebih bagus. Biasanya tangan kita sering iseng dan tidak ada puasnya dengan tampilan blog sekarang ini dan ingin membuat lebih menarik lagi. Nah pada pembahasan kali ini saya akan share bagaimana cara merubah tampilan blog yang semula 2 kolom menjadi 3 kolom yaitu dengan menambah 1 kolom sidebar yang letaknya di sebelah kiri. Simak caranya dibawah ini.

Baca juga : Cara menambah 1 kolom dan 2 kolom di bawah sidebar

Cara Menambah Kolom Sidebar di Sebelah Kiri
1. Buka blog anda
2. Pilih Template => Edit HTML
3. Tekan Ctrl+F dan cari kode css yang mirip seperti dibawah ini

#main-wrapper{padding-left:10px;width:590px;float:$startSide;word-wrap:break-word;overflow:hidden}
#sidebar-wrapper{width:310px;float:right;word-wrap:break-word;overflow:hidden}

4. Lalu tambahkan kode berikut dibawahnya

#sidebarkiri-wrapper {width:160px;float:left;word-wrap:break-word;overflow:hidden;}

5. Penerapannya seperti dibawah ini :

#main-wrapper{padding-left:10px;width:590px;float:$startSide;word-wrap:break-word;overflow:hidden}
#sidebar-wrapper{width:310px;float:right;word-wrap:break-word;overflow:hidden}
#sidebarkiri-wrapper {width:160px;float:left;word-wrap:break-word;overflow:hidden;}

Tampilan gambar di Tata Letak sebelum sidebar kiri ditambah seperti dibawah ini :

Menambah Elemen Sidebar Sebelah Kiri di Blogspot


6. Pada kode #main-wrapper silahkan ganti width:590px menjadi width:440px yang merupakan lebar dari area posting akan dikecilkan, sehingga menjadi seperti ini

#main-wrapper{padding-left:10px;width:440px;float:$startSide;word-wrap:break-word;overflow:hidden}

7. Cari kode <div id='main-wrapper'>

8. Selanjutnya tambahkan kode berikut diatasnya

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

Kalau dilihat di Tata Letak, jadinya seperti dibawah ini (sidebar kiri telah ditambahkan)

Menambah Elemen Sidebar Sebelah Kiri di Blogspot


9. Simpan Template

Demikianlah cara menambah sidebar kiri di blogger, silahkan dicoba.


Related Posts

 
Copyright © 2011. Terlintas | Template by Creating Website | Powered by Blogger