Mas Uya

Halo semuanya,Selamat malam Minggu sobat blogger.Kembali lagi bersama saya Mas Uya disini saya akan share Tutorial Cara Membuat Recent Comment Buka Tutup Diblog.
Recent Comment Buka Tutup Diblog sangat mudah digunakan,dan tidak perlu mengganti URL blog karna sudah otomatis terdeteksi.
Tutorial ini juga mudah dipahami oleh para blogger,Ya dari pada saya banyak basa basi,Mending langsung tutornya saja oke.

Tutorial:
1.Login ke blogger
2.Masuk menu Template-Edit HTML
3.Cari ]]></b:skin> , Dan pastekan css dibawah ini tepat dibawah code ]]></b:skin>

<style type='text/css'>
.chat-box{  font:normal normal 11px/1.4 Tahoma,Verdana,Sans-Serif;  color:#333;  width:200px;  border:1px solid #344150;  border-bottom:none;  background-color:white;  position:fixed;  right:10px;  bottom:0;  z-index:9999;  -webkit-box-shadow:1px 1px 5px rgba(0,0,0,.2);  -moz-box-shadow:1px 1px 5px rgba(0,0,0,.2);  box-shadow:1px 1px 5px rgba(0,0,0,.2)}
.chat-box >input[type="checkbox"]{ display:block;  margin:0 0;  padding:0 0;  position:absolute;  top:0;  right:0;  left:0;  width:100%;  height:26px;  z-index:4;  cursor:pointer;  opacity:0;  filter:alpha(opacity=0)}
.chat-box >label{ display:block;  height:24px;  line-height:24px;  background-color:#344150;  color:white;  font-weight:bold;  padding:0 1em 1px}
.chat-box >label:before{content:attr(data-collapsed)}
.chat-box .chat-box-content{ padding:10px;  display:none}
.chat-box >input[type="checkbox"]:hover+label{background-color:#404D5A}
.chat-box >input[type="checkbox"]:checked+label{background-color:#212A35}
.chat-box >input[type="checkbox"]:checked+label:before{content:attr(data-expanded)}
.chat-box >input[type="checkbox"]:checked ~ .chat-box-content{display:block}
</style>

4.Kalau sudah dicopy klik simpan,Jangan keluar dlu karna masih ada tahap berikutnya
5.Cari code </body> , Dan pastekan HTML berikut tepat diatas code </body>

<div class='chat-box'>
<input type='checkbox'/>
<label data-collapsed='Open comment' data-expanded='close comment'/>
<!-- Don't edit here,auto recent comment -->
<div class='chat-box-content'>
<style type='text/css'>
.rc{padding-left:24px; padding-top:6px; color:#222; overflow:hidden}
.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 steelblue; -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; overflow:hidden}
.rc-footer{font-size:11px; float:right}
#rcw-cr{font-family:Arial,Tahoma; font-size:9px; padding-top:7px; display:block; overflow:hidden}
</style>
<!-- setting your comment -->
<script type='text/javascript'>
//<![CDATA[
function replaceVars(e,t,n,r){e=e.replace("[user]",t);e=e.replace("[date]",r.toLocaleDateString());e=e.replace("[datetime]",r.toLocaleString());e=e.replace("[time]",r.toLocaleTimeString());e=e.replace("[title]",n.replace(/\"/g,"&quot;"));var i=e.indexOf("[date ");if(i>-1){var s=/\[date\s+(.+?)\]/.exec(e)[1];if(s!=""){var o=s.replace(/yyyy/i,r.getFullYear());o=o.replace(/yy/i,r.getFullYear().toString().slice(-2));o=o.replace("MM",String("0"+(r.getMonth()+1)).slice(-2));o=o.replace("mm",String("0"+r.getMinutes()).slice(-2));o=o.replace("ss",String("0"+r.getSeconds()).slice(-2));o=o.replace("dd",String("0"+r.getDate()).slice(-2));o=o.replace("hh",String("0"+r.getHours()).slice(-2));e=e.replace(/\[date\s+(.+?)\]/,o)}}return e}function getPostUrlsForComments(e){for(var t=0;t<e.feed.entry.length;t++){var n=e.feed.entry[t];for(var r=0;r<n.link.length;r++){if(n.link[r].rel=="alternate"){href=n.link[r].href;break}}urlToTitle[href]=n.title.$t}}function showRecentComments(e){var t={};var n=0;if(numPerPost){while(numPerPost<numRecentComments){for(var r=0;r<e.feed.entry.length;r++){var i=e.feed.entry[r];if(i.author[0].name.$t=="Blogger User")continue;if(i["thr$in-reply-to"]){if(!t[i["thr$in-reply-to"].href])t[i["thr$in-reply-to"].href]=1;else t[i["thr$in-reply-to"].href]++;if(t[i["thr$in-reply-to"].href]<=numPerPost)n++}}if(n>=numRecentComments)break;numPerPost++;n=0;t={}}if(numRecentComments==numPerPost)numPerPost=0}t={};n=0;for(var r=0;n<numRecentComments&&r<e.feed.entry.length;r++){var i=e.feed.entry[r];if(i.author[0].name.$t=="Blogger User")continue;if(numPerPost&&t[i["thr$in-reply-to"].href]&&t[i["thr$in-reply-to"].href]>=numPerPost)continue;if(i["thr$in-reply-to"]){if(!t[i["thr$in-reply-to"].href])t[i["thr$in-reply-to"].href]=1;else t[i["thr$in-reply-to"].href]++;n++;var s="";for(var o=0;o<i.link.length;o++){if(i.link[o].rel=="alternate"){s=i.link[o].href;break}}if(s==""){n--;continue}var u=s.split("?")[0];var a="";if("content"in i)a=i.content.$t;else a=i.summary.$t;a=a.replace(/<br[^>]*>/ig," ");a=a.replace(/<\S[^>]*>/g,"");var f="-";if(urlToTitle[u])f=urlToTitle[u];else{if(u.match(/\/([^/]*)\.html/))f=u.match(/\/([^/]*)\.html/)[1].replace(/_\d{2}$/,"");f=f.replace(/-/g," ");f=f[0].toUpperCase()+f.slice(1)}if(maxPostTitleChars&&f.length>maxPostTitleChars){f=f.substring(0,maxPostTitleChars);var l=f.lastIndexOf(" ");f=f.substring(0,l)+"..."}var c=i.author[0].name.$t;var h="";if(i.author[0].uri&&i.author[0].uri.$t!="")h=i.author[0].uri.$t;var p=urlAnoAvatar;var d="http://www.blogger.com/profile/";if(trueAvatars&&i.author[0].gd$image&&i.author[0].gd$image.src&&h.substr(0,d.length)==d)p=i.author[0].gd$image.src;else{var v=document.createElement("a");if(h!=""){v.href=h;p="http://www.google.com/s2/favicons?domain="+v.hostname}}if(urlMyProfile!=""&&h==urlMyProfile&&urlMyAvatar!="")p=urlMyAvatar;if(p=="http://img2.blogblog.com/img/b16-rounded.gif"&&urlNoAvatar!="")p=urlNoAvatar;var m="s"+sizeAvatar;p=p.replace(/\/s\d\d+-c\//,"/"+m+"-c/");if(cropAvatar)m+="-c";p=p.replace(/\/s\d\d+(-c){0,1}\//,"/"+m+"/");if(c=="Anonymous"&&txtAnonymous!=""&&p==urlAnoAvatar)c=txtAnonymous;var g='<img height="'+sizeAvatar+'" width="'+sizeAvatar+'" title="'+c+'" src="'+p+'" />';if(h!="")g='<a href="'+h+'">'+g+"</a>";var y="";if(urlMyProfile!=""&&h==urlMyProfile)y=" rc-admin";var b=i.published.$t.match(/\d+/g);var w=new Date(b[0],b[1]-1,b[2],b[3],b[4],b[5]);var E=txtWrote;if(txtWrote.indexOf("[")==-1)E=c+" "+txtWrote;else E=replaceVars(E,c,f,w);var S=replaceVars(txtTooltip,c,f,w);if(!/#/.test(s))s+="#comments";document.write('<div title="'+S+'" class="rc'+y+'">');document.write('<div title="'+S+'" class="rc-header'+y+'"><div title="'+S+'" class="rc-ico'+y+'">'+g+'</div><a title="'+S+'" href="'+s+'">'+E+" </a></div>");if(a.length<maxCommentChars)document.write('<div title="'+S+'" class="rc-body'+y+'">'+a+"</div>");else{a=a.substring(0,maxCommentChars);var l=a.lastIndexOf(" ");a=a.substring(0,l);document.write('<div title="'+S+'" class="rc-body'+y+'">'+a+"...</div>");if(txtMore!=""){var x=replaceVars(txtMore,c,f,w);document.write('<div title="'+S+'" class="rc-footer'+y+'"><a title="'+S+'" href="'+s+'">'+x+"</a></div>")}}document.write('<div style="clear:both;"></div></div>')}}}var numRecentComments=4;var maxCommentChars=67;var trueAvatars=true;var urlMyAvatar="";var urlMyProfile="";var cropAvatar=true;var sizeAvatar=50;var urlNoAvatar="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIq2QXTJj3MZj7cbBfCy1anW-3ur-iLlj9S-FEI-AVQtY7vocl5xpzoe1EELlvcRdeavfHQQcmcdNAbQh2iAueC-j0wf-xUIQ9iBm2Ijwu8OeViE5oXwhzkR8l7RmuW4AZZx0_79PzsHwe/"+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={};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}}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>
</div></div>