Merubah Posisi Widget - Sidebar Main Pada Template Blog
Nah kali ini saya akan memberikan tips mudah yaitu cara merubah psisis widget blog atau main dan sidebar blog. Sebelumnya saya sangat penasaran kenapa theme yang saya gunakan ini sidebar utama ada di kanan dan sidebar main ada di kiri, padahal pembuat thme blog ini sidebar utma ada di sebelah kiri... Saya pun mencoba mengitak atik CCS di template blog ini dan ternya mudah sekali merubah posisi main dan sidebar utma atau sidebar post, saya cuma mengganti kode menjadi right atau left. Apakah Anda juga ingin mencobanya?
Contohnya :
Dan diubah menjadi seperti ini :
Untuk mengubahnya ikuti langkahnya berikut ini :
1. Log in di blogger dengan id anda untuk masuk ke akun dan mengedit blog anda. 2. Klik Tata Letak / Layout
3. Klik Edit HTML
4. Cari kode dibawah ini :
.datebarleft{ width:200px; float: $startSide; margin:0; padding:0;}
.datebarright{ width:150px; float:$endSide; margin:10px 0 0 0; padding:0; text-align:right; }
atau :
#main-wrapper {
width: 410px;
float: $startSide;
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 */
}
#sidebar-wrapper {
width: 220px;
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: 410px;
float: $startSide;
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 */
}
#sidebar-wrapper {
width: 220px;
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 */
}
5. Setelah ketemu ganti kode $startSide dengan right dan kode $endSide ganti left
Jadi kodenya seperti ini :
.datebarleft{ width:200px; float: right; margin:0; padding:0;}
.datebarright{ width:150px; float: left; margin:10px 0 0 0; padding:0; text-align:right; }
atau :
#main-wrapper {
width: 410px;
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 */
}
#sidebar-wrapper {
width: 220px;
float: left;
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: 410px;
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 */
}
#sidebar-wrapper {
width: 220px;
float: left;
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 */
}
6. Klik Save Template
NB : Mungkin setiap template Blog berbeda kode CCS-nya
Selamat mencobanya semoga berhasil!
Langganan:
Posting Komentar (Atom)
0 komentar:
Posting Komentar