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.


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.

Post a Comment

10 Comments

  1. Wahhh . Tenkiu share tutorial .. CCL bookmarks tuto nihh .. ada masa lapang CCL nak try ..

    ReplyDelete
  2. haaa...comel je nampak...senang sikit nak spot...tp tulah, linda bab2 nie, memang berpinau2 mata nak buat...sudahnya, bior je lah cenggitu...kikiki

    ReplyDelete
    Replies
    1. Saya bila ada masa terluang baru rajin. Kalau tak, bersawang lah blog ni. ๐Ÿ˜

      Delete
  3. ooo beza kat highlight tu...
    faham2

    ReplyDelete
  4. Saya pun kisah bab blog archive ni. Suka jenis macam ni. Senang nak tengok entry lama². Terima kasih share tutorialnya.

    ReplyDelete