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
Design by MKRSite Copyright © 2012 ~ 2017 Powered by Blogger
TOP