Untuk tutorial blog kali ini saya akan berbagi mengenai tampilan blog yang berbeda antara halaman depan (homepage) dan halaman posting, dimana tampilan homepage blog ada 3 kolom dan jika klik salah satu postingan maka tampilan halaman posting blog berubah menjadi 2 kolom. Bagaimana bisa berbeda tampilan homepage dan tampilan halaman posting? Untuk membuat halaman posting dan halaman depan blog berbeda diperlukan tag conditional. Seperti yang pernah saya jelaskan pada postingan sebelumnya mengenai cara meletakkan widget pada halaman tertentu dan caranya juga sama dengan yang akan saya bahas pada tutorial kali ini, dimana widget bisa kita pindahkan / ditampilkan pada halaman yang diinginkan.
Anda dapat melihat pada contoh gambar dibawah ini mengenai tampilan blog di halaman home (depan) berbeda dengan tampilan blog di halaman posting.
Bagaimana cara merubah homepage berbeda dengan halaman posting? Yang perlu anda perhatikan yaitu tempat posting dan biasanya kodenya menggunakan main-wrapper dan widget menggunakan kode sidebar-wrapper, contoh kode script seperti ini :
#main-wrapper{padding-left:10px;width:350px;float:left;word-wrap:break-word;overflow:hidden}
#sidebar-wrapper1{width:310px;float:right;word-wrap:break-word;overflow:hidden}
#sidebar-wrapper2 {width: 310px;float: left;padding-left:5px;word-wrap: break-word;overflow: hidden;}
Dan tampilan gambarnya seperti dibawah ini
Gambar 1 : Tampilan di Halaman Depan (Homepage)
Keterangan :
- Angka 350px menunjukkan lebar tempat posting
- Angka 310px menunjukkan lebar sidebar
Sudah paham dengan gambar diatas? Begini : pada gambar diatas dimana tampilan blog pada halaman depan masih 3 kolom yaitu tempat postingan (350px), sidebar kiri (310px) dan sidebar kanan (310px) dan nantinya akan dirubah menjadi 2 kolom yaitu tempat posting yang makin lebar dan sidebar kanan sedangkan sidebar kiri akan disembunyikan.
Sekarang sidebar-wrapper2 (tempat widget di sidebar kiri) akan disembunyikan dan main-wrapper (tempat postingan) akan dilebarkan menjadi 655px, seperti gambar dibawah ini :
Gambar 2 : Tampilan di Halaman Posting
Cara merubahnya :
1. Cari kode
]]></b:skin> dan letakkan kode berikut dibawahnya<style type='text/css'>
<b:if cond='data:blog.pageType != "item"'>
#sidebar-wrapper2
#main-wrapper {width:350px;}
</b:if>
</style>
<style type='text/css'>
<b:if cond='data:blog.pageType == "item"'>
#sidebar-wrapper2 {display:none}
#main-wrapper {width:655px;}
</b:if>
</style>
Keterangan :
1. Kode <b:if cond='data:blog.pageType != "item"'> dan </b:if> mempunyai arti kalau "Widget akan tampil di semua halaman kecuali halaman posting"
2. Kode <b:if cond='data:blog.pageType == "item"'> dan </b:if> mempunyai arti kalau "Widget hanya tampil di halaman posting"
Begitulah cara merubah tampilan homepage berbeda dengan tampilan halaman posting, semoga bermanfaat.
