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

Baca Juga

Cara Pasang Daftar Posting Terbaru (Recent Post) Simple & plus Gambar Thumbnail di Sidebar Blogger.

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, yaitub 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

Jika ingin widget posting terbaru plus gambar thumbnail, seperti ini:

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/AVvXsEiQTvo4LnaGWwy0cvcycA-jpb9vg2lM08OKLIPOWzanKjBTvJzoTa9PsBLbmKuNPNrjIzSa-nonL1pnYMUUhmdLxMdE6H09iz6K7Np8Bqc7Eusgcn-9IbAM8OuPUQdZrFvjQEusLVcaYvc/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>

Demikian Cara Pasang Daftar Posting Terbaru (Recent Post) Simple di Sidebar Blog. Good Luck & Happy Blogging! (www.contohblog.com).*