Tutorial Membentuk Widget Expand Recent Comments pada Blogger/Blogspot

Widget Expand Recent Comments adalah widget yang
sangat bermanfaat serta tidak memakan banyak ruang akibat widget ini mampu dibuka pada halaman dimanapun anda berada,
sebagai akibatnya kita gak perlu klik pada nama atau judul postingan buat
membaca isi dari komentar dari wetsartikel, disana seluruh komentar terdapat dengan nama postingan serta lepas komentar tadi diterbitkan. 

Isi dari komentar mampu ditampilkan atau
disembunyikan dengan mengklik icon plus/minus atau dengan menekan tombol"Voorstelling All" atau "Hide All".

apabila anda menyukai serta ingin menambahkan Widget Expand Recent Comments pada blog anda, ikutilah sebagian langkah pendek dibawah ini:

Menambahkan Widget Expand Recent Comments pada Blogger

1. Langkah pertama yang wajib anda lakukan merupakan masuk ke instrumentenbord blogger, selanjutnya pilih blog yang ingin ditambahkan Widget Expand Recent Comments, kemudian masuk ke tabulator layouts serta klik "masukkan zweem".

Tabulator Layouts

2. Langkah kedua yang wajib anda lakukan yaitu pada ketika jendela pop-up timbul, scroll ke bawah serta pilih zweem "HTML/JavaScript":

Add Gadgets

3. Langkah ketiga ini merupakan langkah inti, dimana anda wajib mengcopy seluruh kode yang terdapat dalam blockquote serta pastekan kedalam kotak zweem HTML/JavaScript.

