Selamat pagi dan selamat beraktifitas, saya akan berbasa-basi terlebih dahulu tentang tulisan saya kali ini. Posting kali ini akan membahas cara untuk membuat tampilan berbeda-beda pada blog sobat saat tampilan home dengan tampilan saat kita berada di halaman posting artikel. Yang saya pakai bukan menggunakan inline style menggunakan
<style> Css </style> yang ditanamkan di dalam edit html posting. Yang saya gunakan adalah Tag conditional
<b:if>.
Langsung saja coba simpan kode berikut di atas kode
</head>:
<!-- kondisi home -->
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<style type='text/css'>
.contoh {
background: #ffffff;
}
body {
background: #000000;
}
</style>
<script type='text/javascript'> var thumbnail_mode = "no-float" ; summary_noimg = 350; summary_img = 400; img_thumb_height =0; img_thumb_width =0; </script>
</b:if>
</b:if>
<!-- /kondisi home -->
Keterangan:
- Yang berwana orange Itu adalah Tag conditional tampilan saat di home saya biasa pakai jika menyimpan scipt jquery yang saya gunakan jika hanya akan dipanggil saat di home saja sekedar contoh jika ingin menyisipkan java script pada tag conditional saat di home tsb.
- Yang berwarna biru adalah css yang diinginkan tinggal ganti sesuai keinginan tidak digunakan jg tidak apa-apa jika sudah ada css nya pada template, kalau saya biasa menggunakannya jika ada Sidebar gadget yang tidak ingin saya tampilkan saat di home menggunakan css display:none.
Nah yang kedua Tag conditional untuk menyimpan style atau java script yang diingnkan saat di halaman Posting artikel.
Simpan tag conditional berikut diatas kode
</head> :
<!-- kondisi artikel pada halaman posting -->
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
body {
background: #3a78ae url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhf8LO2roebv1PIPq5ANgAWIFHermD6WCXU_kK8xGL6b-Re0XLNPEPvMrn67bqCCS3n262zMkG38Zjx5V3tJcmJDYThb1R3lTedBjre-y8QvChgCsdBrxVLOaHFzDlU_gB5eaXhHwUBwRYn/s1600/pattern3.png) repeat;
}
#sidebar-wrapper {
display: none;
}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(".tombol-komentar").click(function(){
$("#komentardisqus").slideToggle("slow");
$(this).toggleClass("active");
return false;
});
});
</script>
</b:if>
<!-- /kondisi artikel pada halaman posting -->
Keterangan
- Yang berwarna Biru dan Orange hapus ataupun ganti sesuai kebutuhan, itu sekedar contoh jika ingin menyimpan java script atau css saja.
Selesai, semoga bermanfaat dan bisa dikembangkan.
Title : Membuat tampilan berbeda pada halaman blog
Description : Selamat pagi dan selamat beraktifitas, saya akan berbasa-basi terlebih dahulu tentang tulisan saya kali ini. Posting kali ini akan membahas...