widget komentar terbaru dengan animasi ini akan menampilkan siapa pengunjung yang berberikan komentar terbaru dan ada pilihan dengan tambahan efek animasi scroll untuk mempercantik dan membri kesan adanya komentar baru

Widget Komentar Terbaru dengan Animasi - MKR site | Berbagi Tanpa Batas, Blogger Tips, Widget, Template

widget komentar terbaru dengan animasi ini akan menampilkan siapa pengunjung yang berberikan komentar terbaru dan ada pilihan dengan tambahan efek animasi scroll untuk mempercantik dan membri kesan adanya komentar baru

Widget Komentar Terbaru dengan Animasi


Widget Komentar Terbaru/Recent Post ini merupakan script dari Blog Tune-Up yang telah oleh Mas Taufik ~ DTE. Widget ini akan menampilkan komentar terbaru pada blog anda caranya sangat mudah. Ikuti cara di bawah:

PEMASANGAN PADA BLOGSPOT

Pertama-tama masuklah ke halaman tata letak dengan mengeklik menu Tata Letak:

Tata letak Blogger
Masuk ke halaman Tata Letak

Tambahkan sebuah elemen halaman HTML/JavaScript, kemudian salin semua kode ini dan letakkan di dalam formulirnya:

<style type="text/css">
#komentar {font:normal 11px Tahoma,Verdana,Arial,Sans-Serif;background-color:#DADADA4;margin:0px 0px;padding:10px 10px;color:#000;border:4px solid #A8A8A8;-webkit-box-shadow:inset 0px 0px 2px #000;-moz-box-shadow:inset 0px 0px 2px #000; box-shadow:inset 0px 0px 2px #000;}
#komentar ul {margin: 0;padding: 0;border-top: 1px solid #7E7E7E;border-bottom: 1px solid #FAFAFA;}
#komentar ul li {border-top: 1px solid #FAFAFA;border-bottom: 1px solid #7E7E7E;padding: 3px 0px;list-style: none;}
#komentar ul li b a, #komentar ul li b a:link, #komentar ul li b a:visited, #komentar ul li b {color:#006B00;text-shadow:0 1px 1px rgba(175, 175, 175, 0.49);}
#komentar ul li b:before {content:url(http://3.bp.blogspot.com/-abTiDALn6h0/TpJYHn1AmoI/AAAAAAAAA8I/hRAhFSBZhlY/s1600/feed-icon-green.png);margin:0px 4px 0px 0px;display:inline-block;*display:inline;vertical-align:middle;}
</style>
<script type="text/javascript">
var jmlkomentar = 10,
    jmlkarakter = 150,
    home_page   = "http://mkr-site.blogspot.com";
</script>
<script src="https://ivyth.googlecode.com/svn/js/rc-comments.js" type="text/javascript"></script>

var jmlkomentar untuk menentukan jumlah komentar yang akan ditampilkan pada dan var jmlkarakter untuk menentukan jumlah karakter. Kemudian ganti kode pada home_page dengan alamat blogmu sendiri.
Klik Simpan dan lihat hasilnya:

Jika ingin menambahkan efek Animasi copy script yang ada di bawah dan letakkan setelah kode sebelumnya.

<script type="text/javascript">
var $ul = $('#komentar'),
    roll = function() {
        $ul.find('li').first().slideDown('slow', function() {
            $(this).appendTo($(this).parent()).fadeIn();
        });
    },
    anim = setInterval(roll, 3000);

// Pause on hover...
$ul.hover(function() {
    clearInterval(anim);
}, function() {
    setInterval(roll, 3000);
});
</script>



Sumber: DTE ~ JavaScript Recent Comment/Komentar Terbaru dengan CSS
Original Script: Blog Tune-Up SatankMKR
Satank Mkr Beri Komentar
Bagikan kepada teman!
Garis

11 comments:

  1. langsung praktek gan hasilnya bagus, makasih ya. slam blogger.

    BalasHapus
    Balasan
    1. \o/
      Sama2 gan..
      Slam sesama blogger.. :D

      Hapus
  2. Mantap ....Admin...atas infonya..ntar di coba kunjung balik ye...thank's

    BalasHapus
  3. liat demonya tampilannya cakep profesional, :) ..
    ini blog gak ada tombol follownya ya :-? .

    BalasHapus
  4. Mas Makmur. Mengapa ya widget komentarku yang pakai ini menjadi merusak tampilan padahal sebelumnya baik-baik saja. Footerku ancur ;((

    BalasHapus
  5. kebanyakan gakbisa dibuka musti pake password yang muncul begini :
    A username and password are being requested by https://ivyth.googlecode.com. The site says: "Google Code Subversion Repository"
    Username :
    Password :
    Cancel Ok

    BalasHapus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

NB: Jangan menuliskan link aktif karena akan terhapus secara automatis.

Jika ingin menuliskan komentar yang keluar dari topik pada artikel ini silahkan kehalaman OOT (out of topic) dengan menekan tombol OOT di bawah

 
Design by MKR Copyright © 2012 ~ 2013 Powered by Blogger
TOP