TUTORIAL™

--✽ ✽ ✽--ASSALAMU'ALAIKUM--✽ ✽ ✽--
Apa kabar sobat semuah udah pada berbuka puasa belom ni sobat.
Pada kesempatan kali ini kami mau berbagi Tutorial kecil yaitu Recent Comments Style
emang si sudah banyak Recent Comments yang bagus2 tampilannya tapi kali ini kami
mau memberi yang sedikit mempunyai kelebihan pada bagian URL nya yang biasanya
kalu kita mau pasang Recent Comments biasanya kita harus memasukan pada URL blog kita
pada bagian contoh nya javascript atau bagian home_page: "http://www.pret-pret/", untuk
menanmpilkan Sahabat kami yang berkomentar di setiap postingan kami.

Nah kelebihan dan perubahan pada Recent Comments Style sobat gak Repot-Repot alamat URL
yang kami jelaskan di atas karna ini menggunakan ( window.location.hostname ) jadi udah otomatis
URL sobat ter index kata para master KURA-KURA NINJA heheh...

Silakan sobat lihat Demo di Bawah ini

Buat sobat yang mau pasang silakan copy kode nya di bawah ini
 <style type='text/css'>
.recent-comment{ background-color:#333;
-webkit-box-shadow:0 1px 2px black;
-moz-box-shadow:0 1px 2px black;
box-shadow:0 1px 2px black;margin-bottom:10px; padding-left: 24px;
border-top-left-radius:3px;
border-top-right-radius:3px;
border-bottom-left-radius:3px;
border-bottom-right-radius:3px;-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
-webkit-transform: rotate(720deg);
-moz-transform: rotate(720deg);
-o-transform: rotate(720deg);
-ms-transform: rotate(720deg);
transform: rotate(720deg);
}
.recent-comment img {
border: 1px solid #666;
padding: 2px;

opacity: 0.4;}

