Cara membuat Breaking News Terbaru Lengkap

Farhan Share - sobat hari ini farhan akan mengulas kembali tentang Tutorial blog, sobat farhan pernah melihat breaking news artikel terbaru di blog sahabat seperti gambar di atas, ya memang nampaknya sekarang para blogger memilih untuk beralih ke widget seperti ini karena hemat tempat dan juga tidak besar beban loading blognya jika dibandingkan dengan widget Entri terbaru di sidebar slider ke bawah yang bisa memakan 4-5 elemen. Menurut saya sendiri widget ini tampilanya cocok dan pas untuk di pasang di semua template blog, tinggal menyesuaikan warna dan font, nah setelah mendengar sedikit perbincangan kita di atas tadi, pastinya sobat tertarik bukan untuk memasang widget ini di blog sobat, baik farhan hari ini akan nge-share tentang cara membuat breaking news di blog, ini dia langkah-langkahnya.

1. Login Ke Blogger.

2. Pilih Template.

3. Sobat download full template terlebih dahulu (Tampilan Baru).

4. Klik "Edit HTML".

5. Lalu sobat centang box "Expand template widget".

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

.newspic {background:#FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlM-2HDZOoEqg9EfPgYEpTwg4lzb_bBn2C9TS0_xXKxqUs3snzMp3rEWRI3SAnHSQKT_fbIDCioOanHVWTbhYl5FMVccnuaiYPVCA2C0iPSTAX6YUA3M0u2aVAmPfrx9jQSz0kfDVi8Go/s1600/BRK+NW.png) no-repeat top left;BORDER:1PX SOLID #CDCDCD; width:840px;margin:0 auto;padding:0 auto;height:23px;color:#000;}

.news {width: 840px;margin:0 auto;padding:0 auto;line-height: 1em;text-align:left;font-family:Arial;font-size:10px;color:#000;overflow:hidden;clear:both;}

.news a:link, .news a:visited{color:#000;text-decoration:none;}

.news a:hover {color:#0099cc;text-decoration:underline;}

Catatan : Ganti kode angka yang berwarna hijau dengan lebar template blog sobat.

7. 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 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:#0099cc;font-size: 100%;}

.datefield{ /*CSS for date field in general*/

color:#aaa;font:normal 12px courier;text-transform:none;}

#example1{ /*Demo 1 main container*/

width: 960px;

height: 13px;

border: 0px solid #cdcdcd;

padding: 0px;

font:bold 13px courier;

text-transform:none;

text-align:left;

background-color:transparent;}

code{ /*CSS for insructions*/

color: #0099CC;}

#example1 a:link, #example1 a:visited {color:#0099cc;text-decoration:none;}

#example1 a:hover {color:#111;text-decoration:none;}

</style>

8. Selanjutnya sobat cari kode Navigasi, seperti di bawah ini.

<li class='home'><a href='/'>Home</a></li>
<li><a href='http://farhanshare.blogspot.com/p/pasang-iklan_3011.html'>pasang iklan murah</a></li>
<li><a href='http://farhanshare.blogspot.com/p/streaming-tv.html'>TV Online</a></li>
<li><a href='http://farhanshare.blogspot.com/p/games_20.html'>Play Games</a></li>
<li><a href='http://farhanshare.blogspot.com/p/free-download-mp3.html'>Free Download MP3</a></li>
<li><a href='http://farhanshare.blogspot.com/p/contact-us.html'>contact us</a></li>
<li><a href='http://farhanshare.blogspot.com/p/forum-farhan-shared.html'>Forum</a></li>
<li><a href='http://farhanshare.blogspot.com/p/sms-free.html'>SMS Free</a></li>
<li><a href='http://farhanshare.blogspot.com/p/kode-warna-blog.html'>Blog Tools</a></li>
<li><a href='http://farhanshare.blogspot.com/p/streaming-radio.html'>Streaming Radio</a></li>
<li><a href='http://farhanshare.blogspot.com/p/privacy-policy.html'>Link Exchange</a></li>
</ul>

9. Selanjutnya sobat letakkan kode di bawah ini di bawah kode navigasi.

<div class='newspic'>
<div style='float:left;width:780px;padding:6px 0 6px 125px; 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://eljohn-us.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>

10. Jika di letakkan di bawah kode navigasi akan menjadi seperti ini.

<li class='home'><a href='/'>Home</a></li>
<li><a href='http://farhanshare.blogspot.com/p/pasang-iklan_3011.html'>pasang iklan murah</a></li>
<li><a href='http://farhanshare.blogspot.com/p/streaming-tv.html'>TV Online</a></li>
<li><a href='http://farhanshare.blogspot.com/p/games_20.html'>Play Games</a></li>
<li><a href='http://farhanshare.blogspot.com/p/free-download-mp3.html'>Free Download MP3</a></li>
<li><a href='http://farhanshare.blogspot.com/p/contact-us.html'>contact us</a></li>
<li><a href='http://farhanshare.blogspot.com/p/forum-farhan-shared.html'>Forum</a></li>
<li><a href='http://farhanshare.blogspot.com/p/sms-free.html'>SMS Free</a></li>
<li><a href='http://farhanshare.blogspot.com/p/kode-warna-blog.html'>Blog Tools</a></li>
<li><a href='http://farhanshare.blogspot.com/p/streaming-radio.html'>Streaming Radio</a></li>
<li><a href='http://farhanshare.blogspot.com/p/privacy-policy.html'>Link Exchange</a></li>
</ul>
<div class='navsearch'>
<div style='float:right;padding:1px px 0 0;'>
<form action='http://www.google.com/search' method='get' target='_blank'>
</form>
</div>
</div>
</div>
</div>
<div class='newspic'>
<div style='float:left;width:780px;padding:6px 0 6px 125px; 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://eljohn-us.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>

11. Klik "Save template" dan selesai.

Selamat Mencoba sobat farhan, bila ada pertanyaan comment di bawah.

Tweet

Postingan terkait:

Ditulis Farhan — Friday, May 25, 2012 — Tutorial Blog