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>

Alhamdulillah

10 comments:


  1. wah suatu kehormatan bagi saya dijawab dengan artikel posting,aplikasinya sdh saya pasang kang.terima kasih banyak kang.

  2. karena terlalu panjang jadi saya posting saja bro... sama-sama bro...

  3. Terima kasih tutorialnya. Perlu dipraktikkan dulu agar lebih paham nih.

    Salam ukhuwah

  4. Terima Kasih Gan BeDa sudah berkunjung...

  5. tx ya buat infonya, nano...berarti bgt, walau banyak yang saya belum paham....tp pasti sy cb dl...

  6. sama-sama Kak...

  7. Halo Nano...
    Salam blogger Indonesia, salam kenal...
    langsung aja ya... minta tolong nih,
    saya mau gambar yang jika di-mouseover keluar teksnya di samping kanan gambar.
    lihat gambarnya di sini.
    template ini saya bikin lewat artisteer, lalu saya 'obok-obok' sedemikian rupa. saya ingin gambar icon itu berjajar mendatar. jika di-mouseover baru muncul teksnya, jika mouseout, kembali lagi icon doang. help me plz... thanks Nano.

  8. gambarnya di sini

  9. saya coba dulu ya bro...

  10. lihat disini bro...
    Navigation Icon dengan teks tersembunyi dan muncul

    Jika ada yang salah komentar lagi, buatnya buru-buru...

Posting Komentar


Creative Commons License
Menu terlihat dan tidak terlihat by Nano Yulianto is licensed under a Creative Commons Attribution 3.0 Unported License.
Based on a work at http://nanoyulianto.blogspot.com/2011/02/menu-terlihat-dan-tidak-terlihat.html.
Permissions beyond the scope of this license may be available at http://nanoyulianto.blogspot.com/.