.recent-comment img:hover {
border: 1px solid #ddd;
opacity: 0.9;transform: rotate(360deg) scale(1.5) skew(0deg) translate(0px);
    -webkit-transform: rotate(360deg) scale(1.5) skew(0deg) translate(0px);
    -moz-transform: rotate(360deg) scale(1.5) skew(0deg) translate(0px);
    -o-transform: rotate(360deg) scale(1.5) skew(0deg) translate(0px);
    -ms-transform: rotate(360deg) scale(1.5) skew(0deg) translate(0px);
}
.recent-comment a {
-webkit-box-shadow:0 1px 2px black;
-moz-box-shadow:0 1px 2px black;
box-shadow:0 1px 2px black;
color:#ddd;
font-size:15px;}
.recent-comment-admin  {}
.recent-comment-ico    { margin-left:-20px;margin-top:4px;float:left;margin-right:3px;}
.recent-comment-header {}
.recent-comment-body   {padding:5px;
font-size: 90%;
font-style: italic;
font-family: helvetica;
color: #888;}
.recent-comment-body:after { content:"" ;width:0; height:0; position:absolute; top:100%; left:20px; border-width:10px; border-style:solid; border-color:#555 transparent transparent transparent; display:block }
.recent-comment-footer { font-size: 85%; }
.recent-comment-header:before { content:"" ; color: #00ff00;text-shadow: 0 0 10px #C6EB04 ,0 0 20px #C6EB04,0 0 30px #C6EB04;width:0; height:0; position:absolute; right:100%; top:20px; border-width:10px; border-style:solid; border-color:transparent #222 transparent transparent }
</style>

Silakan copy  kode Javascript Nya di bawah

<script type="text/javascript" src="http://selladrt.googlecode.com/files/Recent%20Comments%20Style%20By%20Selladrt.js"></script>

Buat sobat yang mau menampilkan jumlah komentarnya
sesuka sobat silakan gunakan Javascript di bawah

<script type="text/javascript">

//
// CONFIG:
var numRecentComments = 5;
var numPerPost = 2; // max comments per post (to try) or 0
var maxCommentChars = 100;
var maxPostTitleChars = 0; // if 0, use full post title

var txtWrote = 'says:';
var txtMore = 'More &#187;';
var txtTooltip = '[user] on &quot;[title]&quot; - [date MM/dd/yyyy hh:mm]';
var txtAnonymous = ''; // empty, or Anonymous user name localized
// Variables [xxx] in texts:
// supports [title], [user], [date], [time], [datetime], [date format]
// format supports: yyyy=long year, yy=short year, MM=month(01-12), dd=monthday, hh=hour, mm=min, ss=sec

var getTitles = true;   // false faster
var trueAvatars = true; // false faster
var urlMyAvatar = '';   // can be empty (then it is fetched) or url to image
var urlMyProfile = '';  // set if you have no profile gadget on page
//
var cropAvatar = true;
var sizeAvatar = 16;
var urlNoAvatar = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju8L_BeP1CIzWxgp__DjWjbKsLaPOTbazxsJMD4d-o883QyuZg5c92B3ZK1w2LLhyphenhyphenfe-BKVRdZiKvc5IbtmhK1mU9thGM63p_kk5gur8jSQZK3qKvkH0MIfhFqETZ5lRoFdspIEFoLOfk/"+sizeAvatar+"/avatar_blue_m_96.png"; // http://www.blogger.com/img/avatar_blue_m_96.png resizeable
//
var urlAnoAvatar = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju8L_BeP1CIzWxgp__DjWjbKsLaPOTbazxsJMD4d-o883QyuZg5c92B3ZK1w2LLhyphenhyphenfe-BKVRdZiKvc5IbtmhK1mU9thGM63p_kk5gur8jSQZK3qKvkH0MIfhFqETZ5lRoFdspIEFoLOfk/s15/avatar_blue_m_96.png?d=mm&s=' + sizeAvatar;
var maxResultsPosts = "";       // or for example "&max-results=100"
var maxResultsComments = "";    // or for example "&max-results=300"
// CONFIG END
var urlToTitle = {};
function replaceVars(text, user, title, date) {
  text = text.replace('[user]', user);
  text = text.replace('[date]', date.toLocaleDateString());
  text = text.replace('[datetime]', date.toLocaleString());
  text = text.replace('[time]', date.toLocaleTimeString());
  text = text.replace('[title]', title.replace(/\"/g,'&quot;'));
  var i = text.indexOf("[date ");
  if(i > -1) {
    var format = /\[date\s+(.+?)\]/.exec(text)[1];
    if(format != '') {
      var txtDate = format.replace(/yyyy/i, date.getFullYear());
      txtDate = txtDate.replace(/yy/i, date.getFullYear().toString().slice(-2));
      txtDate = txtDate.replace("MM", String("0"+(date.getMonth()+1)).slice(-2));
      txtDate = txtDate.replace("mm", String("0"+date.getMinutes()).slice(-2));
      txtDate = txtDate.replace("ss", String("0"+date.getSeconds()).slice(-2));
      txtDate = txtDate.replace("dd", String("0"+date.getDate()).slice(-2));
//or: txtDate = txtDate.replace("dd", date.getDate());
      txtDate = txtDate.replace("hh", String("0"+date.getHours()).slice(-2));
//or: txtDate = txtDate.replace("hh", date.getHours());
      text = text.replace(/\[date\s+(.+?)\]/, txtDate)
    }
  }
  return text;
}
if(urlMyProfile == "") {
  var elements = document.getElementsByTagName("*");
  var expr = /(^| )profile-link( |$)/;
  for(var i=0 ; i<elements.length ; i++)
    if(expr.test(elements[i].className)) {
      urlMyProfile = elements[i].href;
      break;
    }
}
function getPostUrlsForComments(json) {
  for(var i = 0 ; i < json.feed.entry.length ; i++ ) {
    var entry = json.feed.entry[i];
    for (var k = 0; k < entry.link.length; k++ ) {
      if (entry.link[k].rel == 'alternate') {
        href = entry.link[k].href;
        break;
      }
    }
    urlToTitle[href] = entry.title.$t;
  }
}
function showRecentComments(json) {
  var postHandled = {};
  var j = 0;
  if(numPerPost) {
    while(numPerPost < numRecentComments) {
      for(var i = 0 ; i < json.feed.entry.length ; i++ ) {
        var entry = json.feed.entry[i];
        if(entry["thr$in-reply-to"]) {
          if(!postHandled[entry["thr$in-reply-to"].href])
              postHandled[entry["thr$in-reply-to"].href] = 1;
          else
              postHandled[entry["thr$in-reply-to"].href]++;
          if(postHandled[entry["thr$in-reply-to"].href] <= numPerPost)
            j++;
        }
      }
      if(j >= numRecentComments)
        break;
      numPerPost++;
      j = 0;
      postHandled = {};
    }
    if(numRecentComments == numPerPost)
       numPerPost = 0;
  }
  postHandled = {};
  j = 0;
  for(var i = 0 ; j < numRecentComments && i < json.feed.entry.length ; i++ ) {
    var entry = json.feed.entry[i];
    if(numPerPost && postHandled[entry["thr$in-reply-to"].href] && postHandled[entry["thr$in-reply-to"].href] >= numPerPost)
      continue;
    if(entry["thr$in-reply-to"]) {
      if(!postHandled[entry["thr$in-reply-to"].href])
          postHandled[entry["thr$in-reply-to"].href] = 1;
      else
          postHandled[entry["thr$in-reply-to"].href]++;
      j++;
      var href='';
      for (var k = 0; k < entry.link.length; k++ ) {
        if (entry.link[k].rel == 'alternate') {
          href = entry.link[k].href;
          break;
        }
      }
      if(href=='') {j--; continue; }
      var hrefPost = href.split("?")[0];
      var comment = "";
      if("content" in entry) comment = entry.content.$t;
      else                   comment = entry.summary.$t;
      comment = comment.replace(/<br[^>]*>/ig, " ");
      comment = comment.replace(/<\S[^>]*>/g, "");
      var postTitle="-";
      if(urlToTitle[hrefPost]) postTitle=urlToTitle[hrefPost];
      else {
        if(hrefPost.match(/\/([^/]*)\.html/)) postTitle = hrefPost.match(/\/([^/]*)\.html/)[1].replace(/_\d{2}$/, "");
        postTitle = postTitle.replace(/-/g," ");
        postTitle = postTitle[0].toUpperCase() + postTitle.slice(1);
      }
      if(maxPostTitleChars && postTitle.length > maxPostTitleChars) {
        postTitle = postTitle.substring(0, maxPostTitleChars);
        var indexBreak = postTitle.lastIndexOf(" ");
        postTitle = postTitle.substring(0, indexBreak) + "...";
      }

      var authorName = entry.author[0].name.$t;
      var authorUri = "";
      if(entry.author[0].uri && entry.author[0].uri.$t != "")
        authorUri = entry.author[0].uri.$t;
  
      var avaimg = urlAnoAvatar;
      var bloggerprofile = "http://www.blogger.com/profile/";
      if(trueAvatars && entry.author[0].gd$image && entry.author[0].gd$image.src && authorUri.substr(0,bloggerprofile.length) == bloggerprofile)
        avaimg = entry.author[0].gd$image.src;
      else {
        var parseurl = document.createElement('a');
        if(authorUri != "") {
          parseurl.href = authorUri;
          avaimg = 'http://www.google.com/s2/favicons?domain=' + parseurl.hostname;
        }
      }
      if(urlMyProfile != "" && authorUri == urlMyProfile && urlMyAvatar != "")
        avaimg = urlMyAvatar;
      if(avaimg == "http://img2.blogblog.com/img/b16-rounded.gif" && urlNoAvatar != "")
        avaimg = urlNoAvatar;
      var newsize="s"+sizeAvatar;
      avaimg = avaimg.replace(/\/s\d\d+-c\//, "/"+newsize+"-c/");
      if(cropAvatar) newsize+="-c";
      avaimg = avaimg.replace(/\/s\d\d+(-c){0,1}\//, "/"+newsize+"/");
      if(authorName == 'Anonymous' && txtAnonymous != '' && avaimg == urlAnoAvatar)
        authorName = txtAnonymous;
      var imgcode = '<img height="'+sizeAvatar+'" width="'+sizeAvatar+'" title="'+authorName+'" src="'+avaimg+'" />';
      if (authorUri!="") imgcode = '<a rel="nofollow" href="'+authorUri+'">'+imgcode+'</a>';
      var clsAdmin = "";
      if(urlMyProfile != "" && authorUri == urlMyProfile)
          clsAdmin = " recent-comment-admin";
      var datePart = entry.published.$t.match(/\d+/g); // assume ISO 8601
      var cmtDate = new Date(datePart[0],datePart[1]-1,datePart[2],datePart[3],datePart[4],datePart[5]);

      var txtHeader = txtWrote;
      if(txtWrote.indexOf('[')==-1)
        txtHeader = authorName + ' ' + txtWrote;
      else
        txtHeader = replaceVars(txtHeader, authorName, postTitle, cmtDate);

      var tooltip = replaceVars(txtTooltip, authorName, postTitle, cmtDate);
      if(!/#/.test(href)) href += "#comments";
      document.write('<div title="'+tooltip+'" class="recent-comment'+clsAdmin+'">');
      document.write('<div title="'+tooltip+'" class="recent-comment-header'+clsAdmin+'"><div title="'+tooltip+'" class="recent-comment-ico'+clsAdmin+'">'+imgcode+'</div><a title="'+tooltip+'" href="' + href + '">' + txtHeader + ' </a></div>');
      if(comment.length < maxCommentChars)
        document.write('<div title="'+tooltip+'" class="recent-comment-body'+clsAdmin+'">' + comment + '</div>');
      else {
        comment = comment.substring(0, maxCommentChars);
        var indexBreak = comment.lastIndexOf(" ");
        comment = comment.substring(0, indexBreak);
        document.write('<div title="'+tooltip+'" class="recent-comment-body'+clsAdmin+'">' + comment + '...</div>');
        if(txtMore != "") {
          var moretext = replaceVars(txtMore, authorName, postTitle, cmtDate);
          document.write('<div title="'+tooltip+'" class="recent-comment-footer'+clsAdmin+'"><a title="'+tooltip+'" href="' + href + '">' + moretext + '</a></div>');
        }
      }
      document.write('<div style="clear:both;"></div></div>');
    }
  }
}
if(getTitles)
  document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/posts/summary?redirect=false'+maxResultsPosts+'&alt=json-in-script&callback=getPostUrlsForComments"></'+'script>');
document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false'+maxResultsComments+'&alt=json-in-script&callback=showRecentComments"></'+'script>');
</script> 

karna kode Javascript yang sudah kami Format hanya menampilkan lima Komentar jadi kalu sobat ingin menampilkan lebih banyak lagi komentar nya silakan gunakan Javascript di bawah ini
Sekian dulu dari kami pada postingan kali ini tentang Recent Comments Style semoga bermanfaat buat sobat yang menggunakannya Amin,,,....?