Selo Aji

Tips Unik dan Menarik

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

Baca juga:

Tags:

0 komentar