Widget Komen Terkini

ditaip Zana Mn jam 9:30 PM






Smart tak widget ni? 
MP suka sebab nampak kemas je kan? :)
Nak pasang pun mudah je. Copy Paste kod je pun. Haha.
Yang bestnya, komen kita sebagai tuan punya blog disembunyikan.
Yela, nanti orang tengok banyak komen tuan punya blog je.
Apa cerita? Haha :D

Kelebihan:
Komen tuan blog boleh disembunyikan
Boleh ubah saiz avatar (gambar tukang komen)
Boleh set berapa banyak komen yang nak dipaparkan
Boleh set berapa panjang komen yang nak dipaparkan.
 
 Jom belajar cara pasang widget :

Masuk ke dashboard & terus ke bahagian
Kemudian klik Add a Gadget
Pilih gadget HTML/JavaScript, kotak seperti di bawah akan dipaparkan


Salin kod di bawah dan isi di ruang kotak tadi
<style type="text/css">
.rc{padding-left:24px; padding-top: 6px;}
.rc a:hover {color: #F3903E;text-decoration: none;}
.rc-ico{margin-left:-20px;margin-top:4px;float:left; margin-right:3px}
.rc-ico img {margin-top: -2px;margin-right:5px; border: 2px solid #fff;-webkit-border-radius: 100px;-moz-border-radius: 100px;border-radius: 100px;-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out; }
.rc-ico img:hover {-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);}
.rc-header{font-size: 13px;}
.rc-header a{}
.rc-body{font-style: italic; font-size:11px;padding: 0px 4px 1px 10px;border: 1px solid transparent;}
.rc-footer{font-size:11px; float: right;}
#rcw-cr {font-family: Arial,Tahoma;font-size:9px;padding-top:7px;display:block;}
</style>
<script type="text/javascript">
var numRecentComments = 6;
var maxCommentChars = 67;
var trueAvatars = true;
var urlMyAvatar = '';
var urlMyProfile = '';
var cropAvatar = true;
var sizeAvatar = 60;
var urlNoAvatar = "http://2.bp.blogspot.com/-GfFjD8etS2E/UTPve4mQdYI/AAAAAAAAC7k/gy0DVRlx4xM/s"+sizeAvatar+"/anonymous-Icon.jpg";
var urlAnoAvatar = 'http://www.gravatar.com/avatar/00000000000000000000000000000000?d=mm&s=' + sizeAvatar;
var txtMore = '';
var txtWrote = 'commented:';
var txtAnonymous = '';
var maxResultsComments = "";
var numPerPost = 2;
var maxPostTitleChars = 40;
var getTitles = true;
var maxResultsPosts = "";
var txtTooltip = '[user] on &quot;[title]&quot; - [date MM-dd-yyyy hh:mm]';
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.author[0].name.$t=="Mommy Pinky") 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]++;
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(entry.author[0].name.$t=="Mommy Pinky") continue;
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 href="'+authorUri+'">'+imgcode+'</a>';
var clsAdmin = "";
if(urlMyProfile != "" && authorUri == urlMyProfile)
clsAdmin = " rc-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="rc'+clsAdmin+'">');
document.write('<div title="'+tooltip+'" class="rc-header'+clsAdmin+'"><div title="'+tooltip+'" class="rc-ico'+clsAdmin+'">'+imgcode+'</div><a title="'+tooltip+'" href="' + href + '">' + txtHeader + ' </a></div>');
if(comment.length < maxCommentChars)
document.write('<div title="'+tooltip+'" class="rc-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="rc-body'+clsAdmin+'">' + comment + '...</div>');
if(txtMore != "") {
var moretext = replaceVars(txtMore, authorName, postTitle, cmtDate);
document.write('<div title="'+tooltip+'" class="rc-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>

Ubahsuai ikut cita rasa sebelum SAVE

var numRecentComments = 6;
- Ubah nilai "6" untuk set bilangan komen yang akan dipaparkan.

var maxCommentChars = 67;
- Ubah nilai "67" untuk set panjang komen

Mommy Pinky
- untuk sembunyikan komen anda sendiri, ubah dengan nama blogger anda sebanyak 2 kali.

var sizeAvatar = 60;
- untuk ubah saiz avatar, tukar nilai "60".
 
-webkit-border-radius: 100px;-moz-border-radius: 100px;border-radius: 100px;
- jika tak nak avatar bentuk bulat, delete kod di atas.

Selamat berjaya!
Kalau dah berjaya, share la dengan MP, kita happy sama-sama. Hihi :)








Comments
24 Comments

24 komen:

kacang on 12:30 AM said...

wah. nice lah=D

♡ ⓒⓘⓚ ⓨⓐⓨⓐ™ ♡ ツ on 1:53 PM said...

nice lahhh . tapi yaa pakai blogskin . :3 ni kalau blogskin boleh guna tak ?? cantikk lahh .

Mommy Pinky on 2:07 PM said...

kacang Nice kan :)

