Cara Membuat Breaking News Dibawah Menu Navigasi ~ SMPN 96 Blog

Sambil menunggu buka puasa,Daripada Lapar/Haus mikirin Buka,Saya akan membahas cara membuat Breaking News Di Bawah Menu Navigasi.Breaking News ini bermanfaat untuk Pengunjung mengetahui apa saja artikel yang telah diposting selama beberapa hari dan disertai dengan tanggal Dipostingnya, Sama seperti halnya dengan Label/Tag,Tetapi label tidak memiliki dengan tanggal dipostingnya,Hanya bisa dipilih saja.Breaking News ini Tidak memperberat Blog sobat,Karena Breaking News Ini Sangat Minim.Tanpa basa-basi,simak Cara nya berikut ini :

Login ID/Blogger sobat.
Dashboard -> Template -> Edit HTML
Untuk jaga-jaga,Sebaiknya Back Up dulu template sobat.
Cari code ]]></b:skin> (CTRL+F) Untuk mempermudah
Masukkan code di bawah ini ,Tepat di atas code ]]></b:skin>

.newspic {background:#827D82(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMCG_GHF1xq3LHjjmSkJhpsA5S4ZHakgEKREEtOzESqBugU51YMRev-po6UKx-oJ_h__-a4j4svp1aAjRm8tXvjGkWtLgZZmRJEajf_3KdiXFjpUGqctxTvcJ6vDMSM_zinqbsDF_oMIA/s1600/news.png) no-repeat top left;width:100%;margin:0 auto;padding:0 auto;height:32px;color:#000000;}.news{width: 100%;margin:0 auto;padding:0 auto;line-height: 1.4em;text-align:left;font-family:Arial;font-size:10px;color:#000000;overflow:hidden;clear:both;}.news a:link, .news a:visited{color:#000000;text-decoration:none;}.news a:hover {color:#ddd;text-decoration:underline;}

Kemudian Cari Code </head>
Lalu Copy-Pastekan code dibawah ini tepat diatas Code </head>

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

Jika sudah Selesai,Cari code <div id='content-wrapper'> dan letakkan code dibawah ini tepat diatas code <div id='content-wrapper'>

<div class='newspic'><div style='float:left;width:780px;padding:6px 0 6px 180px; position:relative; overflow:hidden;'><script type='text/javascript'>var cssfeed=new gfeedrssticker("example1", "example1class", 4000, "_new")cssfeed.addFeed("Creating Website", "http://t-fvn.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 tag
cssfeed.filterfeed(15, "date&a;)
cssfeed.entries_per_page(1)
cssfeed.init()
</script>
</div>
<div style='clear:both;'/>
</div>cssfeed.filterfeed(15, "date&a;)cssfeed.entries_per_page(1)cssfeed.init()</script></div><div style='clear:both;'/></div>

Hal Yang Harus Diperhatikan :

Code warna Merah Ganti Dengan Alamat Blog Sobat,
Code Warna Kuning Adalah Jumlah Entri/post sobat yang ingin ditampilkan di Breaking News,
Code Warna Pink #827D82 adalah code warna sobat,Ganti dengan selera masing-masing

Terakhir Klik SIMPAN.Dan lihat hasilnya.Tenang aja sobat, Breaking News ini tidak terlalu memperlambat blog sobat,Karena ini sudah Minim.Jika ingin mempercepat blog sobat , Gunakan Script Lazy Load.Terima Kasih..