Menu terlihat dan tidak terlihat

Trik ini permintaan dari Sahabat saya Hendrik (hendria.com), membuat menu hanya terlihat di Halaman Utama Blog, atau hanya terlihat di Halaman Posting.

---

Trik dengan kode CSS

Pertama anda harus tahu pemilih, id, atau class di kode HTML.
Contoh di kode HTML:

<div class="contoh1"><p>blablabla</p></div>

Kedua, sebaiknya membuka lembaran baru kode CSSnya yaitu :
dibawah ]]></b:skin>
........
diatas </head>
Contoh di kode CSS, dengan tampilan menu hanya terlihat di Halaman Posting :

<style type='text/css'>
<b:if cond='data:blog.pageType == "index"'>
.contoh{
display:none;
}
<b:else/>
</b:if>
</style>

<b:if cond='data:blog.pageType == "index"'>
kode CSS disini hanya terbaca di halaman utama blog. Contoh diatas berarti class="contoh1" dibuat menghilang di Halaman utama dengan kode CSS display:none;
<b:else/>
kode CSS disini hanya terbaca di halaman utama Posting. Contoh diatas kosong, jadi class="contoh1" akan terlihat di Halaman posting.
</b:if>

---

Trik di kode HTML

Sebenarnnya ini masih sama, tapi ditempatkan di kode HTML.
Contoh :

<b:if cond='data:blog.pageType == "index"'>
<b:else/>
<div class="contoh1"><p>blablabla</p></div>
</b:if>

Contoh diatas, membuat <div class="contoh1"> terlihat di Halaman Posting. Sebaliknya, jika anda menempatkan diatas <b:else/>

---

Jadi kesimpulannya adalah yang membuat hanya terlihat di Halaman utama atau hanya di Halaman Posting yaitu :

<b:if cond='data:blog.pageType == "index"'>
<b:else/>
</b:if>

atau

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

Dengan penjelasan :

<b:if cond='data:blog.pageType == "index"'>
Terlihat hanya di Halaman Utama
<b:else/>
Terlihat hanya di Halaman Posting
</b:if>

Semoga ilmu ini bermanfaat bagi anda...... 

Tags: #Blogger