◄ Min  Size Fonts: + | - | ± Color: Max ►

Recent Post with Json PostTicker

Tadinya enggak akan mosting, dan akan membuat artikel di post sebelumnya yaitu mengenai recent post! Menampilkan postingan terbaru pada sebuah blog dengan menggunakan javascript json. Mau update dipostingan sebelumnya, takut sobat² enggak tahu :D kebenearan tidak ada bahan posted tema, ya sudah mosting ajah :p
Bergaya marquee (tulisan berjalan) kebanyakan kita melihat recent post with json yang sering kita jumpai. Kali ini Beben koben si bloglang anu ganteng kalem tea mau berbagi mirip² tapi tak sama ;)) Post teranyar akan muncul dengan gaya huruf per huruf seperti orang mengetik (PostTicker) :D

Buka Design Page ElementsAdd a GadgetHTML/JavaScript kemudian masukin bumbu ramuannya (PostTicker json script) ;)

PostTicker json

<script type='text/javascript'>

//<![CDATA[
// Ticker startup
var theCharacterTimeout = 45;
var thePostTimeout = 5000;
var theWidgetOne = "_";
var theWidgetTwo = "-";
var theWidgetNone = "";
var theLeadString = "RECENT POSTS:&nbsp;";
var thePostTitles = new Array();
var thePostLinks = new Array();
var objPost;

//var thePostCount = 4;

function PostTicker(json){
//Ticker data collection
try{
for(var post = 0; post < thePostCount; post++){
objPost = json.feed.entry[post];
thePostTitles[post] = objPost.title.$t;
//thePostLinks[post] = json.feed.entry[post].link[post].href;
for (var nCounter = 0; nCounter < objPost.link.length; nCounter++)
{
if (objPost.link[nCounter].rel == 'alternate')
{
thePostLinks[post] = objPost.link[nCounter].href;
break;
}
}
}
thePostTitles[post] = "Post Ticker";
thePostLinks[post] = "http://beben-koben.blogspot.com";
thePostCount++;
}catch(exception){
alert(exception);
}
startPostTicker();
}
//Ticker Startup
function startPostTicker()
{
// Define run time values
theCurrentPost = -1;
theCurrentLength = 0;
// Locate base objects
if (document.getElementById) {
theAnchorObject = document.getElementById("TickerPost");
runTheTicker();
}
else {
document.write();
return true;
}
}
// Ticker main run loop
function runTheTicker()
{
var myTimeout;
// Go for the next post data block
if (theCurrentLength === 0)
{
theCurrentPost++;
theCurrentPost = theCurrentPost % thePostCount;
thePostTitle = thePostTitles[theCurrentPost].replace(/&quot;/g, '"');
theTargetLink = thePostLinks[theCurrentPost];
theAnchorObject.href = theTargetLink;
thePrefix = " + theLeadString + ";
}
// Stuff the current ticker text into the anchor
theAnchorObject.innerHTML = thePostTitle.substring(0, theCurrentLength) + whatWidget();
// Modify the length for the substring and define the timer
if (theCurrentLength != thePostTitle.length)
{
theCurrentLength++;
myTimeout = theCharacterTimeout;
}
else
{
theCurrentLength = 0;
myTimeout = thePostTimeout;
}
// Call up the next cycle of the ticker
setTimeout("runTheTicker()", myTimeout);
}
// Widget generator
function whatWidget()
{
if (theCurrentLength == thePostTitle.length)
{
return theWidgetNone;
}
if ((theCurrentLength % 2) == 1)
{
return theWidgetOne;
}
else
{
return theWidgetTwo;
}
}
//]]>
</script>

<strong>Recent Post : </strong> <a id="TickerPost"></a>

<script type='text/javascript'>
var thePostCount = 10;
var nScrollDelay = 175;
</script>

<script src="http://YOUR-NAME.blogspot.com/feeds/posts/default?alt=json-in-script&amp;callback=PostTicker"></script>
Ganti URL blog dengan link blog masing² :)
Resourcenya lupa dari mana ;)) muuf :D
Happy recent post \m/
Loading...
XRecent Post with Json PostTicker

Subscribe my posts Register For Free!

3 comments

[?] g+ convert

DO NOT EVEN TRY ADD LINK [-X
You can use some HTML tags, such as
<b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...

al-Quran

MISC

Resources

WANT BE HERE!!! CONTACT ME :P
1 2 3 4 5 6 7 8 9

FACEBOOK PAGE