Cara Membuat BreakingNews Dan Top Menu

Selamat malam sobat, bermula dari salah satu pengunjung blog di sini yang bertanya ke pada saya tentang Cara Membuat BreakingNews Dan Top Menu seperti yang ada pada blog ini, Dan malam ini saya akan mencoba berbagi sedikit tentang Cara Membuat BreakingNews Dan Top Menu, mungkin untuk sobat yang belum tau dan penasaran bisa langsung melihat pada gambar yang tertera di samping, untuk mempersingkat waktu mending langsung aja nih sob saya gelar tentang Cara Membuat BreakingNews Dan Top Menu

1. Login di blogger.com
2. Klik Template
3. kemudian edit html
4. Sampai disini kemudian pastekan kode di bawah ini tepat di bawah Code /]]></b:skin>

/* NAVIGATION TOP */
#topnav li a{border-right:1px solid #000;border-left:1px solid #333;box-shadow:1px 0 0 #333;background:#111;color:#fff;display:block;font:normal 18px/35px Electrolize;transition:.5s;padding:5px 20px}
#topwrapper{width:980px;overflow:hidden;height:35px;}#topnav{font-weight:bold;margin:0;float:right;width:480px;overflow:hidden;height:35px;line-height:35px;list-style-type:none;padding:0 0 0 0;}#topnav li{display:block;float:right;margin:0 0 0 0;}#topnav li a{padding:0 20px;font-size:11px;display:block;text-decoration:none;}#topnav li a:hover{color:#000;box-shadow:inset 0px -3px 0px rgba(0,0,0,0.3);background:#63C4F1;}#topnav li:nth-child(1) a:hover{box-shadow:inset 0px -2px 0px #E50700;}#topnav li:nth-child(2) a:hover{box-shadow:inset 0px -2px 0px #0084C5;}#topnav li:nth-child(3) a:hover{box-shadow:inset 0px -2px 0px #6CAC00;}#topnav li:nth-child(4) a:hover{box-shadow:inset 0px -2px 0px #00C3B7;}#topnav li:nth-child(5) a:hover{box-shadow:inset 0px -2px 0px #FF8168;}#topnav li:nth-child(6) a:hover{box-shadow:inset 0px -2px 0px #FFBA0F;}#search-top{float:left;margin:4px 0px 4px 20px;display:none;}#search-top input[type="text"]{box-shadow:inset 2px 2px 0px #f0f0f0;border-radius:3px 0 0 3px;height:25px;width:100px;line-height:24px;background-color:#f8f8f8;border:1px solid #d3d3d3;outline:none;font-size:13px;padding:0 10px;float:left;}#search-top input#search-button-top{box-shadow: inset 1px 1px 0 #f9f9f9;border-radius:0 3px 3px 0;height:27px;width:30px;color:#555;background-color:#f0f0f0;border:1px solid #d3d3d3;border-left:none;float:left;cursor:pointer;}#search-top input#search-button-top:hover{background-color:#e8e8e8;}


/* HEADLINE */
span.breakingnews{background:#2EA9DA;}
.newspic{float:left;font-weight:bold;font-size:11px;width:450px;overflow:hidden;margin:0;padding:0 0 0 20px;height:34px;line-height:34px;}span.breakingnews{text-transform:uppercase;color:#fff;float:left;line-height:25px;margin:5px 8px 5px 0;padding:0 8px;}.news a:link,.news a:visited{color:#000;text-decoration:none;}.news a:hover{color:#0099cc;text-decoration:underline;}.labelfield{color:#0099cc;font-size:100%;}.datefield{color:#aaa;font-weight:normal;}#example1{float:left;max-width:380px;overflow:hidden;padding:0;text-align:left;background-color:transparent;}#example1 img{display:none;}code{color:#0099CC;}#example1 a:link,#example1 a:visited{color:#0099cc;text-decoration:none;}#example1 a:hover{color:#555;text-decoration:none;}.tinynav2{display:none;width:590px;margin:0 auto;border-radius:0px;padding:5px 8px;background-color:#393939;color:#eee;font-weight:bold;cursor:pointer;outline:none;}.tinynav1{border-radius:3px;background:#f8f8f8;display:none;width:150px;margin:4px 20px 4px 0px;padding:3px 5px;float:right;border:1px solid #d3d3d3;outline:none;}

5. Lalu Copy script di bawah ini dan paste tepat di atas </head>

<!-- Headline -->
<script src='http://www.google.com/jsapi?key=ABQIAAAAUMsU2d40bO1-m8DeADFRexTdcQS31_Y0TkToW9tE1XWPEnv6YBSa1QfZaAr4GJ8-AZkWddpnW9Y0hA'/>
<script type='text/javascript'>
//<![CDATA[
var gfeedfetcher_loading_image="http://3.bp.blogspot.com/-YDemUmb6mk8/Ub9mpleHHOI/AAAAAAAACCc/u_rMQ9wdYlU/s1600/9.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 alt="loading" title="loading" 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="http://3.bp.blogspot.com/-YDemUmb6mk8/Ub9mpleHHOI/AAAAAAAACCc/u_rMQ9wdYlU/s1600/9.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>

6. Ambil Kode di bawah ini lalu pastekan tepat di bawah topwrapper / header-wrapper / wrapper / <div id='outer-wrapper'> / <div id='content-wrapper'>

<div class='newspic'>
<span class='breakingnews'>Latest News</span> 
    <script type='text/javascript'>
var cssfeed=new gfeedrssticker(&quot;example1&quot;, &quot;example1class&quot;, 5000, &quot;_new&quot;)
cssfeed.addFeed(&quot;Feed Blog&quot;, &quot;http://caritau12.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;span&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>
<!-- top navigation -->  
  <ul id='topnav'>
      <li class='current'><a href='caritau12.blogspot.com/p/contact-us.html/'><i class='fa fa-envelope'/>Contact</a></li> 
      <li><a href='http://caritau12.blogspot.com/p/privacy-policy-for-www.html'><i class='fa fa-info-circle'/>Privacy Policy</a></li>
      <li><a href='http://caritau12.blogspot.com/p/m.html'><i class='fa fa-weibo'/>Disclaimer</a></li>
      <li><a href='http://caritau12.blogspot.com/p/blog-page.html' target='_blank' title='Follow'><i class='fa fa-sitemap'/>Sitemap</a></li>
  </ul>

Sekarang tinggal di lihat blog sobat, dan perhatikan pada bagian atasnya, oke deh semoga berguna ya sob postingan saya kali ini yang membahas Cara Membuat BreakingNews Dan Top Menu , trimakasih.