Home » » Membuat "Recent Comment" efek Scrolling dengan jQuery dan CSS

Membuat "Recent Comment" efek Scrolling dengan jQuery dan CSS


Langkah Pertama
    
Caranya adalah sebagai berikut :
1. Login ke Akun Blogger anda masing-masing.
2. Klik Design or Rancangan, kemudian pilih Edit HTML
3. Centang (Expand Widget Template)
4. Untuk keamanan lebih baik kita (Download Template Lengkap)
5. Gunakan (Ctrl+F) or (Alt+E+F) untuk memudahkan pencarian
6. Cari code : <head>
7. Lalu letakkan kode berikut dibawahnya :
<script language='javascript' src='http://pujangga.googlecode.com/files/jquery-1.3.2.min.js' type='text/javascript'/>
8. Selanjutnya letakkan Kode CSS dibawah ini sebelum atau diatas kode ]]></b:skin>
/*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 -->
9. Save

Langkah Kedua

Caranya adalah sebagai berikut :
1. Login ke akun Blog anda.
2. Pilih Rancangan, Add Gadget kemudian klik HTML/Java Script.
3. Copy Paste script di bawah ini ke dalam gadget HTML/Java Script anda.
<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://www.3xploration.co.cc/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>
</ul>
NB:
Tulisan 'http://www.3xploration.co.cc' tinggal ganti dengan URL BLOG anda.



4. Save


♂ Good Luck ♀

Semua ini adalah apa yang pernah aku cobain sendiri . . dan aku dapat/mengerti dari teman2 blogger lainnya karena aku hanya seorang blogger pemula yang ingin mengetahui lebih banyak hal lagi . . . . Thank's
Share
Related Post

0 comments:

Archives

Label


ShoutMix chat widget
Guest Book
 

Subscribe Via Email

Enter your email address:

Delivered by FeedBurner

My Blog

Show

Exploration


Show

[Valid Atom 1.0]
Google PageRank Checker Powered by  MyPagerank.Net

Powered by FeedBurner

SEO Stats powered by MyPagerank.Net

Show

Show

Exploration

Welcome To My Blog

I hope you find what you're looking for here . . Thank you for visit to my simple blog . .

Rizky Maulana

This life is a sacrifice and struggle . . and I am just a man who wants to be better than ever . .