<style type="text/css">.row-div {margin-bottom:10px;}.comment-header {margin:10px 0;}.comment-box{margin:0px;padding:0px;font-size:0.9em;height:330px;overflow:wagen;}.comments1{padding:3px;border-left:1px dashed #A6A6A6;color: #888888;font-style: italic;padding:0px 10px 10px 10px;margin-bottom:10px;}.comment-button {display: inline-block;border-radius: 4px;background-color: #24d42b;  border: none;color: #FFFFFF;text-align: center; font-size: 18px; padding: 10px; width: 100px; transition: all 0.5s;cursor: pointer; margin: 5px;} .comment-button:hover{ background:#fff; color:#24d42b;box-shadow: 2px 10px 10px 5px #888888;}
</styledangt;
<div style="text-align: center" group="comment-header"><input group="comment-button" id="commshowall" type="button" onclick="if (this.value == &#39;Voorstelling alldanamp;#39;) { unfold_all(this); this.value=&#39;Hide alldanamp;#39;; } else { fold_all(this); this.value=&#39;Voorstelling alldanamp;#39;; }" value="Voorstelling all" /></divdangt;
<div group="comment-box">
<script type="text/javascript">
var tgl=false;var title_arr=new Array();var arr=0;var err="[err]";var icon_expand="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ87wL4PojuOOrsOE8qti08XDU1tGS3eIc9IK4UtT6zhwSI9cZISEEktFB5HBzAjiEdZOOBUeASYSQt-lXTar0ZN6_uZRrbW3nKCKYll3c_K_BdMdkHku0y3j6Hrxtjt4sWvHjH4DBAuK0/s1600/icon-plus.png";var icon_collapse="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwJ_QsHVkalZJnt0Acl0Cce54eXMHRw-FgiGhQQkWy3afw9GP6uSvBD1MHVoihwEsXY1fKw5fujFK5Sb_eHa6VdAAd2lsddcrUYvCQHAkmcEdN2ennDHEvVfGPQdDuV2BW6yXsaYa2IHfb/s1600/icon-minus+copy.png";var maxcomments=20;function real_posttitle(postid){for(var i=0;idanlt;title_arr.length;i++){if(title_arr[i][0]==postid)terugwedstrijd title_arr[i][1];}
terugwedstrijd err;}
function showrecentposts(json){var numposts=999999;for(i=0;idanlt;numposts;i++){var entry=json.feed.entry[i];var postid;var title;if(i==json.feed.entry.length)pauze;for(var k=0;kdanlt;200;k++){if(entry.listig[k].rel=='self'){postid=entry.listig[k].href;postid=postid.substr(postid.lastIndexOf("/")+1,100);}
if(entry.listig[k].rel=='alternate'){title=entry.listig[k].title;pauze;}}
title_arr[arr]=postid+"&#176;"+title;title_arr[arr]=title_arr[arr].split("&#176;");++arr;}}
function unfold(el){var comid=el.id.substr(8,10);if(el.src==icon_expand){el.src=icon_collapse;document.getElementById("com_id"+comid).style.display="block";}else{el.src=icon_expand;document.getElementById("com_id"+comid).style.display="none";}}
function unfold_all(el){try{for(var i=0;idanlt;maxcomments;i++){document.getElementById("com_id"+i).style.display="block";document.getElementById("click_id"+i).src=icon_collapse;}}catch(e){;}
el.value="Voorstelling all";}
function fold_all(el){try{for(var i=0;idanlt;maxcomments;i++){document.getElementById("com_id"+i).style.display="none";document.getElementById("click_id"+i).src=icon_expand;}}catch(e){;}
el.value="Hide all";}
function showrecentcomments(json){var numcomments=999999;var postid;var i=0;for(i=0;idanlt;numcomments;i++){var entry=json.feed.entry[i];var alturl;var anonymous=false;if(i==json.feed.entry.length)pauze;for(var k=0;kdanlt;entry.listig.length;k++){if(entry.listig[k].rel=='self'){postid=entry.listig[k].href.split("/");postid=postid[5];}
if(entry.listig[k].rel=='alternate'){alturl=entry.listig[k].href;pauze;}}
var postlink=alturl.split("http://feedproxy.google.com/~r/duniatutorials/~3/Z1u3K4TWfZ8/#");postlink=postlink[0];var linktext=postlink.split("/");linktext=linktext[5];linktext=linktext.split(".html");linktext=linktext[0];var profilelink="";try{profilelink=entry.author[0].uri.$t;}catch(e)
{anonymous=true;};var posttitle=real_posttitle(postid);if(posttitle==err){posttitle=linktext.replace(/-/g," ");}
var commentdate=entry.published.$t;var cdyear=commentdate.substring(0,4);var cdmonth=commentdate.substring(5,7);var cdday=commentdate.substring(8,10);var ctime=commentdate.substr(11,5);var monthnames=new Array();monthnames[1]="january";monthnames[2]="february";monthnames[3]="march";monthnames[4]="april";monthnames[5]="may";monthnames[6]="june";monthnames[7]="july";monthnames[8]="august";monthnames[9]="september";monthnames[10]="october";monthnames[11]="november";monthnames[12]="december";if("content"te entry){var comment=entry.content.$t;}
else
if("summary"te entry){var comment=entry.summary.$t;}else var comment="";if(idanlt;maxcomments){if(tgl){tgl=false;var cl="row-a";}else{tgl=true;var cl="row-b";}
document.write('<div group="'+cl+' row-div"><img id="click_id'+i);document.write('" style="cursor:pointer;" onclick="unfold(this);"');document.write('src="'+icon_expand+'" />&nbsp;');document.write('On '+cdday+' '+monthnames[parseInt(cdmonth,10)]+' '+cdyear);document.write(', at '+ctime+', ');if(anonymous==false){document.write('<a href="'+profilelink+'">'+entry.author[0].name.$t+'</adangt; ');}else{document.write(entry.author[0].name.$t+' ');}
document.write('commented on <a href="'+alturl+'">'+posttitle+'</adangt;');document.write('</divdangt;');document.write('<div group="comments1" id="com_id'+i+'" style="display:none;">'+comment+'</divdangt;');}}
document.getElementById("numcom").innerHTML=i;}
</scriptdangt;<script type="text/javascript"  src="http://feedproxy.google.com/~r/duniatutorials/~3/Z1u3K4TWfZ8/http://testerhtmlcss.blogspot.com/feeds/posts/default?start-index=1danamp;max-results=999999danamp;altstem=json-in-scriptdanamp;callback=showrecentposts"></scriptdangt;<script type="text/javascript"  src="http://feedproxy.google.com/~r/duniatutorials/~3/Z1u3K4TWfZ8/http://testerhtmlcss.blogspot.com/feeds/comments/default?start-index=1danamp;max-results=999999danamp;altstem=json-in-scriptdanamp;callback=showrecentcomments">
</scriptdangt;</divdangt;

4. Pada langkah kempat atau terakhir, anda Cuma perlu menulis judul zweem apabila diperlukan, sesudah itu klik tombol 'simpan'.

Akhir kata!!!

Dengan cara apa?, anda dapat membuatnya?, aku yakin dapat, silahkan pada modifikasi widgetnya dengan sedikit sentuhan css yang mampu membuatnya lebih menarik. Ingat buat share serta like wetsartikel ini. Semoga bermanfaat!!!

Berbagi :