10:56 PM
YauNi
Sebelum membuat recent comments unik ini diharapkan sobat blogger membackup template terlebih dahulu.
Step by step:
1. Login Blog kamu
2. Klik Design/Rancangan, kemudian pilih edit HTML
3. Centang Expand Widget Template
4. cari code : <head>
Lalu letakkan kode berikut dibawahnya :
<script language='javascript' src='http://pujangga.googlecode.com/files/jquery-1.3.2.min.js' type='text/javascript'/>
5. Selanjutnya letakkan Kode CSS dibawah ini sebelum atau diatas kode ]]></b:skin> .
/*Recent comment code Start*/Nb. Kamu dapat meng-edit kode CSS diatas sesuka kamu.
#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 -->
6. Save/Simpan Template
Pada Gadget..!
1. Buka Design/Rancangan.
2. Klik Add a Gadget; cari dan pilih HTML/JavaScript.
3. Copy Paste Kode berikut kedalam Content Gadget
<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://yauni.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>
</ul>
Keterangan!
Tulisan 'http://yauni.blogspot.com/' diganti dengan URL blog kamu.
4. Klik Save/Simpan
Lihat Blog kamu.
Note.
Thanks for reading! Suka dengan artikel ini? Kamu bebas menyebarluaskan, mau menggunakan sharing is sexy tool. Atau kamu mau co-pas, gunakan kode yang ada didalam text area sebagai sumber/link back artikel ini. Gunakan Etika!!
Posted in: Tips-Tricks Blog
-YauNi-
0 comments:
Post a Comment
Silahkan tinggalkan komentar sebagai respon atau untuk bertanya.
Jangan SPAM ya, No SARA, No P0RNo!
Mohon tidak meninggalkan link di dalam comments.
Komentar berisi LINK & tidak sesuai judul akan segera dihapus!