Berkelana 86: Membuat tampilan berbeda pada halaman blog

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>:

<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>

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> :

<b:if cond='data:blog.pageType == "item"'>

<style type='text/css'>

body {

background: #3a78ae url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBjVrE73iBWTymebfdEdRjfR03s8tEUx8a940hxQZofOqBPdqWLxuAZjBb8elwLIqytmkohVpExrXhoxWUSxhfLWyk5BE1it1e4lsqLt5lzuZ8-lim8luf1NqjTeRSX53qd75aBGtZOCiv/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>