Tips Memasang Breaking News Dibawah Header Blog

Seputar Blogger, Sobat-sobat blogger yang saya cintai, jumpa lagi dengan saya dengan update tips-tips blogging terbaru, update terbaru ini sebenarnya udah lama tapi karena keterbatasan waktu untuk update artikel maka saya baru menulisnya, adapun tips terbaru dari saya adalah memasang Breaking News pada blog.

Kali ini saya akan berbagi mengenai tips memasang BreakingNews dibawah header blog, fungsi dari  widged ini adalah untuk memudahkan pengunjung menemukan update-update terbaru dari postingan kita, caranya sangat mudah yakni hanya dengan mencopi script ke dalam HTML blog.

Kita langsung saja pada tipsnya :

1. Buka design blog
2. Pilih Template dan klik Edit HTML
3. Cari kode ]]></b:skin> (gunakan Control F untuk memudahkan pencarian) 
4. Setelah ditemukan, letakkan code script dibawah ini tepat diatas cora ]]></b:skin> tersebut
   

   .newspic {background:#252525 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiidspvpeRxSaIChX_e4Ofv-9IHJYTbZcxShl_LGHjlGn7RcFM6jzUVz2wkX6xIA774HxLqwCkt12TEtRFvt9n80_7AtHRoCls2sztA2CZHzgd8HBieA2lPd_smmusinr6htKfmV_B4E6E/s1600/BRK+NW.png) no-repeat top left;width:979px;margin:0 auto;padding:0 auto; height:24px;color:#fff;}
   .news {width: 979px;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;}

   Keterangan:
   Untuk code warna biru sesuaikan dengan ukuran blog anda
   
5. Setelah itu cari code </head> (gunakan Control F untuk memudahkan pencarian) 
6. Letakkan code Script dibawah ini tepat diatas code </head> tersebut
   

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

7. Selanjutnya cari code <div id='header-wrapper'> dan letakkan code script dibawah ini tepat diatas code tersebut
   

   <div class='newspic'>
   <div style='float:left;width:979px;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://bloggerpohuwato.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 style='clear:both;'/>
   </div>

   Keterangan : 
   Untuk http://bloggerpohuwato.blogspot.com ganti dengan alamat blog anda.
8. Simpan dan lihat hasilnya