Tutorial Membuat Recent Post Dengan Thumbnail , Comment dan Timestamp

Tadi saya ada cuba satu widget ni , nampak cun juga. jadi, entri kali ini saya akan kongsi Tutorial Membuat Recent Post Dengan Thumbnail , Comment dan Timestamp seperti screenshot diatas. Ok sekarang kita mulakan tutorialnya.

Tutorial:

1. Login ke Dashboard blogger.

2. Klik butang " More Options (rujuk no 1 pada GAMBAR 1) " dan klik " Layout (rujuk no 2 pada GAMBAR 1) ".

GAMBAR 1

3. Pada halaman Layout, klik " Add a Gadget (rujuk no 3 pada GAMBAR 2) " pada mana-mana bahagian yang anda nak untuk letakkan kod javascript tu nanti.

GAMBAR 2

4. Cari HTML/Javascript dan klik butang tambah (rujuk no 4 pada GAMBAR 3).

GAMBAR 3

5.  Copy (CTRL+C) kod javascript dibawah:

<div style="border: 0px solid rgb(153, 153, 153); overflow: auto; width: 330px; height: 450px; text-align: left;">
<style>img.recent_thumb {padding:1px;width:55px;height:55px;border:0;
float:right;margin:0 0 5px 10px;}.recent_posts_with_thumbs {float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;}.recent_posts_with_thumbs a {text-decoration:none;}.recent_posts_with_thumbs strong {font-size:10px;}</style>
<script style="" src="https://krishcarasoul.googlecode.com/files/recentpostswiththumbnailsv3.js"></script>
<script style="">
var numposts = 10;
var showpostthumbnails = true;
var displaymore = true;
var displayseparator = true;
var showcommentnum = true;
var showpostdate = true;
var showpostsummary = true;
var numchars = 100;</script>
<script src="http://faiz-tutorial.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentpostswiththumbs"></script></div>

## Gantikan:

• http://faiz-tutorial.blogspot.com - Tukarkan kepada URL blog anda.
• var numposts = 10; - Nombor berwarna adalah jumlah entri yang akan dipaparkan
• width: 330px; height: 450px; - Nombor berwarna adalah saiz lebar dan tinggi recent post.

6. Paste (CTRL+V) pada ruang Content (rujuk no 5 pada GAMBAR 4)

GAMBAR 4

7. Seterusnya klik " Save (rujuk no 6 pada GAMBAR 4 ) " dan lihat la hasilnya..