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.
Hasil Recent Post :
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.
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://ubuntuversion.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://onlyx-45.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.
Terima kasih telah membaca artikel: Cara Membuat Daftar Artikel Terbaru di Blog
0 komentar:
Posting Komentar