Smooth scrolling pada komentar

Javascript jQuery

Sebenarnya efek smooth scrolling ini untuk menandai sebuah elemen di dalam komentar itu sendiri pada hash target komentar dengan jQuery dan beberapa tambahan css yaitu css target. lihat gambar dibawah ini:


Untuk memasangnya pada komentar blog anda, silahkan ikuti langkah dibawah ini

1. Login ke akun blogger Anda.
2. Pilih Template » Edit HTML.
3. Pastikan template Anda terpasang jQuery library yang terletak diatas </head>

lihat css berikut ini:

div:target .comment_inner{
border:1px solid #6db500;
-webkit-transition:border-color 5s ease-out;-moz-transition:border-color 5s ease-out;-ms-transition:border-color 5s ease-out;-o-transition:border-color 5s ease-out;transition:border-color 5s ease-out;
}
div:target .comment_child .comment_wrap .comment_inner{
background: #fff;border:1px solid #2f4f45;
}

4. Cari kode berikut ini:

<b:includable id='comments' var='post'>

lalu letakkan css diatas di dibawahnya dalam kode <style>...</style> atau jika malas taruh saja diatas </b:skin>

Sedangkan anda yang masih menggunakan komentar bertingkat bawaan blogger bisa memakai css dibawah ini

.comment .comment-block:target{border:2px solid #800000;}
.comments .comment-thread.inline-thread .comment .comment-block:target{border:2px solid #bbb;}

5. Kemudian cari kode tag ini dalam template anda </body>
6. Tepat diatasnya, pastekan kode di bawah ini:

<script type='text/javascript'>  
var jump=function(e)
{
    //alert('here');
   if (e){
       //e.preventDefault();
       var target = jQuery(this).attr("href").replace('/', '');
   }else{
       var target = location.hash;
   }
   jQuery('html,body').animate(
   {
       scrollTop: (jQuery(target).offset().top) - 100
   },500,function()
   {
       //location.hash = target;
   });
}
jQuery(document).ready(function($)
{
    $(document).on('click', 'a[href*=#]', jump);

    if (location.hash){
        setTimeout(function(){
            $('html, body').scrollTop(0).show();
            jump();
        }, 0);
    }else{
        $('html, body').show();
    }
});
</script>

7. Simpan perubahan dan selesai.

Lihat perubahan pada daftar komentar blog anda. semoga berguna...

Artikel Terkait

  • Highlighter Language Autodetection
    Syntax Highlighter Language Autodetection ini saya dapatkan dari Software Maniacs dan saya terapkan di blog ini hanya saja tampilannya masih menggunakan Syntax Highlighter lama. seperti biasa anda mungkin sudah tau kegunaannya untuk di terapkan di blog, jadi tidak usah di jelaskan tinggal sekarang langsung saja ke cara bagaimana memasang Synta…
  • Memperbaiki ukuran thumbnail homepage
    buat sobat blogger yang mengalami masalah pada thumbnail/gambar Post.snippet dan post.thumbnail yang kurang jelas dan tidak sesuai ukuran pada tampilan posting static page/homepage, bisa menggunakan trik ini agar tampilan gambarnya bisa terlihat jelas dan sesuai. caranya cukup mudah dan gak ribet ikuti saja trik berikut perhatikan kode scrip…
  • Membanned spamer di komentar dengan jquery
    Kali ini saya ingin berbagi buat sobat yang udah males dan capek menghapus komentar para spammer, yang satu ini palinf buat suasana jadi males dan menjengkelkan bila hadir di komentar blog kita. jquery ini bisa sobat gunakan untuk menghapus dan membanned para spamer tersebut dengan menghilangkan isi komentar juga link profile mereka agar user …
  • Navigation Menu dengan Efek jQuery
    Kali ini saya akan share Menu navigasi blogger, Menu navigasi adalah hal yang di perlukan sebuah blog untuk mengarahkan seorang pengunjung ke halaman tertentu. Menu navigasi yang bagus dengan tampilan yang menarik, tentu itu memberikan nilai plus tersendiri untuk tampilan blog anda sehingga menambah bagus dan cantik. Menu navigasi ini memilik…
  • Memasang kode, gambar dan video di komentar
    Buat agan yang bingung dengan judul di atas sebenarnya adalah judul tentang cara menyisipkan dan mengijinkan kode, gambar dan video di komentar blogger. jadi kali ini kita akan membahas hal tersebut, karena saya pernah berkunjung ke sebuah blog yang memasang tool konversi kode tapi tidak memasang javascript ini jadi percuma juga menggunakan to…
  • Menerapakan jquery lightbox evolution
    Salam sobat blogger membuat postingan untuk share kali ini buat sobat yang masih bingung tentang jquery lightbox evolution. jquery lightbox ini saya gunakan di template ini pada konversi kode dan kontak bisa sobat lihat seperti apa itu jquery lightbox. untuk sobat yang tertarik dan ingin menerapkan ini untuk blognya saya akan memberikan trik…

1 komentar

  1. Bloked link! Link tidak di ijinkan baca disini.

    Tautan Anda terpaksa Saya blokir untuk alasan kenyamanan pembaca lain. Web ini digunakan untuk kalangan umum, mungkin akan lebih baik jika Anda tidak menyertakan tautan-tautan di area komentar untuk mencegah prasangka buruk dari pembaca yang lain terhadap Anda.

    Jika Anda merasa bahwa ini adalah kesalahan otomatisasi sistem, cukup tuliskan kembali komentar lama Anda dengan format yang sama seperti sebelumnya, namun tanpa adanya tautan aktif di dalamnya, misalnya berupa teks URL. Terima kasih.

    BalasHapus

Link aktif dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">...KODE ANDA DI SINI...</i>
Untuk menyisipkan script, gunakan <i rel="pre">...KODE SCRIPT ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">...URL GAMBAR ANDA ...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">...JUDUL ANDA...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">...CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <b>...TEKS ANDA...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>...TEKS ANDA...</i>

Konversi KodeOOT
:) :( =( :wa: :s ^_^ :D =D ^:D @@, ;) :-bd :-d :ya: :'( T_T :\ :p B) :Q :Ozz 7:( \o/ **p
Jika anda memiliki bahasan atau topik lain yang sama sekali tidak ada hubungan dengan tutorial diatas anda bisa menyampaikannya di halaman OOt. klik [link ini] untuk membuka halaman OOT.

Back to Top
Loading...