Di awal postingan ini saya mempersilahkan Anda mengunjungi Lesehan Wae: Forum Blogger Tanya Jawab, dan cobalah diam beberapa saaat disana. Apa yang Anda dapatkan? Sebuah komunitas blogger, adanya interkasi bertanya suatu hal dan beberapa blogger segera menjawab. Itu tentu sudah pasti, namun jika kita lihat dari sisi penampilan, banyak blogger yang bertanya, "Bagaimana membuat halaman postingan itu penuh? sedangkan sidebar hilang..."
Sebenarnya setiap kali ada yang bertanya saya sudah selalu mengarahkan mereka ke cara Membuat Header Berbeda Untuk Postingan Tertentu, namun masih banyak yang belum bisa mengerti. Baiklah akan saya bahas ulang dan semoga bisa ditangkap karena pada dasarnya cara kerjanya sama saja. Agar lebih jelas saya terangkan dahulu bagian-bagian kode dan cara penerapan di list akhir.
Ada Dua CSS
Seperti pada postingan terdahulu, jika kita menggunakan trik ini maka akan ada 2 css untuk satu id widget atau section. Yang pertama dipanggil tanpa syarat dalam keadaan umum. Yang kedua adalah dipanggil untuk syarat tertentu saja, dalam hal ini kita memberikan syarat untuk alamat postingan yang kita tentukan. Yang perlu diperhatikan ketika kita nanti menambah css jangan hilangkan css asli.
Lebar Area Postingan
Untuk mengatur lebar area postingan Anda harus mengetahui kodenya terlebih dahulu. Pada umumnya memiliki kode main-wrapper. Nah, yang perlu Anda ketahui, main-wrapper ini berada pada bagian outer-wrapper atau bisa hanya dengan kode wrap saja yang istilahnya sebagai wadah/nampan bagian-bagian template yang terdiri dari main wrapper dan sidebar. Oleh karena itu main-wrapper tidak boleh lebih lebar dari outer-wrapper. Saya misalkan kode-kode dari template minima. Jika pada bagian css ada titik-titik itu berarti kode css lain yang tidak saya tuliskan. Dalam hal ini yang saya sertakan adalah dalam hal lebar saja (berkode: width)
CSS Outer
#outer-wrapper {
width: 660px;
...............................
}
CSS Main-wrapper
#main-wrapper {
width: 410px;
...............................
}
Nah, pada kode di atas lebar main-wrapper adalah 410px, lebih kecil dari lebar nampannya yakni 660px. Bukankah masih ada sisa? Ya kita pastikan sisa lebar itu adalah milik sidebar. Jika kita tulis cssnya
#sidebar-wrapper {
width: 220px;
..............................
}
Jadi lebar area sidebar (220) ditambah area postingan (410) adalah 630px, masih lebih kecil dari batas yakni 660px. Sisa 30 px adalah untuk margin, yakni jarak antara tepi kiri dengan area postingan, jarak area postingan dengan sidebar dan jarak area sidebar dengan tepi kanan.
Nah, intinya ketika nantinya Anda ingin membuat lebar area postingan penuh maka dalam penentuan css Anda tidak boleh lebih lebar dari area wadahnya. Jika misal area outer-wrapper adalah 660px, maka sebaiknya Anda memberikan angka 640px untuk lebar pada postingan tertentu. Karena untuk pengaturan warna, garis dan lain-lain dibuat sama hanya ada efek melebar saja kita hanya membuat kode css lebar nantinya untuk postingan tertentu. Id Section sama hanya penempatan yang berbeda.
Misalkan kita tulis seperti ini:
#main-wrapper {
width: 640px;
}
Menghilangkan Sidebar
Karena jatah area wadah yang 660 px sudah diambil 640 px oleh area postingan, otomatis maka sidebar area tidak kebagian tempat dan akan jatuh ke bawah. Sekarang tugsa Anda adalah menghilangkannya. Seperti biasa kita gunakan kode display: none untuk menghilangkan suatu item. Jika tadi kita akan menambahkan satu css lagi untuk id area postingan, maka sekarangpun akan ada satu lagi css untuk id area sidebar yang nantinya anya dipanggil untuk postingan tertentu.
Penulisan css untuk menghilangkan sidebar:
#sidebar-wrapper {
display: none;
}
Penerapan: Pembuatan Area Postingan Penuh dan Penghilangan Sidebar
Jika Anda sudah memahami penjabaran di atas, mari ktia lakukan penerapan langsung.
1. Login ke blogger
2. Tata Letak
3. Edit HTML
4. Cari kode </head>
5. Letakkan kode berikut ini di atas </head>
<b:if cond='data:blog.url == "http://urlpostingananda.com/urlpostingananda.html"'>
<style>
.sidebar{
display: none !important;
}
#main-wrapper, .post {
width: 640px;
}
</style>
</b:if>
Ganti yang berwarna merah pertama dengan alamat postingan yang ingin Anda buat penuh area postingannya dan hilangkan sidebarnya. Ganti warna merah kedua dengan lebar yang telah Anda perhitungkan. Semoga bermanfaat......
Kembali lagi ke blog trik, setelah membahas beberapa hal mengenai error shoutmix, dan static page di blogspot, juga info mengenai perpanjangan .co.cc gratis, kini saaatnya saya memberikan trik kepada Ada, bagaimana membuat header yang berbeda untuk postingan tertentu. Seperti biasa, agar lebih mudah silahkan lihat contoh dengan klik, Forum: Lesehan Wae. Perhatikan bagian artikel forum tersebut, bagian header berubah dari header bertulisakan Mas Doyok, menjadi Lesehan Wae.
Header Berbeda pada Tiap Postingan
Bagaimana bisa terjadi? Mudah saja, itu memang dua gambar yang berbeda. Dan saya hanya memanggil gambar bertema Lesehan Wae untuk postingan tertentu.
Untuk membuatnya Anda ikuti tutorial berikut ini,
1. Temukan CSS Header Anda
Anda harus bisa menentukan mana yang merupakan kode css untuk header Anda. Kodenya akan mirip seperti ini:
#header-wrapper{
..............................
..........................
............................
background: url (alamatgambaranda);
}
Namun kode di atas bukan harga mati, bisa saja Anda menggunakan template yang gambar kepala masuk dalam body seperti template saya. Intinya temukan kode untuk gambar kepala Anda.
2. Aplikasi Header Hanya Untuk Postingan Tertentu
Masukkan kode berikut ini di atas </head>
<b:if cond='data:blog.url == "http://urlpostingananda.com/urlpostingananda.html"'>
<style>
#header-wrapper{
..............................
..........................
background: url (alamatgambaranda);
}
</style>
</b:if>
Nah, isi kode berwarna merah pertama dengan alamat postingan Anda yang akan Anda rubah headernya.
Kode merah kedua adalah kode css untuk header Anda. Jadi sekarang, Anda mempunyai dua kode css header,yang pertama untuk umum dan yang baru saja Anda tambahkan hanya bekerja untuk postingan yang Anda tentukan.
Anda bisa melakukannya untuk hal-hal lain seperti sidebar dan bagian postingan Anda. Hanya butuh penyesuaian css saja. Semoga bermanfaat.
Permasalahan membuat Halaman Penuh
#1 Sidebar Id
Permasalah pertama hanyalah pada masalah sidebar ID. Mari kita lihat dulu kode pada tutorial sebelumnya tentang pembuatan halaman penuh tanpa sidebar. Kode berikut diinstruksikan untuk diletakkan di atas </head>
<b:if cond='data:blog.url == "http://urlpostingananda.com/urlpostingananda.html"'>
<style>
.sidebar {
display: none !important;
}
#main-wrapper, .post {
width: 640px;
}
</style>
</b:if>
Yang berwarna merah adalah class sidebar. Anda bisa menggantinya manual sesuai dengan model template Anda. Misalkan template Anda terdiri dari satu sidebar saja, maka secara umum sidebar id nya menggunakan sidebar-wrapper, sehingga kodenya:
#sidebar-wrapper {
display: none !important;
}
Beberapa template menggunakan beberapa model sidebar, seperti dua sidebar, atau bahkan ada yang memakai sidebar lebar di atas dan dua sidebar di bawah sidebar utama. Nah, caranya sama saja. Anda hanya perlu mengetahui Id Sidebar Anda (Id diawali pagar : #). Pisahkan antar id dengan koma. Kodenya menjadi seperti berikut ini:
#idsidebar1, #idsidebar2, #idsidebar3, #idsidebar4 {
display: none !important;
}
misalnya saja menjadi:
#sidebar-wrapper, #mid-sidebarleft, #mid-sidebarright, #sidebar-bottom {
display: none !important;
}
Jadi permasalahan utama soal ini Adalah Anda harus bisa menemukan id sidebar yang ingin dihilangkan.
#2 Kebingungan Menghilangkan Widget
Setelah menghilangkan sidebar, tentu semua widget pada sidebar akan ikut hilang. Namun banyak yang kebingungan bagaimana cara menghilangkan widget-widget di bawah postingan seperti tombol like button. Widget HTML yang ditambahkan langsung seperti tombol like facebook (baca: memasang tombol suka/like facebook) tidak mempunyai class selector atau id selector. Seperti disebutkan pada permasalahan 1, kita harus bisa menemukan id sidebar untuk menghilangkannya. Begitupun dengan widget. Lalu bagaimana jika widget tidak mempunyai id atau class? Jawabannya adalah kita beri sendiri.
Tambahkan css kosong misalnya seperti berikut ini di atas ]]></b:skin>
#hilangsaja {border: 0;}
Sekarang pada kode penghilangan sidebar tadi tambahkan id hilangsaja sehingga misal seperti berikut ini:
#sidebar-wrapper, #hilangsaja {
display: none !important;
}
Nah, kode di atas berarti semua widget yang memiliki id hilangsaja maka akan dihilangkan. Terakhir adalah memberikan id hilangsaja pada gadget yang akan dihilangkan. Caranya adalah mengapit kode widget yang akan dihilangkan, sehingga seperti berikut ini:
<div id="hilangsaja">
kode widget yang ingin dihilangkan disini
</div>
#3 Penentuan Halaman Tertentu
Pada postingan menjelaskan penghilangan sidebar pada halaman tertentu. Perhtaikan kode baris pertama:
<b:if cond='data:blog.url == "http://urlpostingananda.com/urlpostingananda.html"'>
Maka Anda diminta untuk mengganti yang berwarna merah dengan alamat postingan Anda yang ingin ditampilkan tanpa sidebar. Jika Anda ingin membuatnya di keseluruhan halaman postingan Anda, maka Anda cukup mengganti kode tersebut dengan
<b:if cond='data:blog.pageType == "item"'>
Untuk berbagai kustomisasi lain, misal kebalikannya dengan membuat pengaturan tanpa sidebar untuk halaman selain posting, untuk homepage saja, untuk static page saja atau sebagainya, baca daftar selected code lengkap di postingan: Penampilan Widget di Halaman Tertentu
Monday, August 29, 2011
Membuat Halaman Tanpa Sidebar
0 komentar:
Post a Comment