Mommy Pinky on 2:08 PM said...

♡ ⓒⓘⓚ ⓨⓐⓨⓐ™ ♡ ツ tak tau la, MP tak pernah cuba blogskin. cuba la dulu. hihi :)

Roha on 5:46 PM said...

mommy pinky..nice sangat3..
akak try buat..tapi komen akak yany banyak keluar..akak nak sembunyi kan komen akak..akak dah tukar mommy pink tu ke nama blog akak tapi gagal huhu...:(

Mommy Pinky on 6:05 PM said...

Hai sis Roha. Nama Mommy Pinky tu tukar nama blogger akak iaitu, Roha :)

Cuba lah.

Razfira on 10:21 AM said...

tq mommy! the best!

aTieYusof Family on 12:07 PM said...

wah! nice lah..nti nak copy..:)

Akeyla Azmi on 1:04 PM said...

Alamak ada muka qila lah. nasibaik separuh hahahaha. Malu je :D

Hehehehe nanti qila nak edit blog mcm kak zana lah TT_TT
cantik. Sangat simple.

Kak zana, cmane nak buat navi bar cemtu T_T

nak gaaaaaaaaaaaaaaaaakkk

Montana on 5:04 PM said...

terima kasih atas perkongsian

Aefa Aerisya on 9:21 PM said...

simple but nice.. :D nnti fre2 aefa nk wat jugak hihi.. tq wat tuto :D

Roha on 9:57 PM said...

mommy pinky..still kuar jugak comment akak,walau dah tukar "roha" :(

shahrina on 2:37 PM said...

comel gak ni. Nampak lebih kemas bila dah pasang kat belog.

Mommy Pinky on 6:48 PM said...

Tq dear Razfira :)

Mommy Pinky on 6:49 PM said...

Jom copy aTieYusof Family :)

Mommy Pinky on 6:50 PM said...

Hihi. Malu la pulak Akeyla Azmi ni ;p Nanti ada masa kak zana buat tutorial ni. Hee..

Mommy Pinky on 6:52 PM said...

Sama-sama Montana :)

Mommy Pinky on 6:52 PM said...

Sama-sama, nnt dah berjaya buat share la ye Aefa Aerisya :)

Mommy Pinky on 6:54 PM said...

Sis Roha, kalau perlukan pertolongan boleh roger MP ye di https://www.facebook.com/belogmommypinky ;)

Mommy Pinky on 6:55 PM said...

Hi dear, shahrina dah pasang ke? hihi :)

Mardiah Diana on 2:53 PM said...

Suka sangat dengan tutorial ni...saya copy yer...

Mommy Pinky on 10:10 PM said...

Ok dear Mardiah Diana :)

SHAHIDATUL AKMAL on 2:57 PM said...

:e thank a lot.. sgt2 canteq, dah buat kat blog saya dah.. tq...

baby melody on 1:33 AM said...

yeahhh dah jd..tq3 sis :g

:a :b :c :e :f :g :h :i :j :k :m :n

Post a Comment

 

Copyright © 2008-2017 By Zana Mn. All rights reserved | Sign in, MP Design