Cara Membuat Widget News Update di Blogger

Cara Membuat Widget News Update di Blogger - Widget ini Berfungsi untuk menampilkan judul serta link artikel terbaru yang baru saja kita publikasikan dari update blog kita. Dan di dalamnya berisi berita-berita terbaru dari postingan blog kita.

Jika sobat mengunjungi blog atau situs lain, mungkin sobat pernah melihat Tab bar, yang berisi berita terbaru dari isi blog dan daftar berita di bar tersebut tampil dengan slideshow seperti Tampilan yang di atas content blog ini, sehingga dapat menarik perhatian para pengunjung blog kita.

Cara Membuat Widget News Update di Blogspot :
1. Masuk ke akun Blogger.
2. Langsung menuju Tata Letak > Tambah Gadget. [tambahkan yang diatas Header/Content]
3. Pilih HTML/JavaScript.
4. Tidak usah diberi judul.
5. Copy kode di bawah ini dan paste di kotak Konten.

<script src='http://www.google.com/jsapi'></script>
<script>
google.load("jquery", "1.3.2");
</script>
<script type='text/javascript'>
//<![CDATA[
var gfeedfetcher_loading_image="indicator.gif";google.load("feeds","1")
;function gfeedfetcher(c,a,b){this.linktarget=b||"";this.feedlabels=[];this.feedurls=[];this.feeds=[];this.feedsfetched=0;this.feedlimit=5;this.showoptions="";this.sortstring="date";
document.write('<div id="'+c+'" class="'+a+'"></div>');this.feedcontainer=document.getElementById(c);this.itemcontainer="<li>"}gfeedfetcher
.prototype.addFeed=function(b,a){this.feedlabels[this.feedlabels.length]=b;this.feedurls[this.feedurls.length]=a};gfeedfetcher
.prototype.filterfeed=function(b,a){this.feedlimit=b;if(typeof a!="undefined"){this.sortstring=a}};gfeedfetcher
.prototype.displayoptions=function(a){this.showoptions=a};gfeedfetcher
.prototype.setentrycontainer=function(a){this.itemcontainer="<"+a.toLowerCase()+">"}
;gfeedfetcher.prototype.init=function(){this.feedsfetched=0;this.feeds=[];
this.feedcontainer.innerHTML='<img src="'+gfeedfetcher_loading_image+'" /> Retrieving RSS feed(s)';var a=this;for(var b=0;b<this.feedurls.length;b++)
{var c=new google.feeds.Feed(this.feedurls[b]);var d=(this.feedlimit<=this.feedurls.length)?1:Math.floor
(this.feedlimit/this.feedurls.length);if(this.feedlimit%this.feedurls.length>0&&this.feedlimit>
this.feedurls.length&&b==this.feedurls.length-1){d+=(this.feedlimit%this.feedurls.length)}c.setNumEntries(d);c.load(function(e)
{return function(f){a._fetch_data_as_array(f,e)}}(this.feedlabels[b]))}};gfeedfetcher._formatdate=function(a,c){var d=new Date(a)
;var b=(c.indexOf("datetime")!=-1)?d.toLocaleString():(c.indexOf("date")!=-1)?d.toLocaleDateString():(c.indexOf("time")!=-1)?d.toLocaleTimeString()
:"";return"<span class='datefield'>"+b+"</span>"};gfeedfetcher._sortarray=function(a,b){var b=(b=="label")?"ddlabel":b;if(b=="title"||b=="ddlabel")
{a.sort(function(e,d){var g=e[b].toLowerCase();var f=d[b].toLowerCase();return(g<f)?-1:(g>f)?1:0})}else{try{a.sort(function(e,d)
{return new Date(d.publishedDate)-new Date(e.publishedDate)})}catch(c){}}};gfeedfetcher.prototype._fetch_data_as_array=function(b,a)
{var d=(!b.error)?b.feed.entries:"";if(d==""){alert("Google Feed API Error: "+b.error.message)}for(var c=0;c<d.length;c++){b.feed.entries[c]
.ddlabel=a}this.feeds=this.feeds.concat(d);this._signaldownloadcomplete()};gfeedfetcher
.prototype._signaldownloadcomplete=function()
{this.feedsfetched+=1;if(this.feedsfetched==this.feedurls.length){this._displayresult(this.feeds)}};gfeedfetcher.prototype._displayresult=function(a)
{var e=(this.itemcontainer=="<li>")?"<ul>\n":"";gfeedfetcher._sortarray(a,this.sortstring);for(var c=0;c<a.length;c++){var d='<a href="'+a[c]
.link+'" target="'+this.linktarget+'" class="titlefield">'+a[c].title+"</a>";var b=/label/i.test(this.showoptions)?'<span class="labelfield">['+this.feeds[c]
.ddlabel+"]</span>":" ";var g=gfeedfetcher._formatdate(a[c].publishedDate,this.showoptions);var f=/description/i.test
(this.showoptions)?"<br />"+a[c].content:/snippet/i.test(this.showoptions)?"<br />"+a[c].contentSnippet:"";e+=
this.itemcontainer+d+" "+b+" "+g+"\n"+f+this.itemcontainer.replace("<","</")+"\n\n"}e+=(this.itemcontainer=="<li>")?"</ul>":"";this.feedcontainer.innerHTML=e};
var gfeedfetcher_loading_image="indicator.gif";function gfeedrssticker(d,b,a,c){this.tickerid=d;this.delay=parseInt(a);
this.mouseoverBol=0;this.itemsperpage=1;this.messagepointer=0;gfeedfetcher.call(this,d,b,c)
;this.itemcontainer="<div>";
this.tickerdiv=document.getElementById(d)}gfeedrssticker.prototype=new gfeedfetcher;gfeedrssticker
.prototype.constructor=gfeedrssticker;gfeedrssticker.prototype._displayresult=null
;gfeedrssticker.prototype.entries_per_page=function(a){this.itemsperpage=a}
;gfeedrssticker.prototype._signaldownloadcomplete=function(){this.feedsfetched+=1;if(this.feedsfetched==this.feedurls.length)
{this._initscroller(this.feeds)}};gfeedrssticker.prototype._initscroller=function(a){var c=this;gfeedfetcher._sortarray
(a,this.sortstring);this.itemsperpage=(this.itemsperpage>=a.length)?1:this.itemsperpage;var b=a.slice(this.messagepointer,this.itemsperpage)
;this.tickerdiv
.innerHTML=formatrssmessage(b,this.showoptions,this.itemcontainer,
this.linktarget);this.tickerdiv.onmouseover=function(){c.mouseoverBol=1}
;this.tickerdiv.onmouseout=function(){c.mouseoverBol=0};this.messagepointer=this.itemsperpage;if(window.attachEvent)
{window.attachEvent("onunload",function(){c.tickerdiv.onmouseover=c.tickerdiv.onmouseout=null})}setTimeout(function()
{c._rotatemessage()},this.delay)};function formatrssmessage(d,b,f,g){var c=(f=="<li>")?"<ul>\n":"";for(var e=0;e<d.length;e++)
{var h='<a href="'+d[e].link+'" target="'+g+'" class="titlefield">'+d[e].title+"</a>";var j=/label/i.test(b)?'<span class="labelfield">
['+d[e].ddlabel+"]</span>":" ";var k=gfeedfetcher._formatdate(d[e].publishedDate,b);var a=/description/i.test(b)?"<br />"+d[e]
.content:/snippet/i.test(b)?"<br />"+d[e].contentSnippet:"";c+=f+h+" "+j+" "+k+"\n"+a+f.replace("<","</")+"\n\n"}c+=(f=="<li>")?"</ul>\n":"";return c}
gfeedrssticker.prototype._rotatemessage=function(){var b=this;if(this.mouseoverBol==1){setTimeout(function(){b._rotatemessage()},100)}
else{var a=this.feeds.slice(this.messagepointer,this.messagepointer+this.itemsperpage);this.tickerdiv
.innerHTML=formatrssmessage
(a,this.showoptions,this.itemcontainer,this.linktarget);this.messagepointer=(this.messagepointer+this.itemsperpage>this.feeds.length-1)?0:
this.messagepointer+this.itemsperpage;setTimeout(function(){b._rotatemessage()},this.delay)}};
//]]></script>
<style type='text/css'>
.titlefield{text-decoration: none;}.labelfield{color:#666;font-size: 100%;}.datefield{color:#000000;font:normal 13px Comic Sans MS;}#example1{width: 600px;height: 14px;border: 0px solid #aaa;padding: 0px;font:bold 13px Comic Sans MS;text-transform:none;text-align:left;background-color:transparent;}code{ color: #000;}#example1 a:link, #example1 a:visited {color:#00bfff;text-decoration:none;margin-left:3px}#example1 a:hover {color:#000000;text-decoration:none;}
</style>
<div class='newspic'>
<div class='news'>
<div style='float:left;padding:5px 50px 5px 0;font:bold 14px Arial;text-transform:none;color:#000000;background:#00ffff -moz-linear-gradient(top,  #FFFFFF,  #000000);background:linear-gradient(top,  #00FFFF,  #000000);background:-o-linear-gradient(top,  #00FFFF,  #000000);background: -webkit-gradient(linear, left top, left bottom, from(transparant), to(#000000));'>
News Update :
</div>
<div style='float:left;width:740px;padding:4px 0; position:relative; overflow:hidden;'>
<script type='text/javascript'>
var cssfeed=new gfeedrssticker("example1", "example1class", 4000, "_new")
cssfeed.addFeed("AbduGreen", "http://kdablog-tutor.blogspot.com/feeds/posts/default") //Specify "label" plus URL to RSS feed
cssfeed.displayoptions("date") //show the specified additional fields
cssfeed.setentrycontainer("div") //Wrap each entry with a DIV tag
cssfeed.filterfeed(10, "date") //Show 10 entries, sort by date
cssfeed.entries_per_page(1)
cssfeed.init()
</script>
</div>
</div></div>

7. SIMPAN, dan lihat hasilnya.
Keterangan :

• Ganti Url  http://kdablog-tutor.blogspot.com  dengan URL blog sobat sendiri.
• Untuk mengatur berapa banyak jumlah entri/postingan yang ditampilkan pada slidshow News Update-nya, silahkan ganti tulisan  10 entries  dengan jumlah yang sesuai keinginanmu.

Cara pasangnya hanya tinggal copy paste ke gajet dengan cara masuk ke Tata Letak >> add gadjet >> dan pilih Javascript/HTML seperti memasang widget pada umumnya.

Sekian Tutorial kali ini semoga bermanfaat untuk sobat semuanya.