Cara Membuat Recent Post dengan Gambar (Thumbnail) di Blog

Jikalau sebelumnya saya pernah posting tentang Cara Membuat Random Post dengan Gambar (Thumbnail) di Blog dan juga Cara Membuat Recent Comment dengan Avatar di Blog, maka pada postingan kali ini saya akan membahas tentang Bagaimana Cara Membuat atau Memasang Widget Recent Post dengan disertai Gambar atau Thumbnail pada Blog.

DEMO

Berbeda dengan widget "Recent" sebelumnya. Widget Recent Post ini berfungsi menampilkan postingan-postingan yang paling baru kita publikasikan ke blog kita. Widget ini sangat bagus untuk dipasang di blog kita, walaupun sebenarnya di homepage sudah tersemat postingan-postingan terbaru, tapi belum tentu atau jarang kan kalau pengunjung tersebut mau pergi ke homepage untuk melihat posting terbaru.

Berikut langkah-langkahnya:

1. Login ke Akun Blogger.
2. Masuk ke Dasbor Blog > Tata Letak > Tambahkan Gadget.
3. Klik pada HTML/JavaScript lalu salin dan letakkan kode berikut didalamnya.

<style scoped="scoped">
#dte_recent-post{  font:normal normal 11px/normal Helmet,Freesans,Sans-Serif;   color:#333;   margin:0 auto;   padding:0;   min-height:100px;   background:white url('data:image/gif;base64,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') no-repeat 50% 50%;}
#dte_recent-post li{  list-style:none;   margin:0;   padding:7px;   background-color:white;   border-bottom:1px solid #ddd}
#dte_recent-post li a img{  float:left;   margin:0 10px 0 0;   padding:0;   border:none;   background:none;   outline:none}
#dte_recent-post li a.title{  display:block;   font-size:12px;   text-decoration:none;   color:#900}
#dte_recent-post li a.title:hover{  text-decoration:underline}
#dte_recent-post li span.foot{  clear:both;   display:block;   color:#ccc;   margin-top:7px;   font-size:10px}
</style>
<ul id="dte_recent-post"></ul>
<script>
//<![CDATA[
var rp_homePage = "http://puloblog.blogspot.com",// Your blog homepage
    rp_numPosts = 5,// How many posts?
    rp_thumbWidth = 72,// Thumbnail width. Change to 0 if you want to disable the post thumbnail
    rp_numChars = 100,// Number of posts summary
    rp_sortByLabel = false,// Replace `false` with your specific label name to display posts by specific label
                            // Example:rp_sortByLabel = "JQuery",to sort posts by label "JQuery"
    rp_noImage = "data:image/png; base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",// A 'no-image' image
    rp_monthNames = [
        "Januari",
        "Februari",
        "Maret",
        "April",
        "Mei",
        "Juni",
        "Juli",
        "Agustus",
        "September",
        "Oktober",
        "November",
        "Desember"
    ],
    rp_newTabLink = true,// If true,then all the widget links will automatically opens in new window/new tab
    rp_loadTimer = "onload"; // "onload"|| time in milliseconds (e.g:3000,4000,...)
//]]>
</script>
<script src="http://dte-project.googlecode.com/svn/trunk/blogger-recent-post-with-preloader.js"></script>

Keterangan:

• homePage = "http://puloblog.blogspot.com" (Ganti dengan URL Blog sobat)
• numPosts = 5 (Jumlah postingan yang ditampilkan)

4. Jangan lupa klik Simpan.

Demikianlah tutorial blogger untuk kesempatan kali ini, widget Recent Post ini saya ambil dari situs DTE, berikut ini adalah link sumbernya.
http://www.dte.web.id/2012/07/recent-post-widget-with-preloader.html