Kolom sidebar merupakan hal yang paling peting guna mempercantik tampilan blog atau memasang internal link seperti populer post, recent post dan lain sebagainya dengan mudah. Nah untuk membuat atau menambah kolom sidebar di sebelah kiri (left-sidebar) pada Blogger sangatlah mudah. Anda hanya perlu menambahkan kode CSS, HTML, dan elemen widget pada layout untuk kontennya atau isinya. Berikut dibawah ini langkah-langkah untuk membuat sidebar disebelah kiri pada blogger.
1. Pertama-tama masuk akun Blogger anda lalu pilih Template > Edit HTML
2. Setelah itu pasang kode CSS dibawah ini tepat berada di atas kode ]]></b:skin> atau </style>
.#sidebarleft-wrapper {
width: 170px;
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}
}
width: 170px;
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}
}
Note:
- Tulisan atau angka (170px) yang berwana biru itu merupakan ukuran sidebar, anda boleh mengubahnya sesuai dengan ukuran ukuran blog.
- Ubah juga ukuran sidebar-wrapper pada bagian Margin dan Pandding sesuai keinginan (boleh dikurangi atau ditambah).
3. Setelah itu pasang kode HTML berikut ini tepat sebelum kode <div class='content-wrapper'> atau <div id='content-wrapper'> atau <div class='main-wrapper'> atau <div id='main-wrapper'>.
<div id='sidebarleft-wrapper'>
<b:section class='sidebarleft' id='sidebarleft' preferred='yes'/>
</div>
<b:section class='sidebarleft' id='sidebarleft' preferred='yes'/>
</div>
4. Kalau sudah seilahkan Save Template.
Nah untuk Untuk mengisi atau menambahkan Link Internal pada sidebar kiri caranya cukup mudah anda tinggal ikuti langkah-langkah dibawah ini.
- Pilih Tata Letak atau Layout pada Menu Blogger
- Setelah itu pilih Add a Gadget pada sidebar kiri, nanti akan muncul Popup, anda tinggal pilih saja akan menambahkan populer post atau yang lainnya.