Membuat Tampilan Homepage Dan Halaman Posting Berbeda

Situseo Blog : Merubah design tampilan homepage berbeda dengan halaman posting, melihat tampilan blog sendiri dengan tampilan yang monoton kadang membosankan, dengan sedikit perubahan akan bisa menghasilkan tampilan yang lebih hidup, perubahan yang dimaksud adalah membuat beda antara tampilan homepage dengan tampilan halaman postingan.

Sebagai contoh kita akan merubah tampilan posisi ruang post, diasumsikan posisi ruang post berada disebelah kanan (default) baik itu pada tampilan halaman homepage maupun pada tampilan halaman posting, untuk membedakan tampilan homepage dengan tampilan halaman posting kita akan merubah posisi ruang post menjadi berada disebelah kiri, dengan kata lain tampilan ruang post berada pada sebelah kanan pada tampilan halaman homepage dan waktu masuk pada halaman posting, tampilan ruang post berada disebelah kiri, sebagai contoh coba masuk ke halaman homepage blog ini.

Untuk menjadikan tampilan tersebut berubah, kita harus mengetahui kode css bagian ruang post yang memberi perintah posisi ruang post tersebut, perhatikan kode css dibawah ini :

#main-wrapper {
float:right;
}

kode tersebut diatas menunjukan bahwa posisi ruang post menunjukan berada disebelah kanan.

#main-wrapper { menunjukan keterangan untuk ruang post, float:right; menunjukan posisi ruang post berada disebelah kanan (default template), mungkin pada template kalian berbeda untuk penamaan #main-wrapper {, kalian sesuaikan saja namanya dengan template yang dipergunakan.

Setelah mengetahui kode css untuk bagian ruang post (seperti contoh diatas), untuk menampilkan posisi ruang post berada disebelah kanan pada halaman homepage dan posisi ruang post berada disebelah kiri pada halaman postingan, kita harus menambahkan kode perintah :

<b:if cond='data:blog.pageType == "item"'>
Widget Kalian Disini
</b:if>

Kode HTML tersebut merupakan kode perintah untuk menampilkan hanya pada halaman postingan, kode perintah html tersebut akan kita tujukan kepada kode css diatas, kode css tidak bisa disatukan secara langsung dengan kode HTML, kita harus merubah kode css tersebut dengan style HTML dengan menambah kode seperi ini :

<style type='text/css'>
Kode CSS
</style>

Setelah mengetahui kode-kode yang akan dipergunakan dan mengetahui kode bagian css yang akan dirubah, langkah selanjutnya adalah meletakan kode-kode tersebut pada tempatnya, kode css yang akan dirubah adalah ini :

#main-wrapper {
float:right;
}

kode tersebut diatas (pada template kalian) copy saja (yang ada pada template utama jangan dirubah), letakan (paste) diantara kode html dan rubah menjadi seperti ini :

<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>

#main-wrapper {
float:left;
}

</style>
</b:if>

dan letakan diatas kode </head>, save template kalian.

Kalian cukup menambah kode yang diletakan diatas kode </head> saja tanpa merubah kode css lainnya. Secara otomatis biasanya jika ruang post disebelah kanan maka sidebar disebelah kiri, jika kita melakukan perubahan pada ruang post saja (jadi sebelah kiri) maka sidebar akan berubah tempat menjadi sebalah kanan, jika ini tidak berhasil maka kalian harus merubah juga posisi sidebarnya dengan menambahkan kode posisi sidebar seperti ini :

<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>

#main-wrapper {
float:left;
}
#sidebar-wrapper {
float:right;
}

</style>
</b:if>

Semoga dengan memahami ini, tiap halaman kalian bisa berbeda-beda tampilannya. Cara ini berlaku juga untuk semua bagian css, baik itu header, footer, background, ukuran, warna dll, selain hanya menampilkan pada halaman postingan masih ada cara menampilkan atau menyembunyikan pada halaman-halaman lainnya, untuk mengetahuinya bisa membacanya pada judul Menampilkan dan menyembunyikan widget pada halaman tertentu.

Semoga bermanfaat,