Pada postingan ini,
Pertama saya mempersilahkan Anda untuk melihat disekeliling blog saya.. cobalah perhatikan beberapa saaat. Apa yang Anda dapatkan? Sebuah penampilan yang beda dari biasanya.. Betul???
KEREN GA ????
Lalu dimanakah si sidebar ???? si sidebar, si left sidebar, si right sidebar atau si sidebar baru... ada yang tau dimanakah mereka????
(Jawaban anda, saya tunggu hingga pukul 00:00 WIB. bagi yang tidak bisa menjawab, tidak boleh pulang.. hehe..)
Kembali ke laptop..
Sebenarnya ini adalah trik memanipulasi.. dimana si sidebar yang biasanya nangkring dihalaman utama, saya sembunyikan pada halaman postingan..
Juga memperlebar wadah postingan loh.. benar kan?? karena jatah ukuran pada sidebar yang umumnya selalu ada, kini dimakan semua oleh si postingan..
Masih belum mengerti???
Kita tinggalkan saja yg belum mengerti.. (Tega teh..)
Mengatur lebar Postingan :
Untuk mengatur lebar area postingan Anda harus mengetahui kodenya terlebih dahulu.
- Kode outer-wrapper, biasany dg kode outer-wrapper atau wrap saja.
- Kode post. biasanya, biasany dg kode .post atau #post
- Kode komentar, biasanya dg kode .comments atau #comments
- Kode blok komentar, biasany dg kode .comments-block atau #comments-block, untuk no 4 ini agar blok komentar menyesuaikan dengan wadah komentarnya.
CSS outer-wrapper :
#outer-wrapper {
width: 940px;
margin: 0 auto 0;
padding: 10px 0 0;
line-height: 18px;
}
CSS post :
.post {
float: left;
width: 579px;
margin: 0 0 10px;
padding: 10px;
}
CSS comments :
.comments {
float: left;
width: 579px;
margin: 0 0 10px;
padding: 10px;
}
CSS comments-blok :
#comments-block {
width: 530px;
float: left;
padding: 10px 0 0;
margin: 0 0 10px;
}
width: 940px;
margin: 0 auto 0;
padding: 10px 0 0;
line-height: 18px;
}
CSS post :
.post {
float: left;
width: 579px;
margin: 0 0 10px;
padding: 10px;
}
CSS comments :
.comments {
float: left;
width: 579px;
margin: 0 0 10px;
padding: 10px;
}
CSS comments-blok :
#comments-block {
width: 530px;
float: left;
padding: 10px 0 0;
margin: 0 0 10px;
}
Perhatikan CSS kode diatas !! Yang berwarna merah adalah ukuran dari masing2 variable.
Pada CSS outer-wrapper 940px, adalah ukuran penuh dari contoh outer-wrapper template blog saya. dipotong/dikurangi 579px ukuran lebar postingan blog saya.
Berapakah hasilnya ??? ada yg bisa menjawab lagi???? hehe..
Hasilnya adalah lebar dari si sidebar yg kita bahas diatas. jadi intinya lebar postingan diperlebar hampir menyamai lebar outer-wrapper.. ingat ga boleh sama, karena biasanya ada kode CSS untuk padding. jika lebar outer-wrappernya 940px, maka atur lebar postingan max 900px.
Sampai disini ada yg bertanya?? atau ada yg mengerti?? karena saya sudah mulai pusing sendiri neg.. 
Nah itu teh masih baru logikanya loh... (Ampuuuuuuuuuunn..)
Lantas bagaimana menghilangkan si sidebarnya???
Menghilangkan sidebar :
Karena jatah area wadah outer-wrapper yang 940px sudah diambil 900px oleh postingan, otomatis maka sidebar tidak kebagian tempat dan akan jatuh ke bawah. maka sidebar dinon-aktifkan sementara.
CSS meNon-aktifkan sidebar :
#sidebar{
display: none !important;
}
display: none !important;
}
Sekarang baru masuk ke intinya..
Jika sobat sudah faham dengan logika diatas, mari kita lanjutkan.. tapi jika belum, saya sarankan sobat mengacungkan tangan ditugu Monas.. hehee..
Langkah-langkahnya :
1. Login ke blogger
2. Tata Letak
3. Edit HTML
2. Tata Letak
3. Edit HTML
4. Download lenkap Template sobat terlebih dahulu. karena saya tidak akan menanggung apabila terjadi kerusakan pada template sobat nantinya (hehe..)
5. Cari kode </head>
6. Letakkan kode berikut ini di atas </head>
Huuufzs.... Cape juga ya ternyata sodara-sodara..5. Cari kode </head>
6. Letakkan kode berikut ini di atas </head>
<b:if cond='data:blog.pageType == "item"'>
<style>
#sidebar{
display: none !important;
}
.post {
width: 900px;
float:center;
}
.comments {
width: 900px;
float:center;
}
#comments-block {
width: 850px;
float: left;
</style>
</b:if>
- Kode berwarna pink ganti dan sesuaikan dengan lebar outer-wrapper blog sobat, lihat dulu lebar outer-wrapper blog sobat brapa.. untuk area post dan comments HARUS LEBIH KECIL dari lebar outer-wrapper blog sobat.
- dan untuk area comments-blog HARUS LEBIH KECIL dari area post dan comments sobat yg sudah ditentukan pada langkah diatas.
- Kode berwarna merah adalah kode untuk membuat semua postingan ga ada sidebarnya.
- Jika ingin ditampilkan pada halaman khusus saja, sobat bisa ganti kode berwarna merah dg kode ini :
<b:if cond='data:blog.url == "http://URL POSTINGAN BLOG SOBAT.html"'>
- Tentukan URL postingan sobat pada kode berwarna merah
- Simpan template
- Ngopi n Ngemil dulu sejenak
- Putar kepala ke kiri dan ke kanan
- Lalu lihat blog sobat.
So... Semoga Berhasil...
|
Title Posted By On Tag Comments Subscribe |
: Sorry.. Halaman Postingku ga ada Sidebarnya : Agus Adi S. From Girant_31 Blog : Kamis, April 15, 2010 : Css , Tips n Trik : 10 People Commented : RSS Feed or leave a response for this article, Here. |
Girant_31
My Picture
My Code
Contact
Chat Room
RSS Feeds
Twitter
Facebook
different then all, tapi saya :11
saya coba dulu ya pak
syukron.
Terimakasih dah berkunjung ke mari..
Bila ada kesusahan silahkan hub saya mas ege.. tp kalo mentok saya angkat tangan ya mas :21
salam kenal ^^
blognya bagus, tapi kok agak aneh iah...
hehehe :D
maap, cuma pendapat pit aja kok ^^
:23
Salam kenal jg mba..
gpp ko mba, justru pendapat dari org lain lah itu yg sebenarnya..
BTW.. Blog ku aneh gmn ya mba??
low penampilan, mang saya design seberbeda mungkin mba ma blogger lainya.. coz mlz az mba low segalanya ada yg nyamain or sama ma org lain..
gituu..
oy.. terimakasih ya mba dah sillaturrahmi kesini..
Terima kasih... :18
Terimakasih jg atas kunjungannya..
Lg kerja jd TKW mas... :21
templates-nya juga kueren abeeezzzz.....,
boleh gak ane minta resep buat bikin widget yg ini.... (post info, related post, comment, share, dll...) berada dalam satu widget....
tapi theme-nya pengen mirrrrriiiiip....rip...rip...rip... kayak yg ini... biar ane tinggal ganti warna doang nyesuain blog ane...
plissssssss..... :)