Widget Blogger dengan Thumbnail untuk Recent Posts

Jika Anda sering membuat posting atau artikel baru dan menginginkan artikel terbaru selalu muncul sebagai update di blog Anda, maka Anda memerlukan widget Recent Posts. Untuk memunculkan artikel terbaru atau posting terkini (Recent Posts) dengan Thumbnail, silakan lakukan langkah-langkah berikut ini:

1. Masuk ke akun Blogger Anda. Pilih Blog Anda dan klik pada Layout/Tata Letak > Add Gadget/Tambah Gadget.

2. Lalu klik pada HTML/JavaScript.

3. Setelah itu copy paste kode HTML/JavaScript berikut:

<style scoped='' type='text/css'>
#recent-posts{color:#999;font-size:11px}
#recent-posts img{background:#fafafa;float:left;height:60px;margin-right:8px;width:60px;border-radius:4px}
#recent-posts ul{margin:0;padding:0}
#recent-posts ul li{margin:0 0 10px 0;padding:0 0 10px 0;border-bottom:1px solid rgba(0,0,0,0.1)}
#recent-posts ul li:last-child{border-bottom:0}
#recent-posts ul li a{display:block;color:#222;font-weight:700;text-decoration:none;font-size:14px;margin:0 0 10px 0;line-height:normal}
</style>
<div id='recent-posts'>
<script type='text/javaScript'>
    var rcp_numposts=5;
    var rcp_snippet_length=150;
    var rcp_info='yes';
    var rcp_comment='komentar';
    var rcp_disable='T?t Nh?n xét';
