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 :
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)
9. Simpan Template
Demikianlah cara menambah sidebar kiri di blogger, silahkan dicoba.
Related Posts
tutorial blog
- How to Use Pokespy
- Cara Membuat Link Download dari MediaFire
- Cara Mendaftar Blog ke Dmoz
- Begini Cara Daftar Blog di Technorati
- Cara Claim Token Di Technorati
- Menyembunyikan Titel Blog Untuk Diganti Logo Di Header
- Membuat Header dan Menu Navigasi Tidak Bergerak (Tetap Diatas)
- Membuat Ruang Posting Blog Menjadi 2 Kolom Di Homepage
- Static Pages Blogger Bermasalah? Solusinya Begini
- Memasang Widget Cek No Resi JNE, TIKI, Pos Indonesia
- Membagi Elemen Postingan Blog Menjadi Dua Kolom Tanpa Edit HTML
- Cara Mengganti Template Baru di Blogspot
- Membuat Efek Marquee di Blogspot
- Cara Membuat Tabel dan Thumbnail di Postingan Blog
- Cara Membuat Artikel Terbaru Dengan Thumbnail di Blogspot
- Membuat Related Posts Dengan Thumbnail di Bawah Postingan
- Cara Mengganti Warna Link di Blogspot
- Cara Memberi Tombol Scroll di Kotak Komentar Blog
- Cara Membuat Related Posts Super Cepat
- Cara Pasang Tombol Spoiler di Komentar Blogspot Versi 2
- Cara Memasang Google Translate di Blog
- Cara Membuat Blockquote di Postingan Blog
- Inilah Widget Random Post Fast Loading Plus Thumbnail
- Merubah Tampilan Blog Yang Berbeda Pada Homepage dan Halaman Posting
