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