Category : Labels: Blog Tutorial, Template, Tips Trik, Tutorial
Sejujurnya saya kesulitan dalam memilih judul yang sesuai untuk bahasan sharing kali ini agar kuat dalam SEO nya. Kali ini saya akan berbagi kepada sobat blogger sekalian khususnya pada sobat blogger pemula tentang bagaimana cara membuat elemen halaman di atas sidebar atau lebih seperti kotak biru pada gambar di bawah ini.
Setelah melakukan percobaan kecil di template blog ini dan dengan kemampuan yang pas-pasan akhirnya saya mampu mewujudkan apa yang saya inginkan (critanya memang lagi butuh tambahan elemen seperti itu...ehehehe.. 
) .
) .Menambahkan elemen halaman di atas sidebar sebernarnya caranya cukup sederhana. Memang sih kalau belum tahu memang terlihat susah sekali. Seperti yang saya alami. Soalnya saya pemula dalam dunia blogging. Baik kita mulai saja.
1. Pertama anda harus Login ke akun Blogger sobat. Setelah itu masuk ke Layout => Edit HTML.
2. Jangan mencentangi kotak kecil bertuliskan Expand Template Widget karena nanti akan muncul kode-kode yang bikin pusing kepala. Oh ya untuk berjaga- jaga sebaiknya sobat backup dulu templatenya dengan cara download templatenya.
3. Copy script di bawah ini
#sidebar-wrapper3 {
width: 350px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
width: 350px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
4. Lalu Cari script seperti
#sidebar-wrapper {
width: 165px;
float: $endSide;
word-wrap: break-word;
overflow: hidden;
}
width: 165px;
float: $endSide;
word-wrap: break-word;
overflow: hidden;
}
Biar mudah tekan tombol keyboard ctrl+f dan paste kan kode tersebut di kotak find /pencarian ( setiap template dapat berbeda, tapi intinya sama yaitu sidebar ). Dan letakkan atau paste kode yang ditunjuk di point ketiga di bawah kode tersebut.
5. Klik Simpan Perubahan
6. Lalu cari kode seperti <div id='sidebar-wrapper'> Setelah ketemu copy pastekan kode di bawah ini di atas kode <div id='sidebar-wrapper'> tersebut.
<div id='sidebar-wrapper3'>
<b:section class='sidebar' id='sidebar3' preferred='yes'>
</b:section>
</div>
<b:section class='sidebar' id='sidebar3' preferred='yes'>
</b:section>
</div>
7. Nah terakhir klik Simpan Perubahan atau Save Template dan lihat hasil kerja sobat di Page Element. Bila belum berhasil ulangi lagi dengan teliti. Kalau masih ada yang belum dimengerti juga silahkan lontarkan pertanyaan sobat lewat kotak komentar.
Catatan :
Bila sobat menginginkan letak elemen halaman di bawah sidebar, sobat tinggal memindahkan script di point keenam di bawah script di bawah ini
<div id='sidebar-wrapper'>
</b:section>
</div>
<div id='sidebar-wrapper'>
</b:section>
</div>
Angka yang ditulis merah dapat sobat ganti sesuai dengan keperluan sobat sendiri. Angka tersebut menunjukkan berapa lebar dari element halaman tersebut. Oh, ya saya ucapkan terimakasih kepada mas Doyok atas revisinya.
kala cuma di bawah sidebar-wrapper ntar rusak dong,
harusnya di abwah bagian sidebar wrapper komplit yang udah ditutup :)