Menghilangkan sidebar pada halaman posting

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.

1. Kode outer-wrapper, biasany dg kode outer-wrapper atau wrap saja.
2. Kode post. biasanya, biasany dg kode .post atau #post
3. Kode komentar, biasanya dg kode .comments atau #comments
4. 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;
}

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;
}

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

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>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <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 == &quot;http://URL POSTINGAN BLOG SOBAT.html&quot;'>
  

• 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.

Huuufzs.... Cape juga ya ternyata sodara-sodara..

So... Semoga Berhasil...

Source: http://www.girant31.co.cc

Penulis : ALSYA ~ Sebuah blog yang menyediakan berbagai macam informasi

Artikel Menghilangkan sidebar pada halaman posting ini dipublish oleh ALSYA pada hari . Semoga artikel ini dapat bermanfaat.Terimakasih atas kunjungan Anda silahkan tinggalkan komentar.sudah ada 1komentar: di postingan Menghilangkan sidebar pada halaman posting