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 semoga meningkatkan pageviews.

Cara menampilkan widget posting terbaru dapat memakai 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"

 plus Gambar Thumbnail di Sidebar Blogger Cara Pasang Daftar Posting Terbaru (Recent Post) di Sidebar Blog


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

 plus Gambar Thumbnail di Sidebar Blogger Cara Pasang Daftar Posting Terbaru (Recent Post) di Sidebar Blog

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

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

Kode CSS Recent Post Simple
Simpan instruksi berikut ini di atas instruksi ]]></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 instruksi berikut ini di bawah instruksi sidebar. Kalo ada  kode kotak pencarian, simpan di bawah instruksi 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+'" sasaran ="_top" title="Cara Pasang Daftar Posting Terbaru (Recent Post) di Sidebar Blog">'+ 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, menyerupai ini:

 plus Gambar Thumbnail di Sidebar Blogger Cara Pasang Daftar Posting Terbaru (Recent Post) di Sidebar Blog


Lakukan langkah berikut ini:

1. Layout > Add a Gadget > Pilih HTML/Javascript
2. Masukkan (Copas) instruksi 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 = 'http://3.bp.blogspot.com/-O-vjxP03hYo/UXVtH90_iQI/AAAAAAAAAG4/60hz9Rn5FWA/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 + '" sasaran ="_top"><img class="label_thumb" src="' + thumburl + '"/></a>');
        document.write('<strong><a href="' + posturl + '" sasaran ="_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 + '" sasaran ="_top">' + commenttext + '</a>';
            towrite = towrite + commenttext;
            flag = 1;;
        }
        if (displaymore == true) {
            if (flag == 1) towrite = towrite + ' | ';
            towrite = towrite + '<a href="' + posturl + '" class="url" sasaran ="_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.idtutorial.com).*

Share To:

Endo Sadewa

Post A Comment:

0 comments so far,add yours