Membuat Daftar Artikel baru dengan CSS

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, desain recent posts ini juga menyertakan KODE CSS yang mudah dimengerti oleh blogger pemula sekalipun.

View Demo

dalam blog 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 HTML (KODE CSS, Javascript dan HTML).
7. KLIK SIMPAN (SAVE).
8. Buka blog untuk melihat hasilnya.

KODE CSS, Javascript dan HTML :

<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{color:yellow;border-top:1px dotted blue;border-bottom:1px dotted blue;background:transparent url(http://i964.photobucket.com/albums/ae124/gubhugreyot/Arrow/DoubleRedArrow.gif) no-repeat 0 50%;padding-left:15px;}
.daftar_posting a:hover{color:red;}
</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://gusdegleng.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&max-results=999&callback=showrecentposts"></script>
</div>
</div>
</div>

Keterangan / Catatan :

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 http://gusdegleng.blogspot.com/ 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.