Bagaimanakah Cara Membuat NewsTicker atau Berita Berjalan yang Modern

Kadang untuk mempercantik tampilan blog, bagi seorang newbie pastilah akan mengalami kendala maupun kesulitan terutama langkah apa yang harus dilakukan dan bagaimana caranya agar blog terlihat cantik dan keren,

kali ini siphe akan memberi tutorial bagaimana cara membuat newsticker atau biasa disebut dengan Berita Berjalan, anda bisa lihat contoh tampilan ada digambar samping atas ini,

dengan memasang newsticker,  recent post blog anda akan tertampil secara bergantian, dan akhirnya pengunjung blog anda bisa melihat apa saja berita terbaru yang ada diblog anda. langsung saja tidak usah panjang lebar keburu hujan karena awan terlihat mendung, silahkan anda ikuti tutorial dibawah ini:

• Silahkan Login ke akun blogger/blogspot anda terlebih dahulu.
• Pilih menu Rancangan atau design, klik edit HTML 
• Beri ceck list /centang pada kotak yang berada pada pojok template anda.   
• Jangan lupa download full template anda untuk antisipasi dini, agar jika terjadi kesalahan bisa dibackup.  
• Coba anda cari  kode ]]></b:skin> dan copy paste kode berikut dan letakkan tepat diatas kode ]]></b:skin>  
• Untuk mempercepat pencarian silahkan tekan ctrl+F dan pastekan kode diatas.

/* News Ticker Wrapper */<br /> .newspic {background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYTolsw-nrqFzqDzmHXyTqtzHt0YilsnjEeU6RJSeIL4-HRwRcw8NM9dfQsRQrzVcaRLZCukY7toc46lz_DS01aZS2HYl936kEoJSprB-y-qdYn4wtBY29uP4CeywR03XGJM2sN1QRtME/s1600/headline.png) no-repeat top left;width:940px;margin:0 auto;padding:0 auto;height:28px;color:#ff0000;}<br /> .news {width: 940px;margin:0 auto;padding:0 auto;line-height: 1.4em;text-align:left;font-family:Arial;font-size:11px;color:#fff;overflow:hidden;clear:both;}<br /> .news a:link{color:#ff0000;font-weight: bold;text-decoration:none}<br /> .news a:visited{color:#ddd;font-weight: bold;text-decoration:none}<br /> .news a:hover{color:#fff;font-weight: bold;text-decoration:underline}

• Setelah itu cari  kode </head> dan letakkan kode berikut tepat diatas kode </head>

<script src='http://www.google.com/jsapi?key=ABQIAAAA4qkT5i26SQ6NmgJd5KQemhRQ_a6zv5_Bim3H_GL4gaueIFZ15xRdt8jcAUk8ZHokIVo-TBZgYVbkzw' type='text/javascript'/> <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+'" /> Josha Kiplek';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>

• Untuk langkah terakhir letakkan kode HTML  newsticker, bisa letakkan ditempat yang anda inginkan, disini sebagai contoh siphe meletakkanya diatas kode <div id='content-wrapper'> silahkan cari kode <div id='content-wrapper'>  dan  letakkan tepat diatas kode <div id='content-wrapper'> 

• Apabila kode diatas tidak anda temui dalam template anda, coba anda cari kode yang mirip seperti kode <div id='navigation'> dan setelah kode <div id='navigation'> yang ditutup dengan kode </div> letakkan kode berikut tepat dibawah kode </div>

<div class='newspic'><div class='news'><div style='float:left;padding:5px 60px 5px 7px;font:bold 14px Arial;color:#333;text-transform:none;'>Berita Terbaru :<br /> </div><div style='float:left;width:680px;padding:4px 0; position:relative; overflow:hidden;'><script type='text/javascript'> var cssfeed=new gfeedrssticker("example1", "example1class", 4000, "_new") cssfeed.addFeed("Sabar Muanas", "http://alamat URL anda disini/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><br /> </div></div><div style='clear:both;'/></div>

• Setelah itu untuk langkah terakhir ganti tulisan Alamat URL anda disini, dengan alamat blog anda
• Jangan lupa  simpan template anda.

Semoga bermanfaat salam ngiihuii.......