Cara membuat Breaking News

Cara membuat Breaking News, yang di maksud dengan Breaking News adalah informasi apa saja baik info dari judul-judul posting atau yang lainya yang di munculkan di website tersebut.
Untuk bisa memunculkan informasi tersebut yang sering di sebut sebagai Breaking News ada tata caranya, bagi pengunjung jasa setting blog disini yang ingin Membuat breaking news silahkan simak terus artikel ini, untuk lebih mudah nya seperti apa itu Breaking News dan tampilanya bisa di lihat tampilan breaking news yang ada di gambar di bawah ini



Fungsi dari breaking news ini adalah untuk memberitahukan kepada pengunjung apa saja artikel atau layanan apa saja yang ada dalam website/blog tersebut sehingga pengunjung bisa lebih cepat mengetahui data apa saja yang ada dalam website/blog tersebut.

Membuat Breaking News pada dasarnya banyak cara dan banyak juga tampilanya ada yang melalui widged ada juga yang lansung membuat breaking news lewat memasukan kodenya di susunan HTML, dan dalam panduan ini saya akan berikan Cara membuat breaking news memalui HTML sehingga akan lebih aman dan paten.

Uraian di atas tentang Fungsi Breaking News saya kira sudah jelas Namun jika masih ada yang kurang jelas silahkan untuk bertanya melalui kotak komentar yanga ada di bawah artikel ini, dan selanjutnya Cara membuat Breaking News silahkan simak panduanya di bawah ini :

Cara Membuat Breaking News

1.Pertama buka blog anda bisa melalui alamat www.blogger.com
2.lalu login ke akun blog masing-masing
3.Klik desain Untuk menuju Dashboard blogger
4.dalam dashboard blog silahkan pilih Template lalu klik edit HTML, panduan gambarnya bisa di lihat gambar yang di bawah ini

5.selanjutnya cari kode seperti ini ]]></b:skin>
6.Lalu kopi kode yang di bawah ini dan pastekan atau letahkan di atas kode ]]></b:skin>

newspic {background:#827D82 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlBQ6EytsnFTY0CXDQlPRntvp0m26kruWhF7B0h6UmetZJ1ESt6_6qWFmTA2r24yAoo6ktKFmnt0s4rGhlVptz43eybEmi-dMR7EnLcSBp4sIkmPVgtdEMMLi2fApas1SkLENm3VSfrOM/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:#000;text-decoration:underline;}

7.Selanjutnya cari lagi kode seperti ini </head>
8.Lalu kopi lagi kode yang di bawah ini dan pastekan 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:#0101DF;text-decoration:none;}
#example1 a:hover {color:#0404B4;text-decoration:none;}
</style>

9.Selanjutnya Tinggal memasang lokasi breaking news nya mau di posisi sebelah mana di atas header atau di footer atau di bawah navigasi, dan disini saya berikan contoh letak Breaking News nya di bawah navigasi, Maka Cari kode di susunan HTML template kode seperti ini <div id='content-wrapper'>
10.lalu kopi kode yang di bawah ini dan pastekan di atas kode <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(&quot;example1&quot;, &quot;example1class&quot;, 4000, &quot;_new&quot;)
cssfeed.addFeed(&quot;Creating Website&quot;, &quot;http://jasa-setting.blogspot.com/feeds/posts/default&quot;) //Specify &quot;label&quot; plus URL to RSS feed
cssfeed.displayoptions(&quot;date&quot;) //show the specified additional fieldscssfeed.setentrycontainer(&quot;div&quot;) //Wrap each entry with a DIV tag
cssfeed.filterfeed(10, &quot;date&quot;)
cssfeed.entries_per_page(1)
cssfeed.init()
</script>
</div>
<div style='clear:both;'/>
</div>

Keterangan Tulisan Warna Biru di dalam ke 3 kode :

• Tulisan Biru jasa-seting.blogspot.com ganti dengan alamat url blog anda
• Tulisan di kode pertama warna biru ( 827D82 ) itu sebagai kode warna background nya jika anda ingin mengganti warna nya silahkan ganti dengan kode warna yang anda inginkan , untuk mengganti kode warna silahkan buka Kode Warna HTML 
• Tulisan angka 10 di kode ke 3 itu sebagai jumlah posting yang akan di tampilkan, anda bisa merubah sesuai keinginan anda.
• Untuk merubah ukuran panjang dan tinggi layar nya bisa di lihat untuk ukuran width dan height nya dan untuk merubah ukuran font tulisanya bisa di lihat angka Font nya serta jenis tulisanya semuanya anda bisa sesuaikan menurut selera anda, (biar anda bisa senyum-senyum sendiri)

11.selanjutnya jika sudah selesai mengedit simpan Template nya sampai berhasil.
12.selesai

Untuk melihat hasil pembuatan Breaking News di bawah navigasi silahkan buka ulang Beranda website anda

Demikian Panduan blogger dari jasa ganti domain tentang Cara membuat Breaking News, semoga bermanfaat.