Membuat Daftar Member Aktif / Komentator Aktif

Wednesday, October 15, 2014

Untuk memastikan berapa banyak komentator dalam blog kita dan berapa banyak dia berkomentar? Jawaban ini tidak perlu dihitung sedatil mungkin, karena pada tutorial ini dengan sendirinya Anda akan melihat apa yang dimaksudkan. Dan caranyapun sangat mudah. Bahkan member yang akan ditampilkan akan menunjukkan sebuah link yang mengarah pada profil komentator.

Widget member aKtif dalam blog

Lihat DemoCoba sendiri

.cm-person{margin:0;position:relative;float:left;width:80px;height:100px;font:10px/10px Lora,Verdana,Arial,Sans-Serif;text-align:center;line-height:10px;padding:10px;border:1px solid #ccc;color:#000;background-color:#fff;box-shadow:inset 0 0 1px black}
.cm-person a.profile-name-link{display:block;width:80px;height:80px;position:absolute;top:10px;left:10px;background-color:#999;color:white;text-decoration:none;font:bold 30px/80px Ubuntu,Tahoma,Verdana,Arial,Sans-Serif;margin:0 0;padding:0 0;display:none}
.cm-person a.profile-name-link.item1{background-color:#BC0000}
.cm-person a.profile-name-link.item2{background-color:#1A00CE}
.cm-person a.profile-name-link.item3{background-color:#39A003}
.cm-person a.profile-name-link.item4{background-color:#8B039D}
.cm-person a.profile-name-link.item5{background-color:#F0C100}
.cm-person a.profile-name-link.item6{background-color:#00D1CB}
.cm-person a.profile-name-link.item7{background-color:#FFEA03}
.post .post-body .cm-person img{background-color:#666;display:block;width:80px;height:80px;padding:0 0;margin:0 0 10px;border:none}
.cm-person:hover{color:#FFF;background-color:#111}
.cm-person:hover a.profile-name-link{display:block}

<script type="text/javascript">
    //<![CDATA[
    var homepage = 'https://nama_blog.blogspot.com', // Ganti nilainya menjadi URL blog anda
        maxTopCommenters = 77,
        minComments = 1,
        numDays = 0,
        excludeMe = true,
        excludeUsers = ["Anonymous", "ITP", "Id Tutor Plus"], // Nama-nama yang tidak ditampilkan
        maxUserNameLength = 42,
        txtTopLine = '[image] [user]',
        txtNoTopCommenters = 'No top commentators at this time.',
        txtAnonymous = '',
        sizeAvatar = 80,
        cropAvatar = true,
        urlNoAvatar = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEji1BCRMlKrrLoKJPdeCSJc8FN1-aQJaYd-nSfKuoS1gurX2sOCj6Dy1PiKvbXxfS5K45lWqBQExbhPk04xqd5AGUjQ6JilIOyxvXzEzEVS8OvOz7aOQFFL8ywmlAmroui2CkcyewXrQ6E/' + sizeAvatar + '/avatar_blue_m_96.png',
        urlAnoAvatar = 'https://www.gravatar.com/avatar/00000000000000000000000000000000?d=mm&s=' + sizeAvatar,
        urlMyProfile = '',
        urlMyAvatar = '';
    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 = "https://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 = 'https://www.google.com/s2/favicons?domain=' + parseurl.hostname
            }
        }
        if (urlMyProfile != "" && authorUri == urlMyProfile && urlMyAvatar != "") avaimg = urlMyAvatar;
        if (avaimg == "https://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 = '<div class="cm-person"><img class="top-commenter-avatar" height="' + sizeAvatar + '" width="' + sizeAvatar + '" 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 item' + position + '" href="' + authorUri + '" title="' + position + '. ' + authorName + '">' + item.count + '</a>' + authorName.substring(0, 14) + '</div>';
        text = text.replace('[user]', authorcode);
        text = text.replace('[image]', imgcode);
        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);
                var cmtDate = new Date(datePart[0], datePart[1] - 1, datePart[2], datePart[3], datePart[4], datePart[5]);
                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="' + homepage + '/feeds/comments/default?redirect=false&max-results=200&start-index=' + ndxbase + '&alt=json-in-script&callback=showTopCommenters"></' + 'script>');
            return
        }
        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
        });
        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(replaceTopCmtVars(txtTopLine, item, realcount + 1));
            realcount++
        }
        if (!realcount) document.write(txtNoTopCommenters)
    }
    document.write('<script type="text/javascript" src="' + homepage + '/feeds/comments/default?redirect=false&max-results=200&alt=json-in-script&callback=showTopCommenters"></' + 'script>');
    //]]>
</script>

Coba sendiri

Pasang Iklan Anda di Sini

Pasang Iklan Anda di Sini