function recent_posts(json){var dw='';a=location.href;y=a.indexOf('?m=0');dw+='<ul>';for(var i=0;i<rcp_numposts;i++){var entry=json.feed.entry[i];var rcp_posttitle=entry.title.$t;if('content'in entry){var rcp_get_snippet=entry.content.$t}else{if('summary'in entry){var rcp_get_snippet=entry.summary.$t}else{var rcp_get_snippet="";}};rcp_get_snippet=rcp_get_snippet.replace(/<[^>]*>/g,"");if(rcp_get_snippet.length<rcp_snippet_length){var rcp_snippet=rcp_get_snippet}else{rcp_get_snippet=rcp_get_snippet.substring(0,rcp_snippet_length);var space=rcp_get_snippet.lastIndexOf(" ");rcp_snippet=rcp_get_snippet.substring(0,space)+"&#133;";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rcp_commentsNum=entry.thr$total.$t+' '+rcp_comment}else{rcp_commentsNum=rcp_disable};if(entry.link[j].rel=='alternate'){var rcp_posturl=entry.link[j].href;if(y!=-1){rcp_posturl=rcp_posturl+'?m=0'}var rcp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rcp_thumb=entry.media$thumbnail.url}else{rcp_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvwBIJopAnS1h6ePuSYGF90edRLt5Z_BHsaYfr5WCJvR9XhJ47M88IiHIa6qUGNkPSHQj4NzY_yc5E3xf6FzHq-_OZGy-Mm-butt1uiqHr4slx4-jeZzkYRoAVM4fN5VU1lndBABqCAJll/"};}};dw+='<li>';dw+='<img alt="'+rcp_posttitle+'" src="'+rcp_thumb+'"/>';dw+='<div><a href="'+rcp_posturl+'" rel="nofollow" title="'+rcp_snippet+'">'+rcp_posttitle+'</a></div>';if(rcp_info=='yes'){dw+='<span>'+rcp_postdate.substring(8,10)+'/'+rcp_postdate.substring(5,7)+'/'+rcp_postdate.substring(0,4)+' - '+rcp_commentsNum+'</span>';};dw+='<div style="clear:both"></div></li>';};dw+='</ul>';document.getElementById('recent-posts').innerHTML=dw;};document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results='+rcp_numposts+'&callback=recent_posts\"><\/script>');
</script>
</div>

Keterangan
Variabel warna orange dapat diganti sesuai keinginan Anda.

Widget Blogger dengan Thumbnail untuk Top Comments/Most Commented

Jika posting Anda mendapatkan feedback berupa komentar yang cukup banyak, sepertinya Anda membutuhkan widget untuk Top Comments atau Most Commented. Untuk menampilkan posting dengan Thumbnail untuk Top Comments atau Most Commented, silakan lakukan langkah-langkah berikut:

1. Masuk ke akun Blogger Anda. Pilih Blog Anda dan klik pada Layout/Tata Letak > Add Gadget/Tambah Gadget.

2. Lalu klik pada HTML/JavaScript.

3. Setelah itu copy paste kode HTML/JavaScript berikut:

<style scoped='' type='text/css'>
#top-commented{color:#999;font-size:11px}
#top-commented img{background:#fafafa;float:left;height:60px;margin-right:8px;width:60px;border-radius:4px}
#top-commented ul{margin:0;padding:0}
#top-commented ul li{margin:0 0 10px 0;padding:0 0 10px 0;border-bottom:1px solid rgba(0,0,0,0.1)}
#top-commented ul li:last-child{border-bottom:0}
#top-commented ul li a{display:block;color:#686868;font-weight:700;text-decoration:none;font-size:13px;margin:0 0 10px 0;line-height:normal}
</style>
<div id="top-commented"></div>
<script>
    //<![CDATA[
    var numPosts = 10;
    var width = 65;
    var height = 65;
    var url = "your-blog.blogspot.com";

    var postTitle = new Array();
    var postUrl = new Array();
    var postComment = new Array();
    var postThumb = new Array();
    var totalpost;
    document.write('<div id="top-commented"><ul>');

    function mostComment(j) {
        var a = j.feed.entry.length;
        totalpost = a;
        for (var f = 0; f < a; f++) {
            var h = j.feed.entry[f];
            var c = h.title.$t;
            var b;

            if (f == j.feed.entry.length) {
                break
            }
            for (var d = 0; d < h.link.length; d++) {
                if (h.link[d].rel == "alternate") {
                    g = h.link[d].href;
                    break
                }
            }
            for (var d = 0; d < h.link.length; d++) {
                if (h.link[d].rel == "replies" && h.link[d].type == "text/html") {
                    b = h.link[d].title.split(" ")[0];
                }
            };

            var gt;
            try {
                gt = h.media$thumbnail.url.replace("/s72-c/", "/w" + width + "-h" + height + "-c/");
            } catch (error) {
                ss = h.content.$t;
                aa = ss.indexOf("<img");
                bb = ss.indexOf("src=\"", a);
                cc = ss.indexOf("\"", b + 5);
                dd = ss.substr(bb + 5, cc - bb - 5);
                if ((aa != -1) && (bb != -1) && (cc != -1) && (dd != "")) {
                    gt = dd;
                } else gt = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr-gbWqWMW_SEXr6el5RKw9eH-aYa493sCjCFwb9g5Cv1xRkkbiSWe69YoYObv21OXTKHG5nB5gBVQmPodovulvqDIc5U6Xh2TpK5XFwECfwHW05ejy7kFXWJSUb63sUlPMDNxNsTWsLE/' + "w" + width + "-h" + height + "-c/" + 'No-image-available-technohalf.png';
            }
            postTitle.push(c);
            postThumb.push(gt);
            postUrl.push(g);
            postComment.push(b)
        }
        sortPosts();
        for (var f = 0; f < numPosts; f++) {
            var e = '<li><div class="last-posts-img"><a href="' + postUrl[f] + '" title="' + postTitle[f] + '" target="_blank"><img  width= "' + width + '" height= "' + height + '" src="' + postThumb[f] + '" alt="' + postTitle[f] + '"/><div class="post-snippet">' + postTitle[f] + '</div><span class="count-most">' + postComment[f] + '</span></a></div>';
            document.write(e)
        }
    }

    function sortPosts() {
        function c(d, f) {
            var e = postTitle[d];
            postTitle[d] = postTitle[f];
            postTitle[f] = e;
            var e = postUrl[d];
            postUrl[d] = postUrl[f];
            postUrl[f] = e;
            var e = postComment[d];
            postComment[d] = postComment[f];
            postComment[f] = e;
            var e = postThumb[d];
            postThumb[d] = postThumb[f];
            postThumb[f] = e;
        }
        for (var b = 0; b < postTitle.length - 1; b++) {
            for (var a = b + 1; a < postTitle.length; a++) {
                if (parseInt(postComment[b]) < parseInt(postComment[a])) {
                    c(b, a)
                }
            }
        }
    }
    document.write('<script src="http://' + url + '/feeds/posts/default?max-results=9999&orderby=published&alt=json-in-script&callback=mostComment"><\/script>');
    document.write('</li>')
    document.write('</ul>')
    document.write('</div>');
    //]]>
</script>


Keterangan:
Ganti your-blog.blogspot.com dengan alamat blog Anda.
Variabel warna orange dapat diganti sesuai keinginan Anda.

Widget Blogger dengan Thumbnail untuk Random Posts

Dengan banyaknya posting terkadang kita tidak dapat menampilkan semuanya sehingga kita membutuhkan tampilan posting secara acak atau random. Untuk menampilkan Random Posts dengan Gambar atau Thumbnail, silakan lakukan langkah-langkah sbb.:

1. Masuk ke akun Blogger Anda. Pilih Blog Anda dan klik pada Layout/Tata Letak > Add Gadget/Tambah Gadget.

2. Lalu klik pada HTML/JavaScript.

3. Setelah itu copy paste kode HTML/JavaScript berikut:

<style>
#random-posts{color:#AEADAD;font-size:10px}
#random-posts img {
    border-radius: 5px;
    float: left;
    margin-right: 5px;
    width: 65px;
    height: 65px;
    background-color: #F5F5F5;
    padding: 1px;
    transition: all 0.2s linear 0s;
}

#random-posts img:hover {
    opacity: 0.6;
}

ul#random-posts {
    margin:0;
    list-style-type: none;
    padding: 0px;
}

