Cara Membuat Breaking News Berjalan di Blog

Cara Membuat Menu Breaking News Berjalan di Blog ~ Halo sobat blogger kembali lagi ya dengan saya Aldi Andreansyah selaku Admin / Penulis di Blog ini yang seperti biasa yang di waktu luang nya Alhamdulilah saya selalu di berikan karunia untuk selalu membagi kan Artikel Pengalaman yang saya miliki yaitu pada kali ini bertentangan dengan Blogger yang berjudul Cara Membuat Menu Breaking News Berjalan di Blog , menu ini menurut saya sangat cocok di pasang untuk para pencinta Penambah Widget karena menu breaking news berjalan ini bertujuan untuk menambahkan Menu sekumpulan Semua Artikel yang pada posisi nya berjalan .

Kelebihan memasang Menu Breaking News Berjalan di Blog ini adalah :

1 . Dapat membuat sekumpulan artikel lengkap yang berjalan di menu header atau navigasi header dalam blog kita sendiri
2 . Terdapat URL gambar yang bisa diisi sesuai kemauan atau kreasi yang sobat inginkan
3 . Terdapat Warna Background dan warna teks yang bisa sobat sesuai kan dengan kemauan sobat sendiri
4 . Terdapat Ukuran Panjang dan Lebar dan sobat bisa mengukur nya sesuai dengan tampilan yang cocok pada template sobat sendiri
5 . Terdapat Font , font tersebut dapat sobat sesuai kan dengan keinginan yang ingin sobat mau

 Menurut saya kekurangan Membuat Menu Breaking News Berjalan di Blog ini yaitu Membuat loading berjalan lambat karena dengan ada nya fitur tersebut maka otomatis akan menambah ukuran loading yang membuat loading sedikit melambat .

Mungkin cukup sekian Kelebihan dan Kekurangan yang saya ketahui jika sobat Memasang Menu Breaking News Berjalan di Blog tersebut karena Alhamdulilah saya tahu karena dimana disitu selalu ada kelebihan pasti disitu selalu ada kekurangan nya karena di dunia ini tidak ada yang sempurna selain Sang Maha Segala-Nya (hehe).

Oke langsung saja simak Langkah-Langkah Cara Membuat Menu Breaking News Berjalan di Blog di bawah :

Pastikan sobat sudah Log~in akun Blogger terlebih dahulu lalu ke Template -> Edit HTML lalu isi Script HTML di bawah ini tepat di atas ]]></b:skin> :

.newspic {background:#016fba url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgP0HNhiHPSdPEZu5QbS5dS8faWZvm2oBJDvzIM9mECvX-UCWoirDcURoogwboX25ke4bn6GR5kJh_3Bkn3aTKlgURXor1J_Xz4ck_Sb8zGQ12TkAMu6fQzCAPOv0FNhfwi4EyPryEdNE/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 :
● #016fba : Warna Latar Belakang  
● https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgP0HNhiHPSdPEZu5QbS5dS8faWZvm2oBJDvzIM9mECvX-UCWoirDcURoogwboX25ke4bn6GR5kJh_3Bkn3aTKlgURXor1J_Xz4ck_Sb8zGQ12TkAMu6fQzCAPOv0FNhfwi4EyPryEdNE/s1600/BRK+NW.png : Gambar  
● 979 : Lebar dan Panjang
● Arial : Font  
 lalu isi Script JQuery di bawah ini tepat di di atas </head> atau </body> :

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

terakhir isi Script di bawah ini di atas  <div id='header-wrapper'>  :

<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://aldiandreansyah.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 : Ubah font berwarna biru dengan URL sobat

Mungkin cukup sekian dari Artikel Cara Membuat Menu Breaking News Berjalan di Blog , Semoga Bermanfaat salam sukses selalu dan Semoga Bekerja dengan 100% tanpa ada halangan suatu apapun , Amin .

Share this post