Tutorial Pengomen Tegar

Assalamualaikum dan salam sejahtera.

Kita bersama kembali dalam rancangan "Tutorial Bersama DJH." Baiklah episod kali ini,angah nak mengajar anda cara utk meletakkan widget pengomen tegar di blog.

Kalau anda perasan,angah selalunya akan update pengomen tegar pada hari-hari tertentu,tetapi tiada pun widget tersebut.Bukannya apa,kalau angah letak widget di blog,loading akan menjadi lembab sebab ranking yang angah sediakan adalah sebanyak 30 blogger.Jadi,memang akan lembab.

Kalau anda letakkan sebanyak 10 mungkin tidak akan effect pada loading blog anda. Jom mencuba.

Cara-caranya :-

• Log in Dashboard > Layout > Tekan Add a gadjet > Pilih HTML/JavaScript.
• Copy coding di bawah ini :-

<div><div style="margin: 5px;"> <div style="margin-bottom: 2px;" class="bigfont"><input style="margin: 0px; padding: 0px; width: 95px; " value="Klik Sini" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Klik Sini'; }" type="button"/> </div> <div style="border: 0px inset ; margin: 0px; padding: 6px;" class="alt2"> <div style="display: none;"> <style type="text/css"> .top-commenter-line img { -webkit-border-radius: 80px; -moz-border-radius: 80px; border-radius: 80px; -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4); -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4); box-shadow: 0 1px 3px rgba(0, 0, 0, .4); } .top-commenter-line {margin: 3px 0;} .top-commenter-line .profile-name-link {padding-left:0;} .top-commenter-avatar {vertical-align:middle;} </style><script type="text/javascript"> //// Top Commentators gadget with avatars, by MS-potilas 2012. // Gets a list of top commentators from all comments, or specified number of days in the past. //  // CONFIG: var maxTopCommenters = 30;   // berapa banyak senarai top commentator var minComments = 1; // minimum komen var numDays = 30;  // komen sejak bila (ex. 30), atau 0 sejak dari mula var excludeMe = true;  // true: tidak masukkan komen sendiri var excludeUsers = ["Anonymous", "Mohamad Khairil"]; // jangan masukkan username ini, tukar NickNameAdminBlog kpd nickname anda var maxUserNameLength = 42; // 0: don't cut, 42: cut till 42 usernames characters // var txtTopLine = '<b>[#].</b> [image] [user] ([count])'; var txtNoTopCommenters = 'No top commentators at this time.'; var txtAnonymous = '';  // empty, or Anonymous user name localized if you want to localize // var sizeAvatar = 40; var cropAvatar = true; // var urlNoAvatar = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5fNpRfetYzgoJ6nmv8JFMLEUL4M-hNnJgs7kgGsyOcJ5aKs5vWomKxu5NQLXN5ltj_6gSJ-F_9e9hO4PWvZNMN2thkcyvzTlu_hnao2SQPifUb_pprKOHj_4UO6VJhjyr4vO2EFc1s0M/"+sizeAvatar+"/avatar_blue_m_96.png"; // http://www.blogger.com/img/avatar_blue_m_96.png resizeable var urlAnoAvatar = 'http://www.gravatar.com/avatar/00000000000000000000000000000000?d=mm&s=' + sizeAvatar; var urlMyProfile = ''; // set if you have no profile gadget on page var urlMyAvatar = '';  // can be empty (then it is fetched) or url to image // config end // for old IEs & IE modes: if(!Array.indexOf) {  Array.prototype.indexOf=function(obj) {   for(var i=0;i<this.length;i++) if(this[i]==obj) return i;   return -1; }} function replaceTopCmtVars(text, item, position) {   if(!item || !item.author) return text;   var author = item.author;     var authorUri = "";   if(author.uri && author.uri.$t != "")     authorUri = author.uri.$t;     var avaimg = urlAnoAvatar;   var bloggerprofile = "http://www.blogger.com/profile/";   if(author.gd$image && author.gd$image.src && authorUri.substr(0,bloggerprofile.length) == bloggerprofile)     avaimg = author.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+"/");     var authorName = author.name.$t;   if(authorName == 'Anonymous' && txtAnonymous != '' && avaimg == urlAnoAvatar)     authorName = txtAnonymous;   var imgcode = '<img class="top-commenter-avatar" height="'+sizeAvatar+'" width="'+sizeAvatar+'" title="'+authorName+'" src="'+avaimg+'" />';   if(authorUri!="") imgcode = '<a href="'+authorUri+'">'+imgcode+'</a>';     if(maxUserNameLength > 3 && authorName.length > maxUserNameLength)     authorName = authorName.substr(0, maxUserNameLength-3) + "...";   var authorcode = authorName;   if(authorUri!="") authorcode = '<a class="profile-name-link" href="'+authorUri+'">'+authorcode+'</a>';     text = text.replace('[user]', authorcode);   text = text.replace('[image]', imgcode);   text = text.replace('[#]', position);   text = text.replace('[count]', item.count);   return text; }   var topcommenters = {}; var ndxbase = 1; function showTopCommenters(json) {   var one_day=1000*60*60*24;   var today = new Date();     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;       }   }     for(var i = 0 ; i < json.feed.entry.length ; i++ ) {     var entry = json.feed.entry[i];     if(numDays > 0) {       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]);         //Calculate difference btw the two dates, and convert to days       var days = Math.ceil((today.getTime()-cmtDate.getTime())/(one_day));       if(days > numDays) break;     }     var authorUri = "";     if(entry.author[0].uri && entry.author[0].uri.$t != "")       authorUri = entry.author[0].uri.$t;       if(excludeMe && authorUri != "" && authorUri == urlMyProfile)       continue;     var authorName = entry.author[0].name.$t;     if(excludeUsers.indexOf(authorName) != -1)       continue;       var hash=entry.author[0].name.$t + "-" + authorUri;     if(topcommenters[hash])       topcommenters[hash].count++;     else {       var commenter = new Object();       commenter.author = entry.author[0];       commenter.count = 1;       topcommenters[hash] = commenter;     }   }   if(json.feed.entry.length == 200) {     ndxbase += 200;     document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false&max-results=200&start-index='+ndxbase+'&alt=json-in-script&callback=showTopCommenters"></'+'script>');     return;   }     // convert object to array of tuples   var tuplear = [];   for(var key in topcommenters) tuplear.push([key, topcommenters[key]]);     tuplear.sort(function(a, b) {     if(b[1].count-a[1].count)         return b[1].count-a[1].count;     return (a[1].author.name.$t.toLowerCase() < b[1].author.name.$t.toLowerCase()) ? -1 : 1;   });     // list top topcommenters:   var realcount = 0;   for(var i = 0; i < maxTopCommenters && i < tuplear.length ; i++) {     var item = tuplear[i][1];     if(item.count < minComments)         break;     document.write('<di'+'v class="top-commenter-line">');     document.write(replaceTopCmtVars(txtTopLine, item, realcount+1));     document.write('</d'+'iv>');     realcount++;   }   if(!realcount)     document.write(txtNoTopCommenters); }   document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false&max-results=200&alt=json-in-script&callback=showTopCommenters"></'+'script>'); </script></div> <div style="text-align: center;"> <span style="font-size: 11px;"><a href="http://waazin.blogspot.com/2013/04/tutorial-widget-komen-terbanyak-untuk.html" target="_blank">:: Dapatkan Widget Ini ::</a></span></div> </div></div></div> <p><br /></p><p></p><p><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script></p><p><script type='text/javascript' src='https://sites.google.com/site/jeritanblog/javascript/jquery.lazyload.mini.js?ver=1.5.0'></script></p><p><script type="text/javascript"></p><p>jQuery(document).ready(function($){</p><p>if (navigator.platform == "iPad") return;</p><p>jQuery("img").lazyload({</p><p>effect:"fadeIn",</p><p>});</p><p>});</p><p></script></p><div><br /></div><p></p><p><br /></p><p></p>

