Cara Membuat Posting Terbaru Plus Gambar Thumbnail Image

Baca Juga

Cara Menampilkan Posting Terbaru (Recent Post) Plus Gambar (Thumbnail Image) di Sidebar Blogger.

WIDGET Posting Terbaru, Recent Post, Latest Post, Entry Terbaru, atau Tulisan Terbaru merupakan salah satu Widget yang Wajib Dipasang di Blog untuk menampilkan konten terbaru di blog kita.

Widget ini juga berfungsi sebagai Navigasi sekaligus Internal Link yang memudahkan pengunjung menjelajahi konten blog kita.

Banyak sekali gaya atau model tampilan posing terbaru, seperti sudah pernah  di share di blog ini (Lihat: Widget Posting Terbaru).

Berikut ini salah satu style recent post with thumbnail image sebagaimana tampak dalam ilustrasi posting di atas.

Kode ini sudah diujicoba dan berhasil. Gambar di atas adalah buktinya. Sebelum CB share, coba pasang dulu di blog ini, lalu diambil Screenshotnya menggunakan Snipping Tools untuk diupload di sini.

Cara Membuat Posting Terbaru Plus Gambar Thumbnail Image

1. Klik "Layout" (Tata Letak) > Add a Gadget > pilih HTML/Javascript
2. Isi judul widget dengan Posting Terbaru atau Tulisan Terbaru
3. Copas kode berikut ini di kolom content;

<style>
img.label_thumb {
  float:left;
  margin-right:10px !important;
  height:70px;
  /* Thumbnail height */
  width:90px;
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 {
  text-transform:none;
}
.label_with_thumbs strong {
  padding-left:0px;
}
</style>
<script type='text/javascript'>
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>

Catatan:
- Angka 70px adalah tinggi thumbnail image, bisa diubah.
- Angka 90px adalah lebar gambar, bisa diubah.
- Angka 5 adalah jumlah posting yang akan ditampilkan, bisa diubah menjadi berapa saja.

4. Save!

Demikian cara pasang daftar posting terbaru di sidebar blog.

Jika ingin menampilkan posting terbaru berdasarkan Label, atau menampilkan kategori tertentu saja, maka ubah kode /feeds/posts/default menjadi /feeds/posts/default/-/Label

Kode Recent Post Plus Gambar Lainnya:

1. Layout > Add a Gadget > pilih HTML/Javascript
2. Isi judul widget dengan Recent Posts atau Terbaru
3. Copas kode berikut ini:

<style>
img.rct-thumb{float:left;margin-right:10px;height:72px;width:72px;}
.recent-by-tag{width:100%;margin:0;padding:0}
ul.recent-by-tag li{padding:10px 0;margin-bottom:0;border-bottom:1px solid #ddd}
.recent-by-tag li{font-size:13px;list-style:none;padding-left:0;margin:0;padding:0;overflow:hidden}
.recent-by-tag a {font-size: 14px;font-weight: bold;margin: 0;color: #2b2b2b;}
.recent-by-tag strong{padding-left:0}
span.showdates{font-size:11px;margin:10px 0 0;line-height: 2}
</style>
<script type='text/javascript'>
var numposts = 5;
var showpostthumbnails = true;
var showpostdate = true;</script>
<script type='text/javascript'>
//<![CDATA[
function rcentbytag(e){document.write('<ul class="recent-by-tag">');for(var t=0;t<numposts;t++){var n=e.feed.entry[t];var r=n.title.$t;var i;if(t==e.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if(n.link[o].rel=="replies"&&n.link[o].type=="text/html"){var u=n.link[o].title;var f=n.link[o].href}if(n.link[o].rel=="alternate"){i=n.link[o].href;break}}var l;try{l=n.media$thumbnail.url}catch(h){s=n.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!=""){l=d}else l="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVaFFArUT4RFh4aBNTK-mlH4EVRQQ1KvvyqhUX8FX7QWe5efWact-XXiSPMyewyh9Ruo_7aoZ0tU88htKF7hoHmDapHSHlWipr4h_b_piiDtiNec_mNRx3izbL_iQyH9xP6loS0_747aPr/s70-c/KM+Icon.png"}var p=n.published.$t;var v=p.substring(0,4);var m=p.substring(5,7);var g=p.substring(8,10);var y=new Array;y[1]="Januari";y[2]="Februari";y[3]="Maret";y[4]="April";y[5]="Mei";y[6]="Juni";y[7]="Juli";y[8]="Agustus";y[9]="September";y[10]="Oktober";y[11]="November";y[12]="Desember";document.write('<li class="clear">');if(showpostthumbnails==true)document.write('<a href="'+i+'" target ="_blank" title="'+r+'"><img class="rct-thumb" alt="'+r+'" src="'+l+'"/></a>');document.write('<strong><a href="'+i+'" target ="_blank" title="'+r+'" rel="nofollow">'+r+'</a></strong>');document.write('<br>');var x="";var T=0;if(showpostdate==true){x='<span class="showdates">'+x+g+" "+y[parseInt(m,10)]+" "+v+"</span>";T=1}document.write(x);document.write("</li>");if(t!=numposts-1)document.write("")}document.write("</ul>")}
//]]>
</script>
<script>
document.write("<script src=\"/feeds/posts/default?orderby=updated&alt=json-in-script&callback=rcentbytag\"><\/script>");
</script>

4. Save!

Posting Terbaru Judul Doang

Jika tidak mau pake gambar, alias daftar judul doang, bisa menggunakan wigdet Feed bawaan blogger:

1. Layout > Add a Gadget > Pilih Feed
2. Masukkan alamat blog Anda, misalnya: http://www.contohblog.com/
3. Klik "Continue"
4. Ubah Nama Blog yang muncul di kolom judul widget dengan Posting Terbaru
5. Save!

Untuk menampilkan widget posting terbaru hanya di halaman dalam (single post/page), silakan buka Cara Menampilkan Widget Recent Post di Halaman Dalam Saja.

Good Luck & Happy Blogging! (http://www.contohblog.com).*

Sumber