Highlight current page link widget Blog Archive.

Kisahnya macam ni. Lepas aku berjaya tambah widget Blog Archive jenis Hierarchy, aku perasan list entri dalam widget tu panjang. Bila aku bukak secara random entri aku (melalui labels, tags, search dsb), aku tercari-cari kedudukan entri aku tu dalam widget Blog Archive.

Baca juga

• Berjaya tukar jadi Hierarchy Blog Archive widget.

Makin banyak entri dalam sesuatu bulan, makin berpinar mata nak cari kedudukan sesuatu entri tu. Kena tengok satu-satu dalam list Blog Archive tu baru jumpa.

Mungkin sesetengah orang, tak kisah. Tapi bagi aku, aku nak ciri-ciri yang memudahkan aku tengok kedudukan entri tu. Bukan apa, senang nak tahu entri tu diterbitkan sebelum atau selepas entri apa. Setakat aku tahu, belum ada tutorial Blogger pasal ni.

Jadi, aku pun search lah serata Internet. Asalnya aku tak tahu apa keyword benda alah ni. Cari punya cari, jumpa jugak cara nak buatnya. Keyword nya adalah 'highlight'. Cara nak highlight link dalam widget Blog Archive untuk page yang kita tengah buka.

Aku jumpa code JavaScript dari portal EZ-Net University yang boleh buat ciri-ciri highlight ni:

<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>

<script>

$(function(){

  $('a').each(function() {

    if ($(this).prop('href') == window.location.href) {

      $(this).addClass('current');

    }

  });

});

</script>

Code ni aku taruk atas </head> dalam Edit HTML. Lepas tu, aku tambah code CSS bawah ni atas ]]></b:skin>.

#ArchiveList a.current {

background: ;

color: #93aaff;

}

Hasilnya, bila aku bukak mana-mana entri, akan ada highlight tajuk entri tu kat dalam widget Blog Archive. Highlight ni macam-macam jenis boleh buat sebenarnya. Setakat ni, aku ubah warna je. Kalau nak ubah jenis font, saiz font, bentuk font atau background tajuk entri tu pun boleh.

Nampak tak bezanya? Lepas aku tambah code, baru lah boleh nampak kedudukan entri yang aku tengah view atau baca dalam widget Blog Archive. Masa aku capture tu, aku tengah view entri Air gas Fanta dari Thailand. Lepas ni, senang sikit lah nak tengok sesuatu entri tu ada kat kedudukan mana. Tak payah dah nak scroll satu per satu.