Cara Membuat Widget User Online di Blog

Ingin menyampaikan apresiasi pada pengunjung? banyak cara mewujudkannya, mampu menggunakan memberikan mereka kenangan sebagai hadiah di ajang program yang anda selenggarakan, atau memberikan backlink kepada mereka dengan memasang widget top komentator, atau widget user online berikut ini pun bisa menjadi sebuah alternatif lain bagi anda. Sebenarnya widget ini masih memakai script yg sama berasal widget top komentator, hanya saja style widget dimodifikasi dengan tampilan tidak selaras dan  kalimat komentar tidak ditampilkan.

Fitur:

• Menampilkan nama dan link komentator
• Menampilkan Avatar komentator
• Avatar dengan polaraid style
• Efek hover pada Avatar menampilkan jumlah komentar
• Bersih dan elegant
• Untuk mendapatkan ide yang jelas tentang widget ini silahkan lihat live demo terlebih dahulu
• Tentunya memperbagus blog

Caranya : copy paste html di bawah ini ke postingan di bagian html

----------------------------------------------------------------------------------------------------------------------------------

<style type='text/css'> <style type="text/css"> .cm-person{margin:3px;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 #F6CEE3; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;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} .comments {display: none;} </style> <script type="text/javascript"> //<![CDATA[ var homepage = 'http://www.blogtidakvalid.xyz/', maxTopCommenters = 77, minComments = 1, numDays = 0, excludeMe = true, excludeUsers = ["Anonymous", "Admin"], 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/AVvXsEh7_E2jwe0Oje2DYj_zh3is80G7FLwsUn1lJ6-vWoGgsNVMnVzLbR0xzTTIkRd85ly5bYwZSppKYqgOslloMyh9c1l0Heonr_OnKP9GJHGUk1oylrnwWmbmGA1sT50hbazI-SzKyCS5xR8/' + sizeAvatar + '/avatar_blue_m_96.png', urlAnoAvatar = 'http://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 = "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 = '<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> <textarea/>
NB: lihat pada tulisan var homepage = 'http://www.blogtidakvalid.xyz/' dan ganti dengan link blog anda

jika sudah selesai publikasikan.

Sekian Terimakasih Selamat Berkunjung Kembali.

Share on Google Plus

About Unknown

Saya hanya seorang blogger yang biasa saja tanpa kehebatan apapun silahkan anda meberi kritik di blog saya sebagai tanda pujian bagi saya Terima Kasih