Tutorial Recent Post With Scroller

:40: Kali ni tuto tentang Recent Post Scroller. Mana mana blogger yang suka akan kekemasan blog beliau dan xnak nmpak blog beliau serabut. Recent Post Scroller adalah sebuah scrollbox yang amat simple lagi kemas. Kalau korang nak, nahhhhhhhhh

1. Copy

<style type="text/css">
.daftar_posting{list-style:none;margin-left:-5px;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(image-1) 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="URL BLOG/feeds/posts/default?orderby=published&alt=json-in-script&max-results=999&callback=showrecentposts"></script>
</div>
</div>
</div>



2. Go to Dashboard> Design> Add a gadget> HTML/Javascript (paste).

NOTE!

+ Gantikan Image-1 dengan ..
» http://i49.tinypic.com/27ziu80/gubhugreyot/images/bgRPli.gif

+ Dan URL BLOG untuk URL blog korang.

Kalau nak ubah suai box yang agak terlalu besar tuu, boleh adjust kat width:500px.

FInally, click SAVE! 

No comments: