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.
