Menandai Komentar Baru Memanfaatkan Hash Url / CSS Target

TricksId

Merupakan sebuah blog pribadi tempat Saya berbagi mengenai tips seputar blogger dan template khusus blogger.

Mudah-mudahan kedepannya blog ini dapat memberikan kontribusi serta informasi bermanfaat bagi Anda semua. Terima kasih.

Soundcloud

Menandai komentar baru yang saya maksud dalam postingan ini adalah memberikan efek berbeda ketika seseorang telah memberikan komentar pada blog kita kurang lebih seperti gambar di atas.

Demo

Teknik yang saya lakukan adalah dengan memanfaatkan hash pada URL (contoh url: http://www.....blog.html?showComment=1386771326769#c1999728388350040911), yaitu dengan menambahkan class selected pada elemen komentar yang memiliki id berdasarkan hash #c1999728388350040911 pada addresbar.
Perhatikan HTML item komentar di bawah ini..

<section class="comment-item clearfix">
    <div class="comment-section" id="c1999728388563535345">
        <div class="avatar-box pull-left">.....................................</div>
    </div>
</section>
<section class="comment-item clearfix">
// id yang sesuai dengan hash url comment
    <div class="comment-section selected" id="c1999728388350040911">
        <div class="avatar-box pull-left">.....................................</div>
    </div>
</section>

Cara Pertama Menandai Komentar Baru / Aktif

1. Tambahkan CSS

.selected {
    -webkit-transition:all 12.4s ease-out;
    transition:all 12.4s ease-out;
    background-color: #8941CC !important
}

2. Tambahkan Code ini di atas body

$(function () {
    var hash = window.location.href.split('#')[1];
// Menambahkan animasi Scroll.
    $('html,body').animate({
        scrollTop: $('#' + hash).offset().top - 10
    }, 5000);
// Menambahkan class selected.
    $('#' + hash).addClass('selected');
    return false;
});

Untuk pengguna threaded comments hack perlu diperlukan beberapa penyesuaian di html item komentarnya

Alternative lain menandai komentar baru hanya dengan CSS yaitu CSS:Target

Contoh penggunaan css target

div:target.comment-section {
    -webkit-transition:all 12.4s ease-out;
     transition:all 12.4s ease-out;
    background-color: #8941CC !important
}
/*Sesuaikan css yang ditandai dengan blog sobat.*/