Cara Menambah Satu Kolom Sidebar Kiri di Blogger
January 14, 2017
Cara membuat, memasang, atau menambah satu kolom tambahan di sidebar kiri (left-sidebar) di Blogger sangat mudah. Tinggal memasukkan kode CSS, HTML, dan elemen widget di layout untuk kontennya atau isinya.
Berikut ini contoh sidebar kiri blogger yang ditambahkan di template dua kolom, sehingga menjadi tiga kolom --sidebar kiri, main area atau area utama (blog post, main area/main wrapper), dan sidebar kanan.
Cara Menambah Satu Kolom Sidebar Kiri di Blogger
1. Template > Edit HTML
2. Pasang Kode CSS berikut ini di atas kode ]]></b:skin> atau </style>
Catatan:
- Ukuran sidebar kiri di atas 160pixel, bisa diubah.
- Ubah juga ukuran kode main-wrapper template, dengan dikurang ukuran sidebar yang baru dikurangi lagi padding dan margin.
3. Pasang Kode HTML sidebar kiri berikut ini di atas kode <div id='content-wrapper'> atau <div id='main-wrapper'> atau <div class='content-wrapper'> atau <div class='main-wrapper'>
4. Save!
Saatnya mengisi kontennya.
Demikian sekadar menyimpan catatan kalo mau tambah sidebar kiri blog. Tentu, ini untuk blog yang menggunakan template bukan bawaan blogger, karena kalo template bawaan blogger mah bisa diatur dan dipilih otomatis jumlah sidebarnya.
Good Luck & Happy Blogging! (www.contohblog.com).*
Berikut ini contoh sidebar kiri blogger yang ditambahkan di template dua kolom, sehingga menjadi tiga kolom --sidebar kiri, main area atau area utama (blog post, main area/main wrapper), dan sidebar kanan.
Cara Menambah Satu Kolom Sidebar Kiri di Blogger
1. Template > Edit HTML
2. Pasang Kode CSS berikut ini di atas kode ]]></b:skin> atau </style>
#sidebarleft-wrapper {
width: 160px;
float: left;
word-wrap: break-word;
overflow: hidden;
padding: 15px 10px 15px 25px;
background: #fff;
color: #666;}
#sidebarleft-wrapper li{border-bottom: 1px solid #f9f9f9;
padding: 0 0 3px 0;
margin: 0 0 3px 0;}
#sidebarleft-wrapper a:link,#sidebarleft-wrapper a:visited{color:#555}
#sidebarleft-wrapper a:hover {color:#c00}
#sidebarleft-wrapper h2 {
font-size: 120%;
color: #c00;
padding: 5px 0;
margin: 0 auto;}
@media screen and (max-width:600px){
#sidebarleft-wrapper {display:none}
}
Catatan:
- Ukuran sidebar kiri di atas 160pixel, bisa diubah.
- Ubah juga ukuran kode main-wrapper template, dengan dikurang ukuran sidebar yang baru dikurangi lagi padding dan margin.
3. Pasang Kode HTML sidebar kiri berikut ini di atas kode <div id='content-wrapper'> atau <div id='main-wrapper'> atau <div class='content-wrapper'> atau <div class='main-wrapper'>
<div id='sidebarleft-wrapper'>
<b:section class='sidebarleft' id='sidebarleft' preferred='yes'/>
</div>
4. Save!
Saatnya mengisi kontennya.
- Klik Layout
- Refresh (Tekan F5) untuk memastikan elemen sidebar kiri sudah muncul di layout dashbloard blogger Anda.
- Klik Add a Gadget dan pilih widget yang akan dimunculkan di sidebar kiri blog Anda yang baru saja dibuat.
Demikian sekadar menyimpan catatan kalo mau tambah sidebar kiri blog. Tentu, ini untuk blog yang menggunakan template bukan bawaan blogger, karena kalo template bawaan blogger mah bisa diatur dan dipilih otomatis jumlah sidebarnya.
Good Luck & Happy Blogging! (www.contohblog.com).*
Previous
« Prev Post
« Prev Post
Next
Next Post »
Next Post »
menu tab seperti ini tapi menunya di samping kiri mas, ada tutorialnya gak ya :)
ReplyDeleteBanyak, silakan cek:
Deletehttps://www.contohblog.com/search?q=sidebar+tab
bang admin ada wa ga ya...postingannya bagus-bagus. saya mau tanya cara menambah widget yang dapat menampilkan postingan menurut label/kategori. gimana ya caranya
ReplyDeletemaaf mas, di laptop oke mas, saya buka di ponsel sidebar left nya gak tampil mas, harus tambah kode kah ? , makasih
ReplyDeleteKalau di HP memang disembunyikan, nanti nutupin area konten dong. Ini kodenya: #sidebarleft-wrapper {display:none}
DeleteKalau mau dimunculkan, ubah jadi display:block