Untuk mendapatkan space iklan dihalaman ini silahkan hubungi owner Blog Design, Kami akan secepatnya merespon dan mempertimbangkan letak dari iklan text dan banner anda...

Tuesday, July 16, 2013

Widget top komentator valid html5

Menampilkan Komentar teratas dari para pengunjung blog dapat dikatakan sebagai daya tarik tersendiri buat seseorang, Komentar teratas atau yang biasa disebut dengan TOP COMMENT dapat di pasang pada halaman blog kita untuk lebih menghidupkan suasana halaman blog kita. Pada postingan kali ini saya melihat diberbagai halaman blog sering menampilkan widget comentar , baik itu Top komentar ataupun Counter Koentar. kali ini sayaka membagikan script untuk menampilkan top Komentar pada blog yang memang pada dasarnya harus Valid HTML 5 dan CSS 3. Script ini dapat anda pasang pada template Responsive dan HTML 5.Oke langsung saja menuju TKP , simak penjelasan pemasangan widget ini.

Cara membuat top komentar valid html5

Install Program CSS


  • Login ke dashboard anda
  • Masuk ke "TEMPLATE" lalu klik " Edit HTML "
  • Cari code ]]></b:skin> 
  • Copy Code script CSS dibawah ini, pastekan diatas code ]]></b:skin> tadi

.top-commenter-line img {
border-radius: 100px;
box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
border: solid #111 2px;
}
.top-commenter-line {margin: 3px 0;}
.top-commenter-line .profile-name-link {padding-left:0;}
.top-commenter-avatar {vertical-align:middle;}


Install Program Tag HTML


Untuk memanggil widget top comentar tersebut silahkan simak penjelasan dibawah ini ;
  • Anda masih berada dihalaman dasbor lalu anda menuju "TATA LETAK "
  • Silahkan klik "Add Gadget "( Tambahkan gadget )
  • Pilih " HTML / JavaScript "
  • Copy Code HTML dibawah ini, paste pada gadget anda.

<script type="text/javascript">
var maxTopCommenters = 5; // Total komentar teratas
var minComments = 1; //Total minimal komentar terbawah
var numDays = 0; // waktu lamanya komentar
var excludeMe = true; // false , bila komentar anda tidak ingin ditampilkan
var excludeUsers = ["Anonymous", "someotherusertoexclude"]; // Ganti nama yang tidak terdaftar
var maxUserNameLength = 42; // jumlah huruf nama komentator
var txtTopLine = '<b>[#].</b> [image] [user] ([count])';
var txtNoTopCommenters = 'No top commentators at this time.';
var txtAnonymous = ''; // untuk mengganti nama yang tidak terdaftar
var sizeAvatar = 30; // Ukuran Gambar
var cropAvatar = true;// false , bila gambar anda tidak ingin di kecilkan
var urlNoAvatar = "http://lh4.googleusercontent.com/-069mnq7DV_g/TvgRrBI_JaI/AAAAAAAAAic/Iot55vywnYw/s"+sizeAvatar+"/avatar_blue_m_96.png"; // Gambar avatar untuk comment anymous
var urlAnoAvatar = 'http://www.gravatar.com/avatar/00000000000000000000000000000000?d=mm&s=' + sizeAvatar;
var urlMyProfile = ''; // Set Url untuk tampilan avatar profil sendiri
var urlMyAvatar = ''; // biarkan kosong bila anda tidak ingin membuat gambar khusus

