Blog Berbagi Ilmu

Thursday, March 16, 2017

Box Daftar Posting

No comments :
Daftar Posting sangat bermanfaat bagi pembaca blog untuk menelusuri dan mendapatkan posting dengan lebih cepat dan mudah. Daftar posting ini saya copy paste dari http://gubhugreyot.blogspot.co.id. Contoh daftar posting ini dapat di lihat di akhir posting http://d2rl97.blogspot.co.id/p/cara-merumuskan-tujuan-pembelajaran.html. Bagi yang suka memasang dapat mengikuti Petunjuk pemasangan berikut ini.

LANGKAH UNTUK MEMBUAT DAFTAR POSTING  
  1. Login ke Blogger (Login to Blogger).
  2. Dasbor (Dasboard).
  3. Rancangan (Design).
  4. KLIK Elemen Laman (Page Elements).
  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(https://3288785158770787760-a-1802744773732722657-s-sites.googlegroups.com/site/gubhugreyotprojects/mart-2010/images/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://Alamat Blog/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
gubhugreyot.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.


No comments :

Post a Comment