March 30, 2017

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

March 30, 2017

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"

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


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

 Daftar Posting Terbaru

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:

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/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).*

Previous
« Prev Post
Author Image

CB Blogger

Recommended Posts

Related Posts

Show comments
Hide comments

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

  1. terima ksih min , artikel ini sangat bermanfaattt bgi saya my site

    ReplyDelete
  2. mksih min , artikel ini sangat bermanfaat buat saya

    ReplyDelete

Contact Form

Name

Email *

Message *