Cara Dan Metode Menciptakan Posting Terbaru Plus Gambar Thumbnail Image

cara Dan Teknik Membuat Widget Posting Terbaru (Recent Post) Plus Gambar (Thumbnail Image) di Blogger.

WIDGET Posting Terbaru, Recent Post, Latest Post, Entry Terbaru, atau Tulisan Terbaru yaitu 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, ibarat sudah pernah  di share di blog ini (Lihat: Widget Posting Terbaru).

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

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

cara Dan Teknik 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 isyarat 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/AVvXsEhTdAgWh-e6HOk3C62f6tyrkf-fJw03YwRF_G5uFTwK1oc9DPlD2ZJcXsBvbnvjgR7ARM-BvNC6XDqexS_snjDo5DPaB_xTl3gdGMXcjTYUcNS4QMdgw5FsUw1S28EJCFfZZzrss_6ZgZw/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>

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

4. Save!

Demikian cara pasang daftar posting terbaru di sidebar blog.

Jika ingin menampilkan posting terbaru menurut 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, dapat memakai wigdet Feed bawaan blogger:

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

Untuk menampilkan widget posting terbaru Istimewa untuk di halaman dalam (single post/page), silakan buka cara Dan Teknik Menampilkan Widget Recent Post di Halaman Dalam Saja.

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

Sumber
Sumber http://www.contohblog.com/

Artikel Terkait

Cara Dan Metode Menciptakan Posting Terbaru Plus Gambar Thumbnail Image

4/ 5

Oleh Unknown

Unknown Mei 20, 2016