SHARE AJA : CARA MEMBUAT WIDGET BREAKING NEWS

Blog SHARE AJA kali ini akan sedikit berbagi tentang cara membuat widget breaking news yang biasanya terletak di bagian bawah menu drop-down, widget breaking news ini biasanya berisi informasi tentang hal-hal atau artikel-artikel terbaru yang ada di dalam blog kita. Widget breaking news ini juga dapat berfungsi untuk menambah profesionalitas blog yang kita miliki.

Baiklah, tanpa panjang lebar, cara membuat widget tersebut adalah sebagai berikut  :

Masuk/log in blog anda, pilih menu rancangan, edit template HTML kemudian centang expand template widget, dan selanjutnya carilah ]]></b:skin>, selanjutnya copy script di bawah ini dan letakkan di atasnya.

.newspic{background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrumZ3Mbd7f9X_rtCElc89jUZxa77NBZFIP9MMQ9cUu8nZSDE_aHCtqtpkhq0rsZ3Sq1WrUgcK_mEKTIM3JRidflE5KCOOqNJdrfN7iIAPqrnwT4Phqbfs8Iz3qvL43isbdSmyB5_cEgE/s1600/bg_news.png) no-repeat top center;width:1000px;margin:0 auto;padding:0 auto;height:26px}.news{width:970px;margin:0 auto;padding:0 auto;line-height:1.4em;text-align:left;font-family:Arial;font-size:11px;color:#ddd;overflow:hidden;clear:both}.news a:link,.news a:visited{color:#ddd;text-decoration:none}.news a:hover{color:#fff;text-decoration:underline}

Berikutnya carilah kode </head> dan letakkan script di bawah ini tepat di atasnya.

<script src='http://www.google.com/jsapi?key=ABQIAAAA4qkT5i26SQ6NmgJd5KQemhRQ_a6zv5_Bim3H_GL4gaueIFZ15xRdt8jcAUk8ZHokIVo-TBZgYVbkzw'/>

<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{ /*CSS for RSS title link in general*/

text-decoration: none;}

.labelfield{ /*CSS for label field in general*/

color:#666;font-size: 100%;}

.datefield{ /*CSS for date field in general*/

color:#eee;font:normal 13px Arial;}

#example1{ /*Demo 1 main container*/

width: 800px;

height: 14px;

border: 0px solid #aaa;

padding: 0px;

font:bold 13px Arial;

text-transform:none;

text-align:left;

background-color:transparent;}

code{ /*CSS for insructions*/

color: #000;}

#example1 a:link, #example1 a:visited {color:#FFC932;text-decoration:none;}

#example1 a:hover {color:#fff;text-decoration:none;}

</style>

Kemudian carilah rangkaian script HTML untuk menu drop-down yang telah terpasang pada blog anda, selanjutnya letakkan script di bawah ini tepat di bawahnya.

<div class='newspic'>

<div class='news'>

<div style='float:left;padding:5px 60px 5px 0;font:bold 14px Arial;color:#333;text-transform:none;'>

News Update :

</div>

<div style='float:left;width:800px;padding:4px 0; position:relative; overflow:hidden;'>

<script type='text/javascript'>

var cssfeed=new gfeedrssticker(&quot;example1&quot;, &quot;example1class&quot;, 4000, &quot;_new&quot;)

cssfeed.addFeed(&quot;Bamsuko&quot;, &quot;http://saunmu.blogspot.com/feeds/posts/default&quot;) //Specify &quot;label&quot; plus URL to RSS feed

cssfeed.displayoptions(&quot;date&quot;) //show the specified additional fields

cssfeed.setentrycontainer(&quot;div&quot;) //Wrap each entry with a DIV tag

cssfeed.filterfeed(10, &quot;date&quot;) //Show 10 entries, sort by date

cssfeed.entries_per_page(1)

cssfeed.init()

</script>

</div>

</div><div style='clear:both;'/>

</div>

</div>

Selanjutnya simpan template anda dan lihatlah hasilnya. Semoga bermanfaat dan sukses selalu.