Baiklah pada kesempatan kali ini saya akan memberiakn tutorial mengenai cara 'Pasang Blog Peeper (Comments+Reading List) V2', dimana pada postingan saya sebelumnya 'Pasang Blog Peeper (Daftar Comments) V1',
jadi selain menampilkan daftar komentar, bisa juga menampilkan daftar
artikel ato semacam (Recent posts), ini hanya lanjutan dari postingan
saya yang lalu. :D baiklah untuk contoh bisa klik disini.
Nah jika sobat tertarik memasangnya, caranya sangat mudah cukup menambahkan kode brikut kedalam postingan baru dan pilih bagian EDIT HTML lalu TERBITKAN ENTRI. dan slesai.. :D
<div class="akadwa">
<div id="tempat-blog-peeper"></div>
<div class="outbow" style="border:none; background:#eee">
<label for="input-domain-blog" style="color:#333333"><input type="text" id="input-domain-blog" value="ut2a-4down" onFocus="this.select()" style="border:none; text-align:right"/>.blogspot.com</label>
<span class="tombol" onClick="mulaiFeeds('',document.getElementById('input-domain-blog').value+'.blogspot.com','posts',4)">Load</span>
<select id="masukan-domain-blog" onChange="mulaiFeeds('',this.value,'posts',4)" style="border:1px solid #E3E3E3">
<option selected="selected" value="ut2a-4down.blogspot.com">ut2a-4down.blogspot.com</option>
<option value="ta-movie87.blogspot.com">ta-movie87.blogspot.com</option>
</select>
</div>
</div>
<style type="text/css">
.akadwa a{text-decoration:none; color:#A3E3A3; cursor:pointer}
.akadwa a:visited{text-decoration:none; color:#628A6F}
.akadwa a:hover{text-decoration:underline; color:orange}
.akadwa .grande, #tempat-blog-peeper, .akadwa label, .akadwa input, .akadwa select{font-family:"lucida grande",tahoma,verdana,arial,sans-serif; font-size: 11px}
.akadwa .round3, .akadwa a.list-archive{-moz-border-radius:3px; -webkit-border-radius:3px; -goog-ms-border-radius:3px; border-radius:3px}
.akadwa .round7, .peeper-post, #peeper-atas, #peeper-kontrol, .category-list, .comment-perpost, .outbow{-moz-border-radius:7px; -webkit-border-radius:7px; -goog-ms-border-radius:7px; border-radius:7px}
.akadwa .white80{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEWTFmHsJ5SVNDr2DFnbevc8e39XsLtiveIU-bVbqdBHfOm-A2qmONm13Q5duhVdCiUfgHq4qKPISjgVdlDF2Wz8Lvr6R8pKQHYmNYdko-nmcmwos7kNFelOQlAprGmj8nI7ZAeISJW_to/s1600/white80.png)}
.akadwa .black25, .comment-perpost{background-image:url(http://3.bp.blogspot.com/_bBL9ze_JZsw/TT_XA8lKqMI/AAAAAAAAAM0/uiy-BP_zbN8/s1600/black25.png)}
.akadwa .black50, #peeper-atas, #peeper-kontrol{background-image:url(http://1.bp.blogspot.com/_bBL9ze_JZsw/TT_VysqlknI/AAAAAAAAAMs/OgtZMowV_m4/s1600/black50.png)}
.akadwa .indie, .akadwa h2{font-family:Indie Flower,comic sans ms,lucida grande,tahoma,verdana,arial,sans-serif}
.akadwa .tombol, .akadwa a.tombol, .akadwa a.tombol:visited{line-height:1; color:#333333; padding:2px 7px; display:inline-block; border:1px solid #333333; -moz-border-radius:3px; -webkit-border-radius:3px; -goog-ms-border-radius:3px; border-radius:3px; margin:0 1px 1px 0; text-decoration:none; cursor:pointer; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoJic6HgegS5MeOtloztj6igwh6QKOcXTNOr4sqSR1VIJuE5abrHhyY0KC5DtFoBvLlqZRj2o4T4SXoxYx3wISJ9bJzWSgAVXhNuOwN2RmU3vLPxoEZf7YgDAcUYvk0X58anlDS0FQc9ie/s1600/btnwht.jpg) repeat scroll center center; -moz-background-size:auto 100%; -webkit-background-size:auto 100%; background-size:auto 100%}
.akadwa .tombol:hover{text-decoration:none; border:1px solid blue; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV7tTA3eFxRFTJ50PkjQsmQtcS6LS8cW_h1TMMSMFgPrndalwbec8j5KCeYF0jKOLXJeodS8KY1xeyZ_Ohq8nug4TQGEvmCk6leyXUJW-4dEsiDEcl9ateS4kfJNsBt_tv5FJjkGs1U_j6/s1600/btnblu.jpg)}
.akadwa .tombol:active{border:1px solid darkgreen; color:darkred}
.akadwa a.list-archive{text-transform:capitalize; display:block; padding:2px 7px; border:1px outset #312C20; background-color:#3C464A; text-indent:0px; color:#EFE0AF; margin-bottom:1px; text-decoration:none}
.akadwa a.list-archive:visited{background-image:none; background-color:#4C565A; border:1px solid transparent; color:#CCCCCC}
.akadwa a.list-archive:hover, .akadwa a.list-archive:active, .akadwa a.list-archive:focus{color:yellow; text-decoration:none; background-color:#C52A2C}
.akadwa a.list-archive:active, .akadwa a.list-archive:focus{border:1px solid transparent}
.category-list a.list-archive{display:inline-block}
#tempat-blog-peeper{text-align:center; color:#C3C3C3}
#tempat-blog-peeper small{font-size:11px}
.peeper-post{vertical-align:top; text-align:left; display:inline-block; width:235px; padding:5px 7px 5px 5px; margin:0 3px 5px; background:#46362D url(http://feedjit.com/images/w2/overlayDark2.png) repeat-x scroll bottom center; color:#aaaaaa}
#peeper-atas, #peeper-kontrol{padding:5px; margin-bottom:10px}
#peeper-bawah{margin:0 -5px 10px -5px}
.category-list{text-align:center; padding:5px; border:1px solid #E3E3E3}
.outbow{margin-bottom:10px; width:auto; font-family:tahoma,verdana; font-size:11px; color:#C3C3C3; text-align:center; padding:5px; border:1px solid #E3E3E3}
.comment-perpost{margin-bottom:10px; padding-bottom:5px; border-bottom:1px dashed #999999}
</style>
<script type="text/javascript">
<!--
if(window.location.href.split('/')[0]=='file:'){document.getElementById('tempat-blog-peeper').style.margin='20px auto'}
var blogDomainX='ut2a-4down.blogspot.com';
function mulaiFeeds(uri,bd,ft,mr,si,ct){
window.scrollTo(0,0); var mxRes=10; var strIndx=1; var ctgr=''; var kompos='';
if(uri==null || uri==''){
if(bd!=null && bd!=''){blogDomainX=bd}
if(ft==null || ft==''){var feedType='posts'}else{var feedType=ft}
if(mr!=null && mr!=''){mxRes=mr}
if(si!=null && si!=''){strIndx=si}
if(ct!=null){ctgr='/-/'+escape(ct)}
}else{
if(uri.split('/').length>6 && uri.split('/')[2]=='www.blogger.com'){
var feedType=uri.split('/')[5];
}else{
var feedType=uri.split('/')[4];
blogDomainX=uri.split('/')[2];
}
if(uri.split('?')[1]){var ralun=uri.split('?')[1].split('&'); for(x=0; x<ralun.length; x++){
if(ralun[x].split('=')[0]=='max-results'){mxRes=ralun[x].split('=')[1]}
if(ralun[x].split('=')[0]=='start-index'){strIndx=ralun[x].split('=')[1]}
}}
for(x=0; x<uri.split('/').length; x++){
if(uri.split('/')[x]=='-'){ctgr='/-/'+uri.split('/')[(x+1)]}
if(uri.split('/')[x].split('?')[0]=='default'){feedType=uri.split('/')[(x-1)]}
}
}
if(ft=='kp'){kompos=uri.split('/')[4]+'/'; feedType='comments'}
var lolodinganX='<center><img class="nostyle" src="http://1001skies.com/images/loading2.gif"/></center>';
var tbp=document.getElementById('tempat-blog-peeper');
this.listCategory=function(post){
var lingNext=''; var lingPrev='';
tbp.innerHTML='<div id="peeper-atas"></div><div id="peeper-bawah"></div><div id="peeper-kontrol"></div>';
if(post.feed){
var tulis=''; var tulis4='';
if(post.feed.link){for(x in post.feed.link){if(post.feed.link[x].href && post.feed.link[x].rel){
if(post.feed.link[x].rel=='next'){lingNext=post.feed.link[x].href}
if(post.feed.link[x].rel=='previous'){lingPrev=post.feed.link[x].href}
if(post.feed.link[x].rel=='alternate' && post.feed.title){
tulis+='<center class="stnd-font judul-blog">';
tulis+='<small>Official Site</small>';
tulis+='<h3 style="font-size:20px; margin:0; line-height:20px">';
tulis+='<a class="textshadow-header" href="'+post.feed.link[x].href+'" style="text-decoration:none">'+post.feed.title.$t+'</a>';
tulis+='</h3>';
tulis+='</center>';
if(post.feed.link[x].href.split('/')[2]){blogDomainX=post.feed.link[x].href.split('/')[2]}
}
}}}
if(post.feed.subtitle){tulis+='<small style="display:block; margin-bottom:10px; text-align:center">'+post.feed.subtitle.$t+'</small>'}else{tulis+='<div style="padding:10px; clear:both"></div>'}
tulis4+='<small style="display:block; float:left">';
if(post.feed.openSearch$startIndex && post.feed.openSearch$itemsPerPage){tulis4+='Displaying <strong>'+post.feed.openSearch$startIndex.$t+'</strong> to <strong>'+(post.feed.openSearch$itemsPerPage.$t*1+post.feed.openSearch$startIndex.$t*1-1)+'</strong> of '}
if(post.feed.openSearch$totalResults){tulis4+='<strong>'+post.feed.openSearch$totalResults.$t+'</strong> '+feedType}
tulis4+='</small>';
if(post.feed.updated){tulis4+='<small style="display:block; text-align:right">Last updated <abbr style="cursor:pointer; border:none" title="'+tukangJam(post.feed.updated.$t).split('_')[0]+'">'+tukangJam(post.feed.updated.$t).split('_')[1].replace(' jam ',' at ')+'</abbr></small>'}
tulis4+='<div class="category-list">';
if(post.feed.category){
post.feed.category=post.feed.category.sort(function(){return 0.5-Math.random()});
for(x in post.feed.category){if(post.feed.category[x].term){tulis4+='<a class="list-archive" href="http://'+blogDomainX+'/feeds/posts/default/-/'+escape(post.feed.category[x].term)+'" onClick="javascript:mulaiFeeds(this.href); return false">'+post.feed.category[x].term+'</a>'}}
}
tulis4+='<div style="padding-top:5px">';
tulis4+='<a class="list-archive" href="http://'+blogDomainX+'/feeds/posts/default?alt=json-in-script" onClick="javascript:mulaiFeeds(this.href); return false">All articles</a>';
tulis4+='<a class="list-archive la-kom" href="http://'+blogDomainX+'/feeds/comments/default?alt=json-in-script" onClick="javascript:mulaiFeeds(this.href); return false">All Comments</a>';
tulis4+='</div>';
tulis4+='</div>';
document.getElementById('peeper-atas').innerHTML=tulis+tulis4;
if(post.feed.entry){
for(x in post.feed.entry){
var pb=document.createElement('div');
var tulis2='';
if(post.feed.entry[x].author){
if(post.feed.entry[x].author[0].gd$image && post.feed.entry[x].author[0].gd$image.src){
tulis2+='<img src="';
if(post.feed.entry[x].author[0].gd$image.src.split('//')[0]==''){tulis2+='http:'}
tulis2+=post.feed.entry[x].author[0].gd$image.src+'" style="float:left; width:50px; padding:0"/>';
}
tulis2+='<div class="per-post-right" style="margin-left:55px">';
if(post.feed.entry[x].author[0].uri){
tulis2+='<a href="'+post.feed.entry[x].author[0].uri.$t+'" target="_blank" style="text-decoration:none; margin-bottom:5px">';
}
if(post.feed.entry[x].author[0].name){
tulis2+='<strong>'+post.feed.entry[x].author[0].name.$t+'</strong>';
}
if(post.feed.entry[x].author[0].uri){
tulis2+='</a>';
}
tulis2+='<div class="per-post-att">';
if(post.feed.entry[x].media$thumbnail){
tulis2+='<img src="'+post.feed.entry[x].media$thumbnail.url+'" style="margin-right:5px; float:left; max-width:70px; _width:70px"/>';
}
tulis2+='<div class="per-post-att-right">';
var pejapapos='post';
if(post.feed.entry[x].link){for(y in post.feed.entry[x].link){if(post.feed.entry[x].link[y].rel){
if(post.feed.entry[x].link[y].rel=='alternate'){
var linglung=post.feed.entry[x].link[y].href;
var jadilinglung='<a class="list-archive" href="'+linglung.split('?')[0]+'" style="display:block; margin:0">';
if(post.feed.entry[x].link[y].title){
jadilinglung+=post.feed.entry[x].link[y].title;
}else{
jadilinglung+=linglung.split('/')[linglung.split('/').length-1].split('.')[0].replace(/-/gi,' ');
}
jadilinglung+='</a>';
if(feedType!='comments'){tulis2+=jadilinglung}
if(linglung.split('/')[3]=='p'){pejapapos='page'}
}
if(post.feed.entry[x].link[y].rel=='self'){
var blogay=post.feed.entry[x].link[y].href.split('/')[4];
var pejapaposay=post.feed.entry[x].link[y].href.split('/')[5];
var lesay=post.feed.entry[x].link[y].href.split('/')[8];
var linglung2='http://www.blogger.com/comment.g?blogID='+blogay+'&'+pejapapos+'ID='+pejapaposay+'&isPopup=true#c'+lesay;
}
}}}
var snipet='';
if(post.feed.entry[x].summary){
snipet=post.feed.entry[x].summary.$t;
}else if(post.feed.entry[x].content){
snipet=post.feed.entry[x].content.$t;
}
tulis2+='<small style="display:block; word-wrap:break-word; text-align:justify">';
if(feedType=='comments'){tulis2+=snipet}else{tulis2+=snipet.substr(0,200).replace(/</gi,'<')}
tulis2+='</small>';
if(feedType=='comments'){
tulis2+='<div class="tombol" onClick="window.open(\''+linglung2+'\',\'komeng\',\'width=500,height=600,toolbar=0,location=1,statusbar=1,menubar=0,scrollbars=1\')">Reply</div>';
}else{
tulis2+='<div class="tombol" onClick="window.open(\''+linglung+'\')">More</div>';
}
if(post.feed.entry[x].published){
var waktunya=tukangJam(post.feed.entry[x].published.$t);
tulis2+='<small style="display:block; text-align:right">';
tulis2+='<abbr style="cursor:pointer; border:none" title="'+waktunya.split('_')[1].replace(' jam ',' at ')+'">';
tulis2+=waktunya.split('_')[0];
tulis2+='</abbr>';
tulis2+='</small>';
}
tulis2+='</div>';
tulis2+='<div style="clear:both"></div>';
tulis2+='</div>';
tulis2+='</div>';
}
tulis2+='<div style="clear:both"></div>';
if(feedType=='comments'){
if(document.getElementById('pst'+pejapaposay)){
pb.innerHTML=tulis2; pb.setAttribute('class','peeper-post');
document.getElementById('pst'+pejapaposay).insertBefore(pb,document.getElementById('pst'+pejapaposay).lastChild);
}else{
var rehabpb='<div id="pst'+pejapaposay+'" class="comment-perpost">';
rehabpb+='<h2 style="margin:0; padding:3px 5px 5px">'+jadilinglung+'</h2>';
rehabpb+='<div class="peeper-post">'+tulis2+'</div>';
rehabpb+='<div>';
if(ft!='kp'){rehabpb+='<a href="http://'+blogDomainX+'/feeds/'+pejapaposay+'/comments/default?alt=json-in-script" class="list-archive" style="display:inline-block" onClick="javascript:mulaiFeeds(this.href,\'\',\'kp\'); return false">More comments from this post >></span>'}
rehabpb+='</div>';
rehabpb+='</div>';
pb.innerHTML=rehabpb;
document.getElementById('peeper-bawah').appendChild(pb);
}
}else{
pb.innerHTML=tulis2; pb.setAttribute('class','peeper-post');
document.getElementById('peeper-bawah').appendChild(pb);
}
}
}
}
var tulis3=tulis4;
if(lingNext!='' || lingPrev!=''){
tulis3='<div style="clear:both"></div>';
if(ft=='kp'){var tamahan=',\'\',\'kp\''}else{var tamahan=''}
if(lingNext!=''){tulis3+='<a class="list-archive" href="http://'+blogDomainX+'/feeds/'+kompos+feedType+'/'+lingNext.split('\/'+feedType+'\/')[1]+'" onClick="javascript:mulaiFeeds(this.href'+tamahan+'); return false" style="float:right">Older '+feedType+' >></a>'}
if(lingPrev!=''){tulis3+='<a class="list-archive" href="http://'+blogDomainX+'/feeds/'+kompos+feedType+'/'+lingPrev.split('\/'+feedType+'\/')[1]+'" onClick="javascript:mulaiFeeds(this.href'+tamahan+'); return false" style="float:left"><< Newer '+feedType+'</a>'}
tulis3+='<div style="clear:both"></div>';
}
document.getElementById('peeper-kontrol').innerHTML=tulis3;
};
(function(){
var srpSrc='http://'+blogDomainX+'/feeds/'+kompos+feedType+'/default'+ctgr+'?alt=json-in-script&start-index='+strIndx+'&max-results='+mxRes+'&callback=listCategory';
var e=document.createElement('script'); e.async=true; e.src=srpSrc;
document.getElementsByTagName('head')[0].appendChild(e);
if(document.getElementById('peeper-bawah')){document.getElementById('peeper-bawah').innerHTML=lolodinganX+'waiting response from:<br/>'+srpSrc}else{tbp.innerHTML=lolodinganX+'waiting response from:<br/>'+srpSrc}
}());
}
function tukangJam(what){
//format 2011-11-12T10:45:30+000 or 2011-12-09T10:23:28.695+07:00
var harihari=["Minggu","Senen","Selasa","Rabu","Kamis","Jum'at","Sabtu"];
var bulanbulan=["January","February","Maret","April","Mei","June","July","Agustus","September","Oktober","November","Desember"];
var now=new Date(); var now_str=now.toString();
var now_hr=now.getDay(); var now_tgl=now.getDate(); var now_bln=now.getMonth()+1; var now_thn=now.getFullYear();
var now_time=now_str.split(' ')[4]; var now_GMT=now_str.split(' ')[5]; var now_mnt=now_time.split(':')[1]; var now_jam=now_time.split(':')[0];
if(now_jam>12){if(now_jam<15){var ampm_now='siang'}else if(now_jam<18){var ampm_now='sore'}else if(now_jam<20){var ampm_now='magrib'}else{var ampm_now='malem'}}else{if(now_jam<4){var ampm_now='dini hari'}else if(now_jam<6){var ampm_now='subuh'}else if(now_jam<10){var ampm_now='pagi'}else{var ampm_now='siang'}}
var now_nm_hr=harihari[now_hr]; var now_nm_bln=bulanbulan[(now_bln-1)];
if(now_str.split('\(')[1]){var now_TZ=now_str.split('\(')[1].replace('\)','')}else{var now_TZ='Greenwich Mean Time'}
if(what==null || what==''){
var harita_now='now_'+now_nm_hr+', '+now_tgl+' '+now_nm_bln+' '+now_thn+' jam '+now_jam+':'+now_mnt+' '+ampm_now;
return harita_now;
}else{
var getwhat=what.replace('T',' ').replace(/-/gi,' ').split('+')[0].split('.')[0]+' GMT';
if(what.split('+')[1]){getwhat+='+'+what.split('+')[1]}else{if(what.split('T')[2]){getwhat+='-'+what.split('T')[2].split('-')[1]}else{getwhat+='-'+what.split('T')[1].split('-')[1]}}
var d=new Date(getwhat); var d_str=d.toString();
var d_hr=d.getDay(); var d_tgl=d.getDate(); var d_bln=d.getMonth()+1; var d_thn=d.getFullYear();
var d_time=d_str.split(' ')[4]; var d_GMT=d_str.split(' ')[5]; var d_mnt=d_time.split(':')[1]; var d_jam=d_time.split(':')[0];
if(d_jam>12){if(d_jam<15){var d_ampm='siang'}else if(d_jam<18){var d_ampm='sore'}else if(d_jam<20){var d_ampm='magrib'}else{var d_ampm='malem'}}else{if(d_jam<4){var d_ampm='dini hari'}else if(d_jam<6){var d_ampm='subuh'}else if(d_jam<10){var d_ampm='pagi'}else{var d_ampm='siang'}}
var d_nm_hr=harihari[d_hr]; var d_nm_bln=bulanbulan[(d_bln-1)];
var delta=now-d;
var detiks=1000*1; var minutes=1000*60; var hours=minutes*60; var days=hours*24; var month=days*30; var years=days*365;
var harita='teuing';
if(delta<=detiks){harita='Karak ge crot bieu'}else
if(delta>detiks && delta<=minutes){harita='Nembe '+Math.round(delta/detiks)+' detik bieu'}else
if(delta>minutes && delta<=hours){harita='Nembe '+Math.round(delta/minutes)+' menit bieu'}else
if(delta>hours && delta<=days){harita=Math.round(delta/hours)+' hours ago'}else
if(delta>days && delta<=month){harita=Math.round(delta/days)+' days ago'}else
if(delta>month && delta<=years){harita=Math.round(delta/month)+' months ago'}else
if(delta>years){harita=Math.round(delta/years)+' years ago'}
harita+='_'+d_nm_hr+', '+d_tgl+' '+d_nm_bln+' '+d_thn+' jam '+d_jam+':'+d_mnt+' '+d_ampm;
return harita;
}
}
mulaiFeeds('','','posts');
document.write(unescape('%3C/div%3E%3Cdiv class="round7 black50" style="padding:10px; margin-top:30px"%3E'));
//-->
</script>
KET::
- Silahkan ganti teks yang berwarna merah dengan alamt blog masing-masing.!!
Selamat Mencoba!
