Cara Membuat NewsTicker/Berita Berjalan Keren

TUTORIAL BLOG | TIPS TRIK BLOG - Cara Membuat NewsTicker/Berita Berjalan Keren. newsticker atau berita berjalan bisa kita buat agar blog kita tampil lebih keren, disamping itu berita berjalan atau newsticker bisa ditampilkan dari recent post blog kita,dan akhirnya pembacapun bisa melihat apa saja berita terbaru dari blog kita. lihat gambar dibawah ini!

Dari gambar diatas mungkin sudah banyak yang tahu kalo itu mirip dengan newsticker dari gaya template sporty magazine 2 dari borneo template. karena memang banyak yang suka dengan gaya tersebut maka saya akan share pada teman-teman blogger yang lain bagaimana cara membuatnya.

Untuk Membuat Newsticker/berita berjalan keren seperti mirip sporty magazine 2 ikuti langkah-langkah dibawah ini:

1. Login ke blogger/blogspot kamu.
2. Klik Rancangan atau design.
3. Klik edit HTML.
4. Beri ceck / centang pada kotak yang berada pada pojok template kamu.
   Dan jangan lupa download template kamu untuk berjaga-jaga agar jika terjadi kesalahan bisa dibackup.
5. Cari kode ]]></b:skin> dan copy paste kode berikut dan letakkan tepat diatas kode ]]></b:skin>
   

   /* News Ticker Wrapper */
   .newspic {background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpLhlifdAxpgSS1I_WxmrWMnVOG0-35ByKA9xlPWFukak9totVTokBZI05qWXTaJB27hjn0meCHOFtEra9UFNHT80KSs2r94ARXs1s4xkMVUq-dzQu4AvNqxTNM4X6SMceErNonWHcvTA/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 Lago 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>

7. Dan langkah terakhir Peletakkan kode HTML untuk newstickernya, kamu bisa meletakkan ditempat yang kamu inginkan. dan disini sebagai contoh saya akan meletakkanya 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;Sabar Muanas&quot;, &quot;http://tutorialbelajarblogger.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 merah dengan URL blog kamu.
8. 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 keren, jika kamu berhasil maka akan ada berita terbaru dari recent post blog kamu yang bergerak atau berubah-ubah layaknya yang ada pada template gaya sporty magazine 2.

Tweet

Jangan sampai ketinggalan postingan-postingan terbaik dari OBAT KUAT ALAMI | 51B333E5. Berlangganan melalui email sekarang juga:

Atau sobat juga bisa follow OBAT KUAT ALAMI | 51B333E5 dengan mengklik tombol di bawah ini:

Artikel keren lainnya:

• Cara Membuat Posting Dua Kolom Di Homepage Blog
• Cara Membuat Lightbox Pada Gambar Blog
• Cara Membuat Persentase pada Scrollbar Blog
• Cara Membuat Efek Loading Blog
• Cara Membuat Related Post Dengan Gambar

Ditulis oleh Blogsatu pada tanggal Rabu, 16 Januari 2013