#random-posts a {
    font-size: 13px;
    color: #686868;
    font-weight: bold;
    text-transform: none;
    padding: 0px auto 5px;
}

#random-posts a:hover {
    text-decoration: none;
   
}

.random-summary {
    font-size: 9px;
    color:#AEADAD;
    background: none;
    padding: 5px;
    margin-right: 8px;
}

#random-posts li {
    margin-bottom: 10px;
    border-bottom: 1px solid #fff;
    padding: 4px;
}
</style>
<ul id='random-posts'>
<script type='text/javaScript'>
    var randomposts_number = 10;
    var randomposts_chars = 36;
    var randomposts_details = 'yes';
    var randomposts_comments = 'Comments';
    var randomposts_commentsd = 'Comments Disabled';
    var randomposts_current = [];
    var total_randomposts = 0;
    var randomposts_current = new Array(randomposts_number);

function randomposts(json) {
    total_randomposts = json.feed.openSearch$totalResults.$t
}
document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=randomposts\"><\/script>');

function getvalue() {
    for (var i = 0; i < randomposts_number; i++) {
        var found = false;
        var rndValue = get_random();
        for (var j = 0; j < randomposts_current.length; j++) {
            if (randomposts_current[j] == rndValue) {
                found = true;
                break
            }
        };
        if (found) {
            i--
        } else {
            randomposts_current[i] = rndValue
        }
    }
};

