Pular para o conteúdo principal

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 

Comentários

Postagens mais visitadas deste blog

Top 25 Hosting Terbaik 2015 di Dunia - Hosting Blog Terpopuler Terbaik untuk Blog Kamu

Top 25 Hosting Terbaik 2018 - Hosting Blog Terpopuler Terbaik untuk Blog Kamu Jika sobat masih belum memiliki hosting yang digunakan untuk penyimpanan semua data blog yang telah dikelola, tidak ada salahnya untuk menggunakan layanan top 25 hosting terbaik 2018. Seperti halnya cara memilih nama domain , pemilihan hosting yang pas juga berpengaruh terhadap kenyamanan sobat kedepannya. Saking begitu besarnya manfaat cutom domain dan menyimpan data pada hosting, tak heran banyak sekali para blogger yang mencari-mencari provider hosting ataupun domain di Indonesia. Baca juga 25 Top web hosting terpopuler di Indonesia Untuk lebih jelasnya, silakan simak selengkapnya di bawah ini. 25 Hosting Terbaik dan Terpopuler tahun 2018 di Dunia Untuk lebih jelasnya, silakan simak berikut ini: AskforHost WP Engine BlueHost HostGator Siteground Site5 VPS.Net Godaddy DreamHost MediaTemple Arvixe InMotion Hosting Web Hosting Hub Host Monster Laughing Squid WebFusion...

Cara Membuat Footer Responsive di Blog - Halaman Footer 2 atau 3 Kolom

Membuat Halaman Footer Responsive 2 atau 3 Kolom di Blog - Apabila rekan-rekan ingin membuat halaman footer responsive di blog, tips ini layak jenengan coba. Halaman footer biasanya digunakan dan terletak pada bagian bawah blog atau website. Tentu halaman footer blog ini bisa digunakan untuk memberikan informasi seperti label, about me, kontak dan random post. Contoh demo Halaman Footer di blog ojogerah.blogspot.com Dengan menambahkan halaman footer blog ini, paling tidak menambah halaman widget lebih banyak. Selain yang berada di sidebar blog, juga bisa ditambahkan di sini. Cara Membuat Footer Responsive di Blog 2 Kolom Langkahnya cukup mudah kok, yakni sebagai berikut: 1. Masuk akun blogger 2. Pilih template > HTML 3. Copas kode di bawah ini di atas kode ]]></b:skin> #footernya-masyadi{width:100%;background:#111 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6Ddjxm-cK1AjUAbZTP_B8Wqdp0rBOHeEMcQjsqgcFuGKpB46wPWdpWbhuFMeHYCffr3j...

Johny Wuss Original Blogger Template Gratis Free Download

Siapa siah yang tidak kenal dengan template New Johny Wuss? Template tersebut merupakan hasil modifikasi Master CB dari template asli Johny Wuss karya Mas Kholis . Template dasar Johny Wuss yang sudah dimodifikasi menjadi beberapa template mulai dari NJW V1 sampai V5, memang menjadi sebuah template yang fenomenal juga, seperti halnya Evo Magz blogger template karya Mas Sugeng. Namun demikian, jika sobat ingin merasakan langsung template Johny Wuss Original dari Mas Kholis, berikut update terbarunya dari SL blogger. Demo  | Download Author : Mas Kholis Publisher : Sahil Template Fitur: SEO Ready Fully Responsive Design Auto resize thumbnail image Well Documentation Threaded Comment Optimize SEO Auto Author Image Grid based Design Newsletter Subscription Custom Error 404 Page Compatible with major browsers (IE8+,Mozilla,Chrome,Safari) Professional admin layout, help you easy work with blog layout. Keren kan? Template di atas terdapat dua versi, yakni free download alias gratis dan ...