Membuat Daftar Artikel Terbaru Blog

HEADLINE NEWS - atau Artikel terbaru atau bisa juga nantinya di beri judul "RecentPost", sangat bermanfaat bagi pembaca blog untuk menelusuri dan mendapatkan posting dengan lebih cepat dan mudah. 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.

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 xHTML).

7. KLIK SIMPAN (SAVE).

8. Buka blog untuk melihat hasilnya.

9. KODE CSS, Javascript dan xHTML :
<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://bangvandawablog.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 dengan Alamat blog kamu : misalnya http://bangvandawablog.blogspot.com/

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.

Jika menurut agan-agan artikel ini bermanfaat silahkan di share atau like supaya lebih banyak lagi yang mendapat manfaat dari artikel ini.

Sumber : http://onlyx-45.blogspot.com/