<div style="position: fixed; centre: 0px; left: 2px;"><br /><embed pluginspage="http://www.macromedia.com/go/getflashplayer" width="150" height="252" title="grab this widget @ widgetindex.blogspot" src="https://6198981519726108440-a-1802744773732722657-s-sites.googlegroups.com/site/widgetindex26/spider2.swf" wmode="transparent" type="application/x-shockwave-flash" quality="high"></embed></div> 

•  Nombor yng berwarna merah adalah berapa ramai Pengomen Tegar yang anda mahu paparkan.Anda boleh mengubahnya sendiri.
• Nombor yang berwarna pink pula adalah sejak berapa hari yang lepas komen itu diambil kira. Macam angah,angah pilih 30 hari yang lepas untuk menunjukkan pengomen tegar dalam jangka masa sebulan yang lepas. 
• Perkataa berwarna biru pula adalah nama atau blogger yang anda tidak mahu paparkan di senarai itu nanti,contohnya anonymous,nama anda sendiri..dan lain-lain.
• Dah siap?? SAVE kan. 

Senang dan mudah kan?Kalau macam angah,kena tunggu beberapa saat,baru widget ni dapat berfungsi dengan elok.Bukannya apa,sebab dia nak kira pengomen dan jumlah komen,memang mengambil masa sedikit.

Macam angah,lepas je keluar senarai pengomen tegar,terus angah print screen.Dan bila dah habis print screen,angah delete widget ni,dan buat entry pengomen tegar utk bulan tertentu.Barulah misteri kan?? :D

Selin itu,nama yang keluar di senarai pengomen tegar itu boleh di click dan terus dipautkan ke akaun blogger tersebut.Itu yang menarik.Apa-apapun jom cuba tutorial ini dahulu!! :D

Sekian.