Cara membuat daftar artikel terbaru/recent posts di blog

Selamat Pagi ~ Artikel terbaru atau bisa juga nantinya di beri judul "Recent Post" seperti contoh di bawah, sangat bermanfaat bagi pembaca blog untuk menelusuri dan mendapatkan posting dengan lebih cepat dan mudah. Apa yang terlihat di bawah ini hanyalah sekedar contoh untuk mendemonstasikan bentuk akhir dari recent post yang akan kita buat. Recent posts ini juga bermanfaat untuk meringankan kerja karena daftar isi secara otomatis tertambahkan dengan judul posting terbaru ketika posting diterbitkan. Untuk memudahkan kita melakukan improvisasi, baik box ataupun teksnya, design recent posts ini juga menyertakan KODE CSS yang mudah dimengerti oleh blogger pemula sekalipun.Bagi Anda yang mau ingin widget ini silahkan lihat Di bawah Ini:

Langkah Cara Membuat Daftar Artikel Terbaru di Blog

1. Login ke Blogger (Login to Blogger).

2. Dasbor (Dasboard).

3. Tata Letak .

4. KLIK Add Gadget

5. HTML/Javascript.

6. Copy paste KODE Dibawah INI:

 <style type="text/css">
.daftar_posting{list-style:none;margin-left:-20px;font-family:Droid Serif;font-size:11px;color:lime;text-align:left;}
.daftar_posting a:hover{
-moz-box-shadow: 0 0 5px 5px #006400;
-webkit-box-shadow: 0 0 5px 5px #006400;
box-shadow: 0 0 5px 5px #006400;
</style>
<div style="margin:2px; padding:4px;border:2px solid #888;background:#333;">
<div style="border:2px solid #444;overflow:auto;padding:4px;background:#111;height:250px;">
<div style="width:500px;">
<script style="text/javascript">
var numposts = 1000;
var showpostsummary = false;
var standardstyling = true;
function showrecentposts(json) {document.write('<ol class="daftar_posting">');
for (var i = 0; i < numposts; i++) { document.write('<li>');
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 == 'alternate') {posturl = entry.link[k].href; break;}}
posttitle = posttitle.link(posturl);
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 (!standardstyling) document.write('<div class="bbrecpost">');
if (standardstyling) document.write(posttitle);
if (!standardstyling) document.write('</div><div class="bbrecpostsum"">');
if (showpostsummary == true) { if (standardstyling) document.write('<br/>');
if (postcontent.length < numchars) { if (standardstyling) document.write('<i>');
document.write(postcontent); if (standardstyling) document.write('</i>');}
else { if (standardstyling) document.write('<i>');
postcontent = postcontent.substring(0, numchars); var quoteEnd = postcontent.lastIndexOf(" ");
if (standardstyling) document.write('</i>');}}
if (!standardstyling) document.write('</div>'); if (standardstyling) document.write('<br/>');
document.write('</li>');}
document.write('</ol>');
if (!standardstyling) document.write('<div class="bbwidgetfooter">');
if (standardstyling) document.write('<br/>');}
</script>
<script src="http://gawsoti.blogspot.com//feeds/posts/default?orderby=published&alt=json-in-script&max-results=999&callback=showrecentposts"></script>
</div>
</div>
</div>

7. KLIK SIMPAN (SAVE).

8. Buka blog untuk melihat hasilnya.

Keterangan :

1. margin-left:-20px; digunakan untuk mengatur jarak setiap judul posting dari batas kiri box. Apabila kurang ke kiri perbesar dalam nilai minus (misal jadi -30px).

2. Ganti Alamat Blog saya dengan Alamat blog kamu.

3. Box Daftar Posting ini akan lebih bagus seandainya ditempatkan pada ruangan widget dengan lebar mencukupi (di atas 350px) supaya setiap judul posting tidak terputus (pindah spasi).

4. Penggunaan warna background dan warna font dapat di atur pada KODE CSS. Terima kasih telah membaca artikel: Cara Membuat Daftar Artikel Terbaru di Blog

Dan Hasilnya Kira-kira seperti Di bawah Ini: