Cara Paling Mudah Pasang Breaking News Keren Pada Blog ~ INFORMASI DAN TEKNOLOGI

Cara Paling Mudah Pasang Breaking News Keren Pada Blog Sobat udah tau belum apa itu Breaking News ? jangan salah artikan ya sobat, breaking news yang saya bahas ini bukan berupa daftar berita, tapi berisi postingan blog kita (sama halnya dengan Entry Popular diblog), breaking news ini berkesan lebih profesional dari pada entry popular, (dijamin blog sobat berkesan waaahh gitu,,hehe).

Selain itu Breaking News dapat menghemat tempat dan juga tidak besar beban loading blognya jika dibandingkan dengan widget Entri terbaru. Lihat contoh dibawah ini :

Lebih jelasnya, Breaking news adalah widget yang dipasang dengan tujuan memperindah tampilan blog dan juga untuk meningkatkan pageview blog seperti pada gambar diatas. Widget ini berupa judul artikel yang ditampilkan secara bergantian yang juga di sertai dengan tanggal posting artikel tersebut.

Wahhh...Pasti Sobat gak sabar lagi mencicipinya bukan ???? (eehh,,lu kira makanan apa,,pake cicipi sgla,,,heheh), Oke deh, Klo sobat Mau, Ikuti cara dibawah ini (mudah kok) :

1. Login Ke Blogger.

2. Pilih Template.

3. Klik "Edit HTML".

4. Setelah itu sobat cari kode ]]></b:skin> menggunakan f3 atau CTRL+F, lalu sobat letakkan kode di bawah ini persis di atas kode ]]></b:skin>.

/* News Ticker Wrapper ---------------------------------------------*/ .newspic {background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPjQu9S-EWTHpZO4NXwGCnye_VsYUUN7t8w3uZf_LxTh4Nqrj-ZqLgsR_9YBa_GU3rLFEhL1qG66eic_Dox_yv0Tkn2FbI4BNBgue3T8IM8-n96HQ1sqYDTqlaWkCzE7YtC2hLbTO6A5o/s1600/news.gif) no-repeat top left;width:970px;margin:0 auto;padding:0 auto;height:32px;color:#fff;} .news {width: 970px;margin:0 auto;padding:0 auto;line-height: 1.4em;text-align:left;font-family:Arial;font-size:11px;color:#fff;overflow:hidden;clear:both;} .news a:link, .news a:visited{color:#fff;text-decoration:none;} .news a:hover {color:#ddd;text-decoration:underline;}

5. Masih dalam posisi Edit HTML, selanjutnya sobat cari kode </head>, dan letakkan kode di bawah ini persis di atas kode </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>

6. Selanjutnya sobat cari kode Navigasi, seperti di bawah ini:

<div class='menu horizontal'>......................................................................................</div>

7. Selanjutnya sobat letakkan kode berikut ini di bawah kode navigasi yaitu setelah kode </div> (pada tahap nomor 6) sebagai penutup navigasi :

<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://nyanlon.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 tagcssfeed.filterfeed(20, "date") //Show 10 entries, sort by datecssfeed.entries_per_page(1)cssfeed.init()</script></div><div style='clear:both;'/></div>

Note : Ganti URLnya dengan URL blog sobat dan Angka 20 bisa sobat ganti sesuai keinginan, yang menandakan entry judul posting (tampilan judul akan berulang setelah entry ke 20)

8. Jika di letakkan di bawah kode navigasi akan kira kira akan menjadi seperti ini :

