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">7. KLIK SIMPAN (SAVE).
.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>
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:
0 komentar:
Post a Comment
Para pengurus Blog Gawsoti Tidak selalu Online untuk memantau Komentar yang Masuk, Jadi tolong berikan Komentar Anda dengan Pantas dan Layak dikonsumsi oleh Publik. No SARA, SPAM dan Sejenisnya.