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 Elements ► Add a Gadget ► HTML/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/