Rabu, 04 Juli 2012

Membuat / Menambahkan Sidebar Sendiri di Ujung Blog

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:

trik cara membuat sidebar blogspot.
Lihat Gambar Lebih Besar Klik disini


Sekarang,sobat klik 'EDIT HTML' seperti yang diyunjukkan pada gambar dibawah ini:

cara membuat sidebar blogger sendiri.
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) :

membuat sidebar sendiri.
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:

membuat sendiri sidebar.
Lihat Gambar Lebih Besar Klik disini


Setelah itu,cobat cari kode <body> (gunakan Ctrl+F di keyboard untuk mempermudah pencarian)

membuat sidebar blogger.
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:

blogger sidebar.
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:


sidebar blogger.
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