Rabu, 15 Juni 2011

Recent Comment Auto Scroll With Jquery

Diposting oleh Iman di 06.59 / Label: , /
Hai sobat , kali ini saya akan menshare widget auto comment . Nah .. fungsi widget ini adalah supaya pengunjung maupun kita sendiri dapat melihat comment terbaru dari blog yang dipasangi widget ini.


Supaya tidak penasaran dengan widgetnya bisa kalian lihat DISINI

Note : Letak widget tersebut ada di sebelah sidebar kanan bawah.



Jika berminat ingin memiliki widget tersebut silakan ikuti langkah berikut.

1. Masuk di akun Blogger kalian Lalu pilih Design > edit html.> expand widget template.

Note : untuk menghindari hal yang tidak dinginkan kan anda kalian bisa Backup template kalian.

Contoh gambar :



2. Setelah itu copy paste kode dibawah ini tepat dibawah kode <head>


<script language='javascript' src='http://vianjb.googlecode.com/files/jquery.js' type='text/javascript'/> 


3, Setelah mempaste kode tersebut ,cari lagi kode </body> lalu copy paste kode dibawah ini tepat dibawah kode </body> .

/*Recent comment code Start*/
#listticker{
height:235px;
width:100%;
overflow:hidden;
border:solid 1px #DEDEDE;
padding:2px 5px 14px 5px;
border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #F70000; -moz-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #F70000; -webkit-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #F70000;
}
#listticker:hover{border-radius:12px; -moz-border-radius:12px; -webkit-border-radius:12px; box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #33F; -moz-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #33F; -webkit-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #33F}
#listticker li{
border:0; margin:0; padding:0; list-style:none;
}
#listticker li{
height:75px;
padding:5px;
}
#listticker a{
color:#009900;
margin-bottom:
}
#listticker .news-title{
display:block;
font-weight:bold;
margin-bottom:4px;
font-size:11px;
}
#listticker .news-text{
display:block;
font-size:12px;
color:#666666;
}
#listticker img{
float:left;
margin-right:14px;
padding:4px;
}
#listticker i {
color: #009900;
}
<-- Recent comment code End -->


4. Jika sudah klik simpan lalu pergi ke page element ,pilih Add Gadget lalu pilih html javascript.

cara,membuat,recent,comment,auto,scroll


5. Copy paste kode dibawah ini didalam Html javasciprt tadi.


<script type="text/javascript">
$(document).ready(function(){
 var first = 0;
 var speed = 200;
 var pause = 3500;
  function removeFirst(){
   first = $('ul#listticker li:first').html();
   $('ul#listticker li:first')
   .animate({opacity: 0}, speed)
   .fadeOut('slow', function() {$(this).remove();});
   addLast(first);
  }

  function addLast(first){
   last = '<li style="display:none">'+first+'</li>';
   $('ul#listticker').append(last)
   $('ul#listticker li:last')
   .animate({opacity: 1}, speed)
   .fadeIn('slow')
  }
 interval = setInterval(removeFirst, pause);
});
</script>
<ul id="listticker">
 <script type="text/javascript">
// ----------------------------------------
// SHOW RECENT COMMENTS
// ----------------------------------------
// This functions takes a blogger-feed in JSON
// format and displays it.
//
// Version: 1.0
// Date:    2006-12-01
// Author:  Hans Oosting
// URL:     beautifulbeta.blogspot.com
// ----------------------------------------
function showrecentcomments(json) {
  for (var i = 0; i < numcomments; i++) {
    var entry = json.feed.entry[i];
    var alturl;
    if (i == json.feed.entry.length) break;
    for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'alternate') {
        alturl = entry.link[k].href;
        break;
      }
    }
   alturl = alturl.replace("#", "#comment-");
   var postlink = alturl.split("#");
   postlink = postlink[0];
   var linktext = postlink.split("/");
   linktext = linktext[5];
   linktext = linktext.split(".html");
   linktext = linktext[0];
   var posttitle = linktext.replace(/-/g," ");
   posttitle = posttitle.link(postlink);
   var commentdate = entry.published.$t;
   var cdyear = commentdate.substring(0,4);
   var cdmonth = commentdate.substring(5,7);
   var cdday = commentdate.substring(8,10);
   var monthnames = new Array();
   monthnames[1] = "Jan";
   monthnames[2] = "Feb";
   monthnames[3] = "Mar";
   monthnames[4] = "Apr";
   monthnames[5] = "May";
   monthnames[6] = "Jun";
   monthnames[7] = "Jul";
   monthnames[8] = "Aug";
   monthnames[9] = "Sep";
   monthnames[10] = "Oct";
   monthnames[11] = "Nov";
   monthnames[12] = "Dec";
   var comment = entry.content.$t;
   var re = /<\S[^>]*>/g;
   comment = comment.replace(re, "");
   if (showcommentdate == true)
   document.write('<li>');
   document.write('Tanggal ' + cdday + ' '+ monthnames[parseInt(cdmonth,10)] + ' ' + cdyear + ' ');
      document.write('<b><a href="' + alturl + '">' + entry.author[0].name.$t + '</b></a> berkomentar');
   if (showposttitle == true) document.write(' pada ' + posttitle);
   document.write(':<br/>');
   if (comment.length < numchars)
         document.write('<i>' + comment + '</i><br/><br/>');
   else
         document.write('<i>'+ comment.substring(0, numchars) + '...</i><br/><br/>');
  }
}
document.write('</li>');
</script>
<script style="text/javascript">var numcomments = 6;var showcommentdate = true;var showposttitle = true;var numchars = 80;var standardstyling = true;</script><script src="http://vianjb.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>
</ul>

Note: 

Ganti kode Merah diatas dengan url blog kalian

Kode berwarna Biru adalah jumlah recent comment yang ditampilkan , ubah sesuaikan dengan keinginan kalian sendiri.

6. simpan dan selesai .

Untuk ini saya sudahi dulu artikel ini saya tulis terimakasih , bila ada masukkan atau pun yang lain tentang blog ini silakan tinggalkan komentar di Blog ini . terima kasih.

0 komentar:

Posting Komentar

Posting Komentar

Langganan: Posting Komentar (Atom)