function get_random() {
    var ranNum = 1 + Math.round(Math.random() * (total_randomposts - 1));
    return ranNum
};
</script>
<script type='text/javaScript'>
function random_posts(json) {
    for (var i = 0; i < randomposts_number; i++) {
        var entry = json.feed.entry[i];
        var randompoststitle = entry.title.$t;
        if ('content' in entry) {
            var randompostsnippet = entry.content.$t
        } else {
            if ('summary' in entry) {
                var randompostsnippet = entry.summary.$t
            } else {
                var randompostsnippet = "";
            }
        };
        randompostsnippet = randompostsnippet.replace(/<[^>]*>/g, "");
        if (randompostsnippet.length < randomposts_chars) {
            var randomposts_snippet = randompostsnippet
        } else {
            randompostsnippet = randompostsnippet.substring(0, randomposts_chars);
            var whitespace = randompostsnippet.lastIndexOf(" ");
            randomposts_snippet = randompostsnippet.substring(0, whitespace) + "&#133;";
        };
        for (var j = 0; j < entry.link.length; j++) {
            if ('thr$total' in entry) {
                var randomposts_commentsnum = entry.thr$total.$t + ' ' + randomposts_comments
            } else {
                randomposts_commentsnum = randomposts_commentsd
            }; if (entry.link[j].rel == 'alternate') {
                var randompostsurl = entry.link[j].href;
                var randomposts_date = entry.published.$t;
                if ('media$thumbnail' in entry) {
                    var randompoststhumb = entry.media$thumbnail.url
                } else {
                    randompoststhumb = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcA3ARzwZ4DprQTcddGE-bcrg3mYfbjnkeWp0Lqfgxl2sadFoAs_UIIRDntyisgyKcaOF_A4S5EwkZYabKgLneCuwO06t0WSy59PTpBRdSu0rTPdRXTlHw5SiLPzjqucjcXQqWWPIIroo/s1600/no_thumb.png"
                }
            }
        };
        document.write('<li>');
        document.write('<a href="' + randompostsurl + '" rel="nofollow"><img alt="' + randompoststitle + '" src="' + randompoststhumb + '"/></a>');
        document.write('<div><a href="' + randompostsurl + '" rel="nofollow">' + randompoststitle + '</a></div>');
        if (randomposts_details == 'yes') {
            document.write('<span><div  class="random-info">' + randomposts_date.substring(8, 10) + '.' + randomposts_date.substring(5, 7) + '.' + randomposts_date.substring(0, 4) + ' - ' + randomposts_commentsnum) + '</div></span>'
        };
        document.write('<br/><div class="random-summary">' + randomposts_snippet + '</div><div style="clear:both"></div></li>')
    }
};
getvalue();
for (var i = 0; i < randomposts_number; i++) {
    document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index=' + randomposts_current[i] + '&max-results=1&callback=random_posts\"><\/script>')
};
</script>
</ul>

Keterangan
Variabel warna orange dapat diganti sesuai keinginan Anda.

Widget Blogger dengan Circle Thumbnail untuk Recent Comments

Selain widget Top Comments atau Most Commented, Anda juga membutuhkan widget Recent Comments jika cukup banyak yang memberikan komentar terhadap posting Anda. Ini penting untuk mengetahui komentar terkini terhadap posting Anda. Untuk memunculkan Recent Comments dengan Circle Thumbnail, silakan lakukan langkah-langkah berikut ini:

1. Masuk ke akun Blogger Anda. Pilih Blog Anda dan klik pada Layout/Tata Letak > Add Gadget/Tambah Gadget.

2. Lalu klik pada HTML/JavaScript.

