Membuat Breaking News Menarik Dibawah Navigasi MenuPada artikel kali ini saya akan menjelaskan bagaimana membuat breaking news atau berita berjalan yang biasanya terdapat di bawah navigasi menu pada sebuah blog atau biasa disebut newsticker. Banyak sudah artikel yang membahas mengenai newsticker ini di internet, misalnya dengan menambahefek marqueesehingga teks tersebut dapat berjalan, tapi kali ini saya akan menjelaskan cara memasang breking news dengan sentuhan jQuery sehingga hasilnya akan lebih menarik dan yang pasti dapat mempercatik blog anda.

Pertama kali saya melihat tampilan breaking news ini pada templateSporty Magazine 2buatan Borneo Template, waktu itu template masih berbayar sekarang sepertinya sudah gratis di download. Disini saya akan memodifikasi sedikit tampilannya sehingga tampilannya seperti tampak pada gambar diatas, demonya anda bisa lihatdisini. (http://martin-big.blogspot.com)

Ternyata cara memasangnya sangat gampang sekali, dan jika Anda tertarik berikut ini langkah-langkah untuk membuatnya :1. Login ke blogger dengan akun anda2. Kemudian klikTata Letak> pilihEdit HTML3. Jangan lupa backup dulu template anda dengan mengklikDownload Template Lengkap.4. Letakkan kode berikut di atas kode]]>view plainprint?1. /*NewsTickerWrapper2. ---------------------------------------------*/3. .newspic{background:#000url(http://4.bp.blogspot.com/-vqHATrTDsY8/TvguMe2lBTI/AAAAAAAAEUk/L8UwRygGp9s/s1600/news.gif)no-repeattopleft;width:970px;margin:0auto;padding:0auto;height:32px;color:#fff;}4. .news{width:970px;margin:0auto;padding:0auto;line-height:1.4em;text-align:left;font-family:Arial;font-size:11px;color:#fff;overflow:hidden;clear:both;}5. .newsa:link,.newsa:visited{color:#fff;text-decoration:none;}6. .newsa:hover{color:#ddd;text-decoration:underline;}5. Masih dalam dalam posisi Edit HTML. Sekarang letakkan kode berikut ini di atas kode

//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""+b+""};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(gf)?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=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=="")?"

\n":"";for(var e=0;ethis.feeds.length-1)?0:this.messagepointer+this.itemsperpage;setTimeout(function(){b._rotatemessage()},this.delay)}};//]]>

.titlefield{ /*CSS for RSS title link in general*/text-decoration: none;}.labelfield{ /*CSS for label field in general*/color:#aaa;font-size: 100%;}.datefield{ /*CSS for date field in general*/color:#aaa;font:normal 14px Arial;text-transform:none;}#example1{ /*Demo 1 main container*/width: 780px;height: 14px;border: 0px solid #aaa;padding: 0px;font:bold 16px Arial;text-transform:none;text-align:left;background-color:transparent;}code{ /*CSS for insructions*/color: #fff;}#example1 a:link, #example1 a:visited {color:#f2f2f2;text-decoration:none;}#example1 a:hover {color:#C8D3F2;text-decoration:none;}

6. Kemudian cari kodedibawah ini, atau kode yang biasa dipakai untuk meletakkan navigasi menu7. 8. ...........................................9. ...........................................

10. Jika sudah ketemu letakkan kode berikut tepat dibawah kodeyang dipakai untuk menutup kode navigasi menu pada template Anda.

var cssfeed=new gfeedrssticker("example1", "example1class", 4000, "_new")cssfeed.addFeed("Creating Website", "http://maskolis.blogspot.com/feeds/posts/default") //Specify "label" plus URL to RSS feedcssfeed.displayoptions("date") //show the specified additional fieldscssfeed.setentrycontainer("div") //Wrap each entry with a DIV tagcssfeed.filterfeed(10, "date") //Show 10 entries, sort by datecssfeed.entries_per_page(1)cssfeed.init()

11. Ganti URL yang saya beri warnamerahdengan URL blog anda dan jika blog anda masih baru newsticker ini biasanya tidak mau jalan karena google belum mengenal feed di blog Anda. Solusinya gampang Anda mesti buat API key sendiri di googlecode, atau langsung sajadisini. Masukkan URL blog anda, kemudian ganti kode javascript paling atas pada langkah nomer 5 dengan kode yang barusan dapet dari googlecode (bener nggak sih ngomongku...... )12. Langkah terakhirsave/simpan, lihat dibawah navigasi menu anda, kalau cara memasangnya sudah benar pasti akan muncul breaking news itu.Agar lebih ramping simpan kode javascript newsticker diatas (no.5) di tempat penyimpanangooglecodeAnda. Mudah kan? Jika ada yang mau ditanyakan silahkan isi pada kolom komentar dibawah. Selamat mencoba dan semoga bermanfaat.