Cara Menambahkan Elemen Sidebar Pada Template Blog

Bagi blogger, otak atik template blog memang menyenangkan terlebih lagi ketika melihat tampilan blog menjadi seperti apa yang diinginkan. Pada tulisan kali ini ada cara menambahkan elemen sidebar pada template blog dengan basic HTML.

Langsung saja ........

1. Masuk ke Blogger.com

2. Klik template dan kemudian klik Edit HTML

3. Cari kode #main-wrapper dan untuk mempercepat pencarian seperti biasa tekan CTRL + f, jika sudah muncul ketik atau copy paste kode diatas dan nanti akan terlihat hasilnya seperti pada gambar ini.

4. Tepat dibawah kode #main-wrapper ada kode " #sidebar-wrapper,#sidebar1-wrapper " beserta letak dan ukurannya.

5. Kemudian buat lagi kode sidebar tepat dibawahnya, untuk mempercepat cukup copy paste kode diatasnya lalu tingga diganti dari " #sidebar-wrapper,#sidebar2-wrapper " dan " #sidebar-wrapper,#sidebar3-wrapper " misal kita ingin menambahkan sampai 3 sidebar, sehingga seperti terlihat pada gambar.

6. Selanjutnya cari kode " <div id='sidebar1-wrapper'> " dan tambahkan kode dibawah ini tepat dibawah kode" </div> "

    <div id='sidebar2-wrapper'>
    <b:section class='sidebar' id='sidebar2' preferred='yes'>
    <b:widget id='HTML2' locked='false' title='bebas' type='HTML'/>
    </b:section>
    </div>

    <div id='sidebar3-wrapper'>
    <b:section class='sidebar' id='sidebar3' preferred='yes'>
    <b:widget id='HTML3' locked='false' title='bebas' type='HTML'/>
    </b:section>
    </div>

Sehingga menjadi

    <div id='sidebar1-wrapper'>
    <b:section class='sidebar' id='sidebar1' preferred='yes'>
    <b:widget id='HTML1' locked='false' title='contoh' type='HTML'/>
    </b:section>
    </div>

    <div id='sidebar2-wrapper'>
    <b:section class='sidebar' id='sidebar2' preferred='yes'>
    <b:widget id='HTML2' locked='false' title='bebas' type='HTML'/>
    </b:section>
    </div>

    <div id='sidebar3-wrapper'>
    <b:section class='sidebar' id='sidebar3' preferred='yes'>
    <b:widget id='HTML3' locked='false' title='bebas' type='HTML'/>
    </b:section>
    </div> 

7. Lalu klik pratinjau template untuk melihat hasil editan sebelum disimpan dan jika sudah sesuai silahkan klik simpan template.

Ada kemungkinan beda template beda beda cara tapi tidak ada salahnya dicoba.

Selamat mencoba.