Cara Membuat NewsTicker / Berita Berjalan Pada Blog

Cara Membuat NewsTicker / Berita Berjalan Pada Blog - Cara Membuat Headline News Keren. Newsticker atau berita berjalan adalah salah satu cara untuk memodifikasi blog kita agar tampak keren, Selain itu Newsticker atau berita berjalan bisa menampilkan recent post blog kita, sehingga pembacapun bisa melihat apa saja berita terbaru dari blog kita. untuk contoh newsticker bisa diliat di gambar di bawah atau di atas postingan blog tercinta ini..

newsticker


Nah, sudah jelas kan gimana bentuknya....

Untuk  Cara Membuat NewsTicker / Berita Berjalan Pada Blog  seperti mirip blog Technology Information Center Ini ikuti langkah-langkah dibawah ini :

  1. Login ke blogger/blogspot kamu.
  2. Klik Rancangan atau design.
  3. Klik edit HTML.
  4. Beri crosscheck / centang pada kotak yang berada pada pojok template kamu. Dan jangan lupa download template kamu untuk berjaga-jaga agar jika terjadi kesalahan bisa dibackup. Cari kode ]]></b:skin> dan copy paste kode berikut dan letakkan tepat diatas kode ]]></b:skin>
  5. /* News Ticker Wrapper */ .newspic {background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQz2CBpbD1RGFecFDaFLxWVGMLzZUz_4WvFjb6nEvB61jR4jrbCQ__95Pj8mDz3SB0JPdeAr86JgC3LDXbA2eGi1JV1V80hSx7cHor-RiPEH-bto-1scYkPIJDYKhXg-zleW4zSDPmkbw/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}
  6. Lalu 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+'" /> 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>


Dan langkah terakhir penempatan kode HTML untuk newstickernya, kamu bisa meletakkan ditempat yang kamu inginkan. dan disini sebagai contoh saya akan menempatkannya dibawah menu navigasi horisontal. silahkan cari kode <div id='navigation'> dan setelah kode <div id='navigation'> 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 :
</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://iptek-4u.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>

Ganti URL berwarna Hijau dengan URL blog kamu.
Nah, Sekarang simpan template kamu.
Keterangan:

Kode menu navigasi berbeda-beda, jika tidak menemukan kode pada nomor 7 coba kamu cari kode
<div id='content-wrapper'>
dan letakkan kode HTML newsticker (yang ada pada nomor 7 ) letakkan tepat diatas kode
<div id='content-wrapper'>

Demikian  Cara Membuat NewsTicker / Berita Berjalan Pada Blog , jika kamu berhasil maka akan ada berita terbaru dari recent post blog kamu yang bergerak atau berubah-ubah layaknya yang ada pada template blog TECHNOLOGY INFORMATION CENTER ini.
Like This Article :

Baca Juga Artikel Menarik Lainnya di Bawah INI :

Rating: 4.5 | Reviewer: Unknown | ItemReviewed: Cara Membuat NewsTicker / Berita Berjalan Pada Blog

Comment With Facebook!

+ komentar + 7 komentar

27 Maret 2012 pukul 07.00

keren nih headlinews nya sobat....

7 Mei 2012 pukul 11.22

makasih sob hadlene news
mantab

Terimakasih Santri Tuleen atas Komentarnya di Cara Membuat NewsTicker / Berita Berjalan Pada Blog
9 Juni 2012 pukul 18.26

Terima kasih atas informasinya Gan, sangat membantu. salam sukses.

Terimakasih . atas Komentarnya di Cara Membuat NewsTicker / Berita Berjalan Pada Blog
8 Juli 2012 pukul 11.56

mantaB Gan. sukses dicoba. mampir ke blog ane http://teknologiterbaru.blogspot.com/

Terimakasih siap86 atas Komentarnya di Cara Membuat NewsTicker / Berita Berjalan Pada Blog
Anonim
17 Oktober 2012 pukul 10.06

ijin dicoba di blog saya gan

Terimakasih Anonim atas Komentarnya di Cara Membuat NewsTicker / Berita Berjalan Pada Blog
28 Oktober 2012 pukul 00.25

ijin coba...mantap

27 November 2012 pukul 10.57

mantab nihh,,,
ijin sedot gan

Posting Komentar

ExitJangan Lupa Klik Like Dan Follow ya!