if(!Array.indexOf) {
Array.prototype.indexOf=function(obj) {
for(var i=0;i<this.length;i++) if(this[i]==obj) return i;
return -1;
}}
function replaceTopCmtVars(text, item, position)
{
if(!item || !item.author) return text;
var author = item.author;

var authorUri = "";
if(author.uri && author.uri.$t != "")
authorUri = author.uri.$t;

var avaimg = urlAnoAvatar;
var bloggerprofile = "http://www.blogger.com/profile/";
if(author.gd$image && author.gd$image.src && authorUri.substr(0,bloggerprofile.length) == bloggerprofile)
avaimg = author.gd$image.src;
else {
var parseurl = document.createElement('a');
if(authorUri != "") {
parseurl.href = authorUri;
avaimg = 'http://www.google.com/s2/favicons?domain=' + parseurl.hostname;
}
}
if(urlMyProfile != "" && authorUri == urlMyProfile && urlMyAvatar != "")
avaimg = urlMyAvatar;
if(avaimg == "http://img2.blogblog.com/img/b16-rounded.gif" && urlNoAvatar != "")
avaimg = urlNoAvatar;
var newsize="s"+sizeAvatar;
avaimg = avaimg.replace(/\/s\d\d+-c\//, "/"+newsize+"-c/");
if(cropAvatar) newsize+="-c";
avaimg = avaimg.replace(/\/s\d\d+(-c){0,1}\//, "/"+newsize+"/");

var authorName = author.name.$t;
if(authorName == 'Anonymous' && txtAnonymous != '' && avaimg == urlAnoAvatar)
authorName = txtAnonymous;
var imgcode = '<img class="top-commenter-avatar" height="'+sizeAvatar+'" width="'+sizeAvatar+'" title="'+authorName+'" src="'+avaimg+'" />';
if(authorUri!="") imgcode = '<a href="'+authorUri+'">'+imgcode+'</a>';

if(maxUserNameLength > 3 && authorName.length > maxUserNameLength)
authorName = authorName.substr(0, maxUserNameLength-3) + "...";
var authorcode = authorName;
if(authorUri!="") authorcode = '<a class="profile-name-link" href="'+authorUri+'">'+authorcode+'</a>';

text = text.replace('[user]', authorcode);
text = text.replace('[image]', imgcode);
text = text.replace('[#]', position);
text = text.replace('[count]', item.count);
return text;
}
var topcommenters = {};
var ndxbase = 1;
function showTopCommenters(json) {
var one_day=1000*60*60*24;
var today = new Date();

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; }}
for(var i = 0 ; i < json.feed.entry.length ; i++ ) {
var entry = json.feed.entry[i];
if(numDays > 0) {
var datePart = entry.published.$t.match(/\d+/g); // assume ISO 8601
var cmtDate = new Date(datePart[0],datePart[1]-1,
datePart[2],datePart[3],datePart[4],datePart[5]);
//Kalkulasi waktu comment
var days = Math.ceil((today.getTime()-cmtDate.getTime())/(one_day));
if(days > numDays) break;
}
var authorUri = "";
if(entry.author[0].uri && entry.author[0].uri.$t != "")
authorUri = entry.author[0].uri.$t;

if(excludeMe && authorUri != "" && authorUri == urlMyProfile)
continue;
var authorName = entry.author[0].name.$t;
if(excludeUsers.indexOf(authorName) != -1)
continue;

var hash=entry.author[0].name.$t + "-" + authorUri;
if(topcommenters[hash])
topcommenters[hash].count++;
else {
var commenter = new Object();
commenter.author = entry.author[0];
commenter.count = 1;
topcommenters[hash] = commenter;
}
}
if(json.feed.entry.length == 200) {
ndxbase += 200;
document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false&amp;max-results=200&amp;start-index='+ndxbase+'&amp;alt=json-in-script&amp;callback=showTopCommenters"></'+'script>');
return;
}
// Menmpilkan fungsi array top koment
var tuplear = [];
for(var key in topcommenters) tuplear.push([key, topcommenters[key]]);
tuplear.sort(function(a, b) {
if(b[1].count-a[1].count)
return b[1].count-a[1].count;
return (a[1].author.name.$t.toLowerCase() < b[1].author.name.$t.toLowerCase()) ? -1 : 1;
});
// list untuk top komment
var realcount = 0;
for(var i = 0; i < maxTopCommenters && i < tuplear.length ; i++) {
var item = tuplear[i][1];
if(item.count < minComments)
break;
document.write('<di'+'v class="top-commenter-line">');
document.write(replaceTopCmtVars(txtTopLine, item, realcount+1));
document.write('</d'+'iv>');
realcount++;}
if(!realcount)
document.write(txtNoTopCommenters);}
document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false&amp;max-results=200&amp;alt=json-in-script&amp;callback=showTopCommenters"></'+'script>');
</script>



Kesimpulan

Pemasangan widget Top Comment ini pada halaman blog, selain untuk memperindah tampilan dan keunikan halaman blog dapat juga membantu para pengunjung untuk melihat siap saja yang menjadi Komentator tertinggi pada halaman blog tersebut.

Terimakasih atas kunjungannya,Bila anda suka dengan artikel ini silahkan JOIN TO MEMBER BLOG atau berlangganan geratis Artikel dari blog ini, daftarkan email anda pada form subscribe dibawah halaman . Pergunakan vasilitas diblog ini untuk mempermudah anda. Bila ada masalah dalam penulisan artikel ini silahkan kontak saya melalui kotak komentar yang ada dibawah atau gunakan fasilitas yang ada diblog ini untuk menghubungi saya.

Salam Blogger.... !!! .

Me

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter
Di posting oleh : Rivai Silaban Update pada : 2:06 PM

6 comments :

  1. Widgetnya cukup simpel dan sudah valid html 5 ya mas, wah sangat menarik nich untuk di coba.

    ReplyDelete
  2. Yup bang MARIANTO silahkan bang... thx atas kunjungannya..

    ReplyDelete
  3. memang bagus mas Rivai,oh iya salam kenal sebelumnya mas... senang bisa berkunjung ke blog ini...

    ReplyDelete
  4. Terimakasih atas pendapatnya mas Imron, salam kenal juga dari saya...

    ReplyDelete
  5. Kebetulan sekali Senior, saya lagi butuh dan ingin memasang Widget Top Comments ini. Terima kasih senior.Langsung saya praktekkan ya Senior.

    Kunjungan Malam.
    Marlon Alamo

    ReplyDelete
    Replies
    1. silahkan sob, bila ada masalah share bersama saya.. malam sob.. jangan terlalu malam malam kali ntar besoknya jadi lemas kerjanya hehee

      Delete

1. Komentar SPAM Akan secepatnya dihapus
2. Pastikan untuk " Berlangganan Lewat Email " untuk membangun kreatifitas blog ini
3. Cek komentar masuk sebelum bertanya.
4. Link aktiv tidak akan berpungsi.
5. Dilarang menyebarluaskan artikel tanpa persetujuan dari saya.
6. Untuk mengajukan pertanyaan diluar postingan diatas, silahkan klik " Forum Diskusi "
7. Bergabung dengan kami untuk menjadi member Klik " Join to Member "
8. Komentar yang mengandung code tag HTML, konversikan terlebih dulu silahkan klik " Konversi Kode "

Salam bloger .. !!
Pergunakan semua fasilitas di Blog ini untuk mempermudah anda..
Konversi Kode Forum Diskusi Join to Blog