Friday, November 6, 2015

Cara Memasang Widget Komentar Terbaru di Blog

Untuk menambah daya gedor sebuah blog, tentu memerlukan sebuah inovasi megenai masalah desain. Salah satu hal yang yang sangat disarankan para master dalam hal ini adalah kemampuan sebuah desain blog yang user friendly. Hal itulah yang bisa disebut sebuah ciri blog berkualitas user friendly.

Upaya yang bisa saja kita lakukan adalah dengan memberikan informasi terkait peran serta pembaca dalam memberikan "komentar" terhadap setiap artikel yang kita tulis. Keberadaan komentar yang diketahui oleh pembaca "baru" tentu akan lebih meningkatkan kepercayaan dan kemantaban hati, bahwa ternyata artikel yang sedang ia baca bersumber dari sebuah situs yang memang dikunjungi banyak orang.

Oleh karena itu, berikut ada salah satu tips cara melakukan hal itu.

Langkah Memasang Komentar Terbaru di Blog

Adapun langkah-langkah yang perlu dilakukan untuk memasang kolom komentar terakhir di blog kita, baik di halaman home pages, adalah sebagai berikut:

1. Login akun blogger > tata letak
2. Pilih sidebar (atau footer -sesuai tempat yang diinginkan) > add gadget > mode HTML/Javascript
3. Copas kode di bawa ini dan Save
<script style=text/javascript>
function showrecentcomments(json){for(var i=0;i<a_rc;i++){var b_rc=json.feed.entry[i];var c_rc;if(i==json.feed.entry.length)break;for(var k=0;k<b_rc.link.length;k++){if(b_rc.link[k].rel=='alternate'){c_rc=b_rc.link[k].href;break;}}c_rc=c_rc.replace("#","#");var d_rc=c_rc.split("#");d_rc=d_rc[0];var e_rc=d_rc.split("/");e_rc=e_rc[5];e_rc=e_rc.split(".html");e_rc=e_rc[0];var f_rc=e_rc.replace(/-/g," ");f_rc=f_rc.link(d_rc);var g_rc=b_rc.published.$t;var h_rc=g_rc.substring(0,4);var i_rc=g_rc.substring(5,7);var j_rc=g_rc.substring(8,10);var k_rc=new Array();k_rc[1]="Jan";k_rc[2]="Feb";k_rc[3]="Mar";k_rc[4]="Apr";k_rc[5]="May";k_rc[6]="Jun";k_rc[7]="Jul";k_rc[8]="Aug";k_rc[9]="Sep";k_rc[10]="Oct";k_rc[11]="Nov";k_rc[12]="Dec";if("content" in b_rc){var l_rc=b_rc.content.$t;}else if("summary" in b_rc){var l_rc=b_rc.summary.$t;}else var l_rc="";var re=/<\S[^>]*>/g;l_rc=l_rc.replace(re,"");document.write('<div class="rcw-comments">');if(m_rc==true)document.write('On '+k_rc[parseInt(i_rc,10)]+' '+j_rc+' ');document.write('<span class="author-rc"><a href="'+c_rc+'">'+b_rc.author[0].name.$t+'</a></span> commented');if(n_rc==true)document.write(' on '+f_rc);
if(o_rc==0){
document.write('</div>');
}
else{
document.write(': ');if(l_rc.length<o_rc){document.write('<i>&#8220;');document.write(l_rc);document.write('&#8221;</i></div>');}else{document.write('<i>&#8220;');l_rc=l_rc.substring(0,o_rc);var p_rc=l_rc.lastIndexOf(" ");l_rc=l_rc.substring(0,p_rc);document.write(l_rc+'&hellip;&#8221;</i></div>');document.write('');}
}
}
}
</script>
<script style=text/javascript>
var a_rc = 5;
var m_rc = false;
var n_rc = true;
var o_rc = 100;
</script>
<script src=/feeds/comments/default?alt=json-in-script&callback=showrecentcomments></script>
<style type="text/css">
.rcw-comments a {
text-transform: capitalize;
}
.rcw-comments {
border-bottom: 1px dotted;
padding-top: 7px!important;
padding-bottom: 7px!important;
}
</style>
4. Save

Mudah kan? 

Untuk demonya, silakan lihat langsung di situs ini di bagian kolom Footer (bagian bawah sendiri).

Kolom komentar terbaru dari sahabat blogger ini hanya menampilkan ringkasan isi artikel yang dikomentari beserta nama komentator.

Jika ingin menampilan sekaligus foto sang komentator, silakan copas code di bawah ini. Adapun langkahnya sama persis dengan langkah di atas.
<style type="text/css">
ul.tb_recent_comments{list-style:none;margin:0;padding:0;}
.tb_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}
.tb_recent_comments li .avatarImage{padding:3px;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
.tb_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
.tb_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
// Recent Comments Settings
var
numComments = 5,
showAvatar = true,
avatarSize = 30,
characters = 60,
defaultAvatar = "http://www.gravatar.com/avatar/?d=mm",
hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="http://html-scripts.googlecode.com/files/rcentcmmntavr.js"></script>
<script type="text/javascript" src="/feeds/comments/default?alt=json&callback=tb_recent_comments&max-results=5"></script>
Demikian ulasan sederhana mengenai tips desain sebuah blog. Semoga bermanfa'at. Salam.
Source 

Ditulis Oleh : Unknown // November 06, 2015
Kategori:

0 comments:

Post a Comment

 

Total Pageviews

Powered by Blogger.