Cara Memasang Breaking News Pada Blogspot

Kali ini saya akan berbagi tips tentang cara memasang breaking news pada blogspot. Breaking news adalah sebuah fitur tambahan pada blog yang menampilkan artikel-artikel terbaru secara bergantian dengan menggunakan javascript. Tampilan breaking news yang menarik (mirip dengan tampilan judul berita pada televisi) membuat saya lebih memilih breaking news daripada teks berjalan.

Fungsi Breaking News

Saat memposting artikel terbaru biasanya kita akan mempromosikan artikel tersebut melalui media sosial, Google webmaster dan mendaftarkan URL di mesin pencari. Kemarin saya berfikir bagaimana cara memberitahu pengunjung tentang aktikel terbaru namun dengan cara yang interaktif yang memberitahu pengunjung sekaligus menarik pengunjung untuk mengkliknya. Dan jawaban dari keinginan saya tersebut adalah apa yang disebuat dengan Breaking News diatas.

Cara Memasang Breaking News pada Blogspot

1. Sebelum melakukan proses berikut ini, pastikan login dulu pada akun bloggernya.

2. Klik menu Template yang ada disebelah kiri lalu klik Edit HTML.

3. Cari kode "</b:skin>" dengan cara menekan  tombol CTRL+F pada editor HTMLnya lalu ketik </b:skin>.

4. Letakkan kode berikut ini di atas kode ]]> yang berada sebelum kode </b:skin>

 .newspic {background:#252525 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXvGrBwpm6FAShlpaWeCSHSgdB2pNZ5XWdFUJKlUTmVpxaMr4yCWwz8SUu9fHm31U0WrdQqh9tvQN0OLdQysugbwXQZ16NK08szMhXMsXbkMnZPU1xnug2KfdOiPNOBS21qsUowQD4M98/s1600/BRK+NW.png) no-repeat top left;width:650px;margin:0 auto;padding:0 auto; height:24px;color:#fff;}  
 .news {width: 650px;margin:0 auto;padding:0 auto;line-height: 1.2em;text-align:left;font-family:Arial;font-size:11px;color:#fff;overflow:hidden;clear:both;}  
 .news a:link, .news a:visited{color:#000000;text-decoration:none;}  
 .news a:hover {color:#ddd;text-decoration:underline;}

5. Ubah nilai width yang saya tandai dengan warna merah, sesuaikan dengan tampilan blog masing-masing.

6. Selanjutnya cari kode "</head>" dengan cara menekan  tombol CTRL+F pada editor HTMLnya lalu ketik </head>.

7. Kemudian letakkan kode berikut di atas kode </head>. (hati-hati agak panjang kodenya)

 <script src='http://www.google.com/jsapi?key=ABQIAAAAUMsU2d40bO1-m8DeADFRexTdcQS31_Y0TkToW9tE1XWPEnv6YBSa1QfZaAr4GJ8-AZkWddpnW9Y0hA'></script>  
 <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+'" /> Loading news...';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>  
 <style type='text/css'>  
 .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;}  
 </style>  

8. Taruh kode berikut ini pada lokasi dipasang breaking news-nya.

 <div class='newspic'>  
 <div style='float:left;width:650;padding:1px 0 6px 130px; 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;Creating Website&quot;, &quot;http://nulis-ilmu.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;) //Menampilkan 10 artikel, sort by date  
 cssfeed.entries_per_page(1)  
 cssfeed.init()  
 </script>  
 </div>  
 <div style='clear:both;'/>  
 </div>

9. Silahkan ganti alamat http://nulis-ilmu.blogspot.com dengan nama blog masing-masing. Untuk mengganti jumlah artikel yang ditampilkan pada breaking news, silahkan ubah parameter pada cssfeed.filterfeed yang pada contoh di beri nilai 10.

10. Misalnya pada template Sang SEO yang saya pakai ini saya taruh jadi satu dengan breadcrumbs, maka saya taruh kode diatas tepat dibawah kode <b:includable id='breadcrumb' var='posts'>.

11. Untuk pemasangan pada lokasi dan template yang lain silahkan bereksperimen sendiri sesuai dengan template blog masing-masing.

Demikian cara memasang breaking news pada blogspot seperti yang ada pada blog saya ini. Silahkan modifikasi tampilan breaking news dengan selera masing-masing.

Cara Memasang Breaking News Pada Blogspot 2013-08-16T23:31:00-07:00 Rating: 4.5 Diposkan Oleh: as