Label
Diposting oleh

CSS Khusus Halaman Yang Sedang Dikunjungi - Menubar

CSS Khusus Highlight Current Menu - Sudah lama sekali di blog ini pernah di posting effect serupa, kalau nggak salah dulu tulisan dari Kang Deny OBLO. Modifikasi ini memungkinkan tombol pada menu bar untuk halaman yang sedang dikunjungi berbeda gaya. Jadi, ya menimbulkan kesan berbeda saja, sehingga orang sadar di mana dia berada di blog kita. Untuk lebih mudahnya lihat saja gambar:


Seperti pada gambar. Di blog ini misalnya, ketika Anda berada pada halaman hasil cari, maka otomatis tombol Search akan berwarna biru, dan saya tambahkan css yang men-disable tombol tersebut agar tidak bisa di klik. Begitu juga pada halaman-halaman lain. Coba klik menu-menu pada bagian bawah (pemula, info, testimony, dll) yang semuanya terintegrasi dengan CSS highlight current menubar.

Cara lama yang dulu pernah saya posting adalah dengan memanfaatkan rumus kondisional (baca: Penampilan Widget Tertentu Pada Halaman Tertentu), dan kali ini sedikit lebih simple, karena kita hanya bermain sedikit HTML dan CSS.

1. Tambahkan Class Pada <li> Menubar Anda

Misalkan beberapa baris kode menubar Anda:
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact Us</a></li>


tambahkan class pada <li> menjadi:
<li class="homepage"><a href="#">Home</a></li>
<li class="aboutpage"><a href="#">About</a></li>
<li class="contactpage"><a href="#">Contact</a></li>

- Class harus unik dan berbeda untuk masing-masing menu.
- # adalah alamat laman/postingan

2. Tambahkan Id Pada Halaman-halaman

Karena tidak menggunakan rumus kondisional pada template, maka kita tambahkan ID khusus pada postingannya langsung. Edit saja laman About Anda kemudian pada mode pengeposan HTML, tambahkan kode berikut ini di barisan paling bawah.

<body id="aboutpage">

Begitu juga untuk halaman lain, berikan id khusus. Misal Pada halaman contact maka,
<body id="contactpage">

3.Tambahkan CSS Khusus Pada Template

Langkah terakhir adalah dengan menambahkan CSS khusus pada template. Letakkan CSS berikut ini di atas ]]></b:skin>
#homepage .homepage, #contactpage .contactpage, #aboutpage .aboutpage {
background:#4C77B6;
pointer-events: none;
cursor: default;}

- Yang didahului # adalah id halaman, yang didahului . adalah class <li>
- Pointer-events: none; adalah CSS untuk mematikan pointer. Jadi link tidak bisa di klik.

Kemudian SAVE Template Anda.

4. Kondisional Home Page

Sampai langkah ketiga, maka effect hihglight current sudah akan bekerja untuk masing-masing postingan yang di atur, namun tidak akan bekerja untuk homepage. Agar pada homepage juga bekerja, tambahkan kode berikut ini di atas </head>
<b:if cond='data:blog.url == data:blog.homepageUrl'><body id='home'/></b:if>

Simpan Template. Semoga bermanfaat.

Item Info: Highlight Current Menu
Label:

Komentar

  1. Kang Kapuk22 Agustus 2013 pukul 16.36

    Unik mBah.....Juoss...
    Lebih unik lagi kalau artikel, text-align biarkan apa adanya, bukan justify

    BalasHapus
  2. Teknik Dasar Listrik8 November 2013 pukul 16.24

    lanjutkan !!!!!!!!!!!!

    BalasHapus
  3. Anonim15 Februari 2014 pukul 14.07

    keren triknya, sudah saya pasang....makasih

    BalasHapus
  4. rN6 April 2014 pukul 03.26

    bos cara masang ya cemana tu... gue kan baru buat,

    BalasHapus
  5. Puji-BabyM14 Juni 2014 pukul 22.46

    Terima kasih buwat info nya,,,meskipun masih bingung saya, soalnya blog saya baru, mampir y?biar bisa kasih saran kalau teman-teman ada waktu.
    Sekali lagi Terima kasih.

    BalasHapus

Posting Komentar

Postingan Populer