Ads Banner

Menandai Komentar Baru dengan Memanfaatkan Hash Url / CSS Target

Menandai Komentar Baru dengan Memanfaatkan Hash Url / CSS Target
Menandai Komentar Baru dengan Memanfaatkan Hash Url / CSS Target
Menandai Komentar Baru dengan Memanfaatkan Hash Url / CSS Target
Menandai Komentar Baru dengan Memanfaatkan Hash Url / CSS Target

Template Blog ini sudah diupdate. Mungkin terdapat sebagian demo yang tidak berfungsi pada blog ini, tapi admin menjamin bila diterapkan pada blog anda akan berfungsi

Info [K-moe] - 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.*/

Print/Save

Blok kemudian tekan tombol Ctrl dan huruf C pada keyboard secara bersamaan untuk copy artikel di atas. Bagi pengguna Google Chrome bisa menyimpan halaman ini dalam bentuk *pdf melalui tombol print/save di atas.!
Share This :

Jika Anda menyukai , Share melalui social media di atas (satu suka dari anda sangat berarti bagi kami. Tuliskan kritik dan saran anda pada form komentar di bawah! Ketikan email dan klik subcribe untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Info [K-Moe].

Artikel relevan lainnya
Beri Komentar