3. Setelah itu copy paste kode HTML/JavaScript berikut:

 <style type="text/css">
    ul.w2b_recent_comments{list-style:none;margin:0;padding:0;}
    .w2b_recent_comments li{background:none !important;margin:0 0 15px !important;padding:0 15px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}
    .w2b_recent_comments li .avatarImage{padding:1px;background:#00ffff;-webkit-box-shadow:0 1px 1px #000;-moz-box-shadow:0 1px 1px #000;box-shadow:0 1px 1px #000;float:left;margin:0 5px 0 0;position:relative;overflow:hidden;}
    .avatarRound{-webkit-border-radius:70px;-moz-border-radius:70px;border-radius:70px;}
    .w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
    .w2b_recent_comments li span{margin-top:4px;color: #fff;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  = 50,
       roundAvatar = true,
       characters  = 50,
       showMorelink = false,
       moreLinktext = "More &#187;",
       defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",
       hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="https://sites.google.com/site/seocips/seocips-script/rcwa.js"></script>
<script type="text/javascript" src="http://your-blog.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5"></script>

Keterangan:
Ganti your-blog.blogspot.com dengan alamat blog Anda.
Variabel warna orange dapat diganti sesuai keinginan Anda.
 

Widget Blogger untuk Menampilkan Posting Berdasarkan Label/Kategori

Untuk menampilkan posting atau artikel berdasarkan Label atau Kategori, silakan lakukan langkah-langkah sbb.:

1. Masuk ke akun Blogger Anda. Pilih Blog Anda dan klik pada Layout/Tata Letak > Add Gadget/Tambah Gadget.

2. Lalu klik pada HTML/JavaScript.

3. Setelah itu copy paste kode HTML/JavaScript berikut:
<style>
img.recent_thumb {padding:1px;width:65px;height:65px;border:0; float:left;margin:0 10px 5px 1px;}

.recent_posts_with_thumbs {float: right;width: 100%;min-height: 72px;margin: 0px 10px 5px 0px;padding: 0;font-size:11px;}

ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:72px;}.recent_posts_with_thumbs a {text-decoration:none;}.recent_posts_with_thumbs strong {font-size:10px;}

</style>

<script>
function showrecentpostswiththumbs(json) {document.write('<ul class="recent_posts_with_thumbs">'); for (var i = 0; i < numposts; i++) {var entry = json.feed.entry[i];var posttitle = entry.title.$t;var posturl;if (i == json.feed.entry.length) break;for (var k = 0; k < entry.link.length;k++){
if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
if (entry.link[k].rel == 'alternate') {posturl = entry.link[k].href;break;}}var thumburl;try {thumburl=entry.media$thumbnail.url;}catch (error)
{
s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){
thumburl=d;} else thumburl='http://lh4.ggpht.com/_IjrRiI_bVb0/TOCYn1fMjII/AAAAAAAAF24/5Fvv-HJqh74/loading-2.gif';
}
var postdate = entry.published.$t;var cdyear = postdate.substring(0,4);var cdmonth = postdate.substring(5,7);var cdday = postdate.substring(8,10);var monthnames = new Array();monthnames[1] = "Jan";monthnames[2] = "Feb";monthnames[3] = "Mar";monthnames[4] = "Apr";monthnames[5] = "May";monthnames[6] = "Jun";monthnames[7] = "Jul";monthnames[8] = "Aug";monthnames[9] = "Sep";monthnames[10] = "Oct";monthnames[11] = "Nov";monthnames[12] = "Dec";document.write('<li class="clearfix">');
if(showpostthumbnails==true)
document.write('<img class="recent_thumb" src="'+thumburl+'"/>');
document.write('<b><a href="'+posturl+'" target ="_top">'+posttitle+'</a></b><br>');

    if ("content" in entry) {
      var postcontent = entry.content.$t;}
    else
    if ("summary" in entry) {
      var postcontent = entry.summary.$t;}
    else var postcontent = "";
    var re = /<\S[^>]*>/g;
    postcontent = postcontent.replace(re, "");
if (showpostsummary == true) {
      if (postcontent.length < numchars) {
          document.write('<i>');
         document.write(postcontent);
          document.write('</i>');}
      else {
          document.write('<i>');
         postcontent = postcontent.substring(0, numchars);
         var quoteEnd = postcontent.lastIndexOf(" ");
         postcontent = postcontent.substring(0,quoteEnd);
         document.write(postcontent + '...');
          document.write('</i>');}
}

var towrite='';var flag=0;
document.write('<br><strong>');

if(showpostdate==true) {towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;}

if(showcommentnum==true)
{
if (flag==1) {towrite=towrite+' | ';}
if(commenttext=='1 Comments') commenttext='1 Comment';
if(commenttext=='0 Comments') commenttext='No Comments';
commenttext = '<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';
towrite=towrite+commenttext;
flag=1;
;
}

if(displaymore==true)
{
if (flag==1) towrite=towrite+' | ';
towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">Read more&#187;&#187;</a>';
flag=1;
;
}
document.write(towrite);
document.write('</strong></li>');
if(displayseparator==false)
if (i!=(numposts-1))
document.write('<hr color="#d9f1fa" size=0.5>');
}document.write('</ul>');

}
</script>
<script>
     var numposts = 5;
     var showpostthumbnails = true;
     var displaymore = false;
     var displayseparator = true;
     var showcommentnum = true;
     var showpostdate = true;
     var showpostsummary = true;
     var numchars = 36;
</script><script src="http://your-blog.blogspot.com/feeds/posts/default/-/Your-Label?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs">
</script>
<a class='labelmore' href='/search/label/Your-Label/max-results=5'  title='Show All'>More »</a>

Keterangan
Ganti your-blog.blogspot.com dengan alamat blog Anda.
Ganti Your-Label dengan nama label posting Anda. 
Variabel warna orange dapat diganti sesuai keinginan Anda.