Home » » Cara Membuat Posting Terbaru Plus Gambar Thumbnail Image

Cara Membuat Posting Terbaru Plus Gambar Thumbnail Image

Posting Terbaru Plus Gambar Thumbnail Image
Cara Membuat Widget Posting Terbaru (Recent Post) Plus Gambar (Thumbnail Image) di 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 = '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 + '" 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 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

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

Thanks for reading & sharing Cara Membuat Posting Terbaru Plus Gambar Thumbnail Image

Previous
« Prev Post

4 comments:

Comment Page:
  1. This comment has been removed by the author.

    ReplyDelete
  2. alasannya kenapa pakai cara kedua tidak bisa muncul mas?Cuma loading terus aja..mohon bantuannya

    ReplyDelete
    Replies
    1. biasanya karena ada kode yang mematikan fungsi widget bawaan blogger. Silakan cek di bagian paling bawah kode template, di kode < /body > biasanya ada kode yang mengapitnya, hapus yang mengapitnya jadi < / body > doang

      Delete
  3. gan,kalo mau masukin pos berdasarkan label apa mesti di sertakan url nya jga???

    ReplyDelete

Komentar spam, menyertakan link aktif dan alamat blog tidak akan muncul. Tidak semua pertanyaan sempat atau bisa dijawab. Thanks for visiting and the comment :)

E-mail Newsletter

Receive Latest Posts from CB Blogger Straight in Your Email Inbox