Blogger :: Pasang Newsticker / Berita Berjalan pada Blog

hai hai haiii, hehe :), Kali ini saya akan posting tentang bagaimana cara pasang Newsticker atau berita berjalan pada blog. Anda sudah ada yang tau gak ??? kalo ada yang belum tau, Mari anda simak tutorialnya, okey. Langsung saja kita ke tutorialnya, cekidot :

1. Pertama anda harus login pada akun blog anda.
2. Masuk ke " Dashboard -> Template -> Edit Html " Lali beri tanda centang pada " expand template widget ".
3. Lalu cari code " ]]></b:skin> ". cara nya dengan tekan tombol ctrl+F untuk mencari.
4. Lalu Copy paste code yang ada di bawah ini tepat diatas code " ]]></b:skin> ".(saya menyarankan sebelumnya backup dulu template anda).

    /* News Ticker Wrapper */ .newspic {background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8OBtJa_Pxavsgo2PU5r8Bwt3nXEhFrLX4Hq3bzy631DkiKIKNTNdoq8hMu4MYIFRrfQPFSVuYL0urbsCtDoRvaqmMIJpd-7NB2CN9w-JbRoLG3CIV2EV2O1BV6cCsSHPYVppg6d8wbKQ/s1600/headline.png) no-repeat top left;width:940px;margin:0 auto;padding:0 auto;height:28px;color:#ff0000;} .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;} .news a:link{color:#ff0000;font-weight: bold;text-decoration:none} .news a:visited{color:#ddd;font-weight: bold;text-decoration:none} .news a:hover{color:#fff;font-weight: bold;text-decoration:underline}
 
NB : warna hijau bisa anda ganti dengan ukuran yang anda inginkan.

5. Kemudian cari code " </head> ".
6. Copy paste code yang ada di bawah ini tepat di atas code " </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+'" /> INFONETGUE';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>

7. Kemudian penempatan code untuk " newsticker ", anda bisa tempatkan sesuai dengan keinginan dan kemauan anda. Disini saya akan mencontohkan, saya akan meletakkannya dibawah menu navigasi horizontal.
8. Lalu cari code " <div id='navigation'> " dan tutup code " <div id='navigation'> " dengan code </div>.
10. Copy paste code yang ada dibawah ini tepat setelah code " </div> " tadi.

<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 :

</div><div style='float:left;width:680px;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;FakhrianAmrullah&quot;, &quot;http://4rbung.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>

NB : Warna hijau bisa anda ganti dengan URL blog anda.

11. Jika anda tidak menemukan code " <div id='navigation'> ", Maka anda cari code " <div id='content-wrapper'> ". tekan ctrl+f untuk mencarinya.
12. Copy paste code " newstickernya " tepat diatas code " <div id='content-wrapper'> ".

Sekian dari tutorial diatas, semoga artikel bermanfaat untuk anda semua. Dan jangan lupa untuk meninggalkan jejak di komentar  atau di chat box..

CB Blogger