Cara Menciptakan Gadget / Element Baru Sidebar di Sebelah Kanan Atas Blog
Bismillah - yang akan kita ciptakan ini sob,hanyalah sekedar kreasi bagi kamu yang kesulitan membuat sidebar sendiri disebelah kanan blogger template satu kolom.
Seperti posting beberapa minggu lalu gan,kami pernah share dan mereferensikan blogger template satu kolom,yang mana template ini tidak memiliki sidebar (namanya jg satu kolom beg* pent-)
Masih ingat ga sob saat beberapa waktu lalu di blog ini memposting tentang cara menambah element baru dan membuat sidebar berada dikanan dan kiri posting? Nah,teknik yang kita gunakan kali ini kira-kira akan mirip seperti itu.
Bingung? yuk ikuti saya (bawa obor....awas aada ular...pelan...hati-hati gan,tar kepleset...gelap soalnya..)
Langkah dan Cara Membuat Sidebar Blog Sendiri
Sebagai ilustrasi,sengaja kami share dengan media gambar,biar ga jlimet geto :D
Saat template satu kolom yang saya miliki dilihat dari view 'Rancangan / Design' maka akan tampil seperti ini:
Lihat Gambar Lebih Besar Klik disini
Sekarang,sobat klik 'EDIT HTML' seperti yang diyunjukkan pada gambar dibawah ini:
Lihat Gambar Lebih Besar Klik disini
Setelah itu,sobat cari kode / barisan css berikut (gunakan Ctrl+F di keyboard untuk mempermudah pencarian)
#outer-wrapper {Nah,nanti barisan kode css ditemplate sobat akan tampak seperti ini,yah meskipun ga persis (meskipun satu kolom khan beda template :D) :
Lihat Gambar Lebih Besar Klik disini
**dalam gambar ada 3 kode angka yang saya beri tanda lingkaran,dari ketiga angka tersebut harus sama,#header ,#outer-wrapper dan untuk #footer.
Nah,lanjut ya,tepat dibawah barisan kode
#outer-wrapper { misal template milik saya barisan #outer-wrapper { tampil seperti ini:#outer-wrapper {
margin: 0px auto;
width:500px;
background:white url() top left repeat-y;
}letakkan kode barisan css sidebar baru kita berikut setelah barisan kode tadi:
#sidebar-wrapper {
width: 220px;
float: right;
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 */
}Nah,ingat meletakkannya juga harus benar ya gan,kurang lebih nanti akan tampil seperti ini:
Lihat Gambar Lebih Besar Klik disini
Setelah itu,cobat cari kode
<body> (gunakan Ctrl+F di keyboard untuk mempermudah pencarian)
Lihat Gambar Lebih Besar Klik disini
Setelah sobat menemukan kode
<body> letakkan persis dibawahnya kode ini:<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' maxwidget='2' showaddelement='yes' preferred='yes'/>
</div>Jika sobat meletakkannya benar maka akan tampak seperti ini:
Lihat Gambar Lebih Besar Klik disini
Kode inilah yang akan tampil dimana saja kita inginkan keberadaannya,jika sobat ingin meletakkan widget ini difooter,header dan lain sebagainya,sobat cari sendiri tempatnya ya (Insya Allah kita akan bahas nanti)
Lanjut ya,setelah sobat terapkan langkah-langkah diatas,simpan template sobat dan lihat pada tab 'Rancangan / Design' dan TADA!!!!! maka nanti akan tampil seperti ini:
Lihat Gambar Lebih Besar Klik disini
Nah,widget di ujung sebelah kanan atas blog ini sangat tepat jika digunakan untuk fitur serach,profil,dll,untuk contoh fisiknya sobat lihat saja di SINI
Sekarang dari template sobat satu kolom,sobat sudah bisa ciptakan sidebar sendiri khan? Selamat berkreasi dan semoga berhasil ya gan! see you:D
Tidak ada komentar:
Posting Komentar