Cara Pasang Widget Recent Post di Blog

Cara Pasang Widget Recent Post di Blog

 
DAFTAR Posting Terbaru (Recent Post, Latest Posts, Artikel Terbaru, Entry Terbaru) merupakan salah satu widget yang wajib dipasang di blog, untuk navigasi sekaligus link internal agar meningkatkan pageviews.

Cara menampilkan widget posting terbaru bisa menggunakan widget bawaan blogger, yaitu Feed. Cara memasangnya:

1. Klik Layout (Tata Letak) > Add a Gadget > pilih Feed
2. Masukkan alamat blog Anda.
3. Klik "Continue"
4. Ubah judul widget menjadi "Recent Posts" atau "Posting Terbaru"

Jika cara tersebut tidak berhasil, cara lain memasang widget recent post Simple di Sidebar Blog adalah sebagai berikut.

Cara Pasang Daftar Posting Terbaru (Recent Post) Simple di Sidebar Blog

Daftar Posting Terbaru ini, seperti gambar di atas, akan otomatis muncul di halaman dalam saja, karena halaman depan sudah tampil, jadi tidak ada judul posting terbaru double.

Kode CSS Recent Post Simple

Simpan kode berikut ini di atas kode ]]></b:skin>

#recent-posts{width:85%;padding:10px;margin:0 auto;border:1px solid #ddd}
#recent-posts ul,#recent-posts li{list-style:none}
#recent-posts a{text-decoration:none}
#recent-posts li{border-top:1px dotted #ddd;padding:6px 0}
#recent-posts li:first-child{border-top:none}
#recent-posts h2{margin:12px}

Kode HTML Recent Post Simple

Simpan kode berikut ini di bawah kode sidebar. Kalo ada  kode kotak pencarian, simpan di bawah kode kotak pencarian.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='widget HTML' data-version='1' id='HTML3'>
<h2 style='margin:15px;padding: 10px;background: #f1f1f1;'>Recent Posts</h2>
<div class='widget-content'>
<script>
//<![CDATA[
function showlatestposts(json){document.write('<ul id="recent-posts">');for(var i=0;i<5;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var postsurl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){postsurl=entry.link[k].href;break;}}
document.write('<li class="recent-posts">');document.write('<a href="'+ postsurl+'" target ="_top" title="'+ posttitle+'">'+ posttitle+'</a>');document.write('</li>');}
document.write('</ul>');};
document.write("<scr" + "ipt type=\"text/javascript\" src=\"/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showlatestposts\"></scr" + "ipt>");
//]]>
</script>
</div>
  <div class='clear'/>
</div>
</b:if>

Save!

Recent Post dengan Gambar Thumbnail

Lakukan langkah berikut ini:

1. Layout > Add a Gadget > Pilih HTML/Javascript
2. Masukkan (Copas) kode berikut ini:

<style>
img.label_thumb {float:left;margin-right:10px !important;height:65px;width:72px;list-style: none;display: block;}
.label_with_thumbs {float: left;width: 100%;min-height: 70px;margin: 0px 10px 2px 0px;padding: 0;}
ul.label_with_thumbs li {padding:8px 0;min-height:65px;margin-bottom:0px;border-bottom: 1px dotted #999999;list-style: none;display: block;}
.label_with_thumbs li {list-style: none;padding-left:0px !important;list-style: none;display: block;}
.label_with_thumbs a {font-weight:normal}
.label_with_thumbs strong {padding-left: 0px;font-weight: normal;}
</style>
<script>
function labelthumbs(json) {
    document.write('<ul class="label_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 = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEz-fhTl-1y3jbM5NVwvJJksigdXH7SljmtpFRnQhzJxNTghMKcxIbczYmWwu48vnaa1m7itCy1itiE7qVZLutf96dcU_yUNggMwYaMbiSU3__mgMxm8IqmUC7HQyyxEVPaIPJQpImc7w/s1600/No+Image+1.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] = "June";
        monthnames[7] = "July";
        monthnames[8] = "Aug";
        monthnames[9] = "Sept";
        monthnames[10] = "Oct";
        monthnames[11] = "Nov";
        monthnames[12] = "Dec";
        document.write('<li class="clearfix">');
        if (showpostthumbnails == true) document.write('<a href="' + posturl + '" target ="_top"><img class="label_thumb" src="' + thumburl + '"/></a>');
        document.write('<strong><a href="' + posturl + '" target ="_top">' + posttitle + '</a></strong><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('');
                document.write(postcontent);
                document.write('');
            } else {
                document.write('');
                postcontent = postcontent.substring(0, numchars);
                var quoteEnd = postcontent.lastIndexOf(" ");
                postcontent = postcontent.substring(0, quoteEnd);
                document.write(postcontent + '...');
                document.write('');
            }
        }
        var towrite = '';
        var flag = 0;
        document.write('<br>');
        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">More »</a>';
            flag = 1;;
        }
        document.write(towrite);
        document.write('</li>');
        if (displayseparator == true) if (i != (numposts - 1)) document.write('');
    }
    document.write('</ul>');
}
</script>
<script type='text/javascript'>
var numposts = 5;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = true;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = false;
var numchars = 100;</script>
  <script type="text/javascript" src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=labelthumbs"></script>

Save!

Sekianlah artikel Crethuseo - Cara Pasang Widget Recent Post di Blog kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. Baiklah, sampai jumpa di artikel selanjutnya.

Bila kalian ada pertanyaan atau pendapat bisa kalian tulis dikomentar ❤

April 15, 2017 Blogger Desain Blog Widget Blog