<li><a href='http://www.nyanlon.blogspot.com/2013/04/daftar-isi_7934.html'>DAFTAR ISI</a></li>
<li><a href='#'>KATEGORI</a>
<ul>
<li><a href='http://www.nyanlon.blogspot.com/search/label/Tutorial%20Blog'>Tutorial Blog</a></li>
<li><a href='#'>Multimedia</a>
<ul>
<li><a href='#'>Audio</a></li>
<li><a href='http://nyanlon.blogspot.com/search/label/Video/'>Video</a></li>
</ul>
</li>
<li><a href='http://nyanlon.blogspot.com/search/label/Internet/'>Internet</a></li>
<li><a href='http://nyanlon.blogspot.com/search/label/Antivirus/'>Antivirus</a></li>
<li><a href='http://nyanlon.blogspot.com/search/label/Software/'>Software</a></li>
<li><a href='http://nyanlon.blogspot.com/search/label/Facebook/'>Facebook</a></li>
<li><a href='http://nyanlon.blogspot.com/search/label/Flashdisk/'>Flashdisk</a></li>
<li><a href='http://nyanlon.blogspot.com/search/label/Hp/'>HP</a></li>
<li><a href='#'>Komputer</a>
<ul>
<li><a href='http://nyanlon.blogspot.com/search/label/Trik%20Komputer/'>Trik Komputer</a></li>
<li><a href='http://nyanlon.blogspot.com/search/label/Wacana%20Komputer/'>Wacana Komputer</a></li>
</ul>
</li>
<li><a href='http://nyanlon.blogspot.com/search/label/Windows%208'>Windows 8</a></li>
<li><a href='http://nyanlon.blogspot.com/search/label/Dokumen/'>Dokumen</a></li>
<li><a href='#'>Mc. Office</a>
<ul>
<li><a href='http://nyanlon.blogspot.com/search/label/Word%202007/'>Word 2007</a></li>
<li><a href='#'>Excel 2007</a></li>
<li><a href='#'>Power Point 2007</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>ARTIKEL LAIN</a>
<ul>
<li><a href='http://nyanlon.blogspot.com/search/label/Kesehatan'>Kesehatan</a></li>
<li><a href='http://nyanlon.blogspot.com/search/label/Sejarah'>Sejarah</a></li>
<li><a href='http://nyanlon.blogspot.com/search/label/Tokoh'>Tokoh</a></li>
<li><a href='http://nyanlon.blogspot.com/search/label/Peristiwa'>Peristiwa</a></li>
<li><a href='http://nyanlon.blogspot.com/search/label/Unik'>Unik</a></li>
<li><a href='#'>Lucu</a>
<ul>
<li><a href='http://nyanlon.blogspot.com/search/label/Status%20Lucu'>Status Lucu</a></li>
<li><a href='#'>Cerita Lucu</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>BERITA</a>
<ul>
<li><a href='http://aceh.tribunnews.com/'>Serambi Indonesia</a></li>
<li><a href='http://www.kompas.com/'>Kompas</a></li>
<li><a href='http://www.okezone.com/'>Okezone</a></li>
<li><a href='http://www.republika.co.id/'>Republika</a></li>
<li><a href='http://www.merdeka.com/'>Merdeka</a></li>
<li><a href='http://www.detik.com//'>Detik</a></li>
</ul>
</li>
<li><a href='#'>DOWNLOAD</a>
<ul>

<li><a href='#'>Mp3</a>
<ul>
<li><a href='http://www.stafaband.info/download-lagu-mp3-gratis.html/'>StafaBand</a></li>
<li><a href='http://musik-corner.com'>Musik-Corner</a></li>
<li><a href='http://search.4shared.com/q/CAQD/1/music'>4shared'>4shared</a></li>
<li><a href='http://mp3skull.com/'>Mp3skul</a></li>
</ul>
</li>
<li><a href='#'>Cinema</a>
<ul>
<li><a href='http://www.icinema3satu.com/'>Icinema3satu</a></li>
<li><a href='http://ganool.com/'>Ganool</a></li>
</ul>
</li>
<li><a href='http://www.youtube.com/'>Youtube</a></li>

<li><a href='http://www.filehippo.com/'>Sofware</a></li>
</ul>
</li>
<li><a href='http://www.nyanlon.blogspot.com/2013/05/budayakan-tukar-link.html'><blink><b><span style='color: red;'>TUKAR LINK</span></b></blink></a></li>
</ul>
<div class='menusearch'>
<form action='/search' class='searchform' method='get'>
<input class='searchfield' id='q' name='q' onblur='if(this.value=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=''' type='text' value='Cari disini....'/>
<input class='searchbutton' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKvB6Nm5dKFFdbSpmf8IxbY-D8r4nwwkFjeNhDOW3gSsuSVm-AG1EIxPqWEmZcWyUkx96AtrioTNt2_N5lMwEF5L1tW6h3JkiBCiU1ZwvFtbyIe57A6xO9JgSCjwaM3MbeXoDkfkJx6JA/s1600/tombolcari.gif' style='cursor:pointer;vertical-align:top' type='image' value='Go'/>
</form>
</div>
</div>
<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://nyanlon.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 tagcssfeed.filterfeed(20, "date") //Show 10 entries, sort by datecssfeed.entries_per_page(1)cssfeed.init()</script></div><div style='clear:both;'/></div>