Cara Memasang Breaking News di Blog

Cara Memasang Breaking News/Headline News di Blog


Cara Memasang Breaking News/Headline News di Blog - Ada yang baru dengan tampilan Sahabat Blogger, blog  ini kini dilengkapi dengan breaking news. Breaking news/Headline news adalah widget yang dipasang dengan tujuan memperindah tampilan blog dan juga untuk  meningkatkan pageview blog. Widget ini berupa judul artikel
yang ditampilkan secara bergantian yang terkadang juga di sertai dengan tanggal posting artikel tersebut.

Cara Memasang Breaking News di Blog

1. Login dulu ke akun blog sobat
2. Klik rancangan --> Edit HTML
3. Letakkan kode berikut di atas kode ]]></b:skin>
.newspic {background:#252525 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTnerFE0PCay5rEzeh9ELhcgHE0fBZG3TvG6Ea6MZksuNfJQvEnKQwrFO-n3WtdbFSgbwsBCRN4HpfbwKqnPxgtrCa7QYyiqeFNAoNACtGnhOvMdcQMaAsO1MnwGqLxdy9cDSRqAvN_5M/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;}

Catatan :
Sesuaikan kode yang berwarna biru dengan ukuran template blog sobat


4. Kemudian letakkan kode berikut 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>

5. Cari kode <div id='header-wrapper'> ( gunakan Ctrl + F ) dan letakkan kode berikut tepat di bawahnya.
<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://indofajarblog.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>

Catatan :
Ganti http://indofajarblog.blogspot.com dengan url blog sobat.

6. Klik save dan lihat hasilnya.

14 Responses to "Cara Memasang Breaking News di Blog"

  1. keren nihh,,bisa di coba..thanks

    ReplyDelete
  2. terimakasih sahabat, akhirnya blog ane udah ada widget ini. tapi yang mau saya tanyakan, bagaimana supaya posisinya berada dibawah head (apa sih sebutannya? yang ada logo blog kita itu) ya?

    ReplyDelete
    Replies
    1. agan pindah kode yang nomor 5 dibawah kode div class='clear'/>

      Delete
    2. alhamdulillah.... berhasil gan! ^_^
      ini saya mau nanya lagi nih tentang judul blog dan judul postingan yang akan tampil dihasil pencarian google. punya saya kok kayaknya aneh ya...
      saya pengennya di hasil pencarian menampilkan
      "judul-postingan-saya | judul-blog-saya"
      apakah format kode di edit html saya harus dikurangi atau ditambah gan? mohon bantuannya.

      < head >
      < b:include data='blog' name='all-head-content'/ >
      < b:if cond='data:blog.pageName == ""' >
      < title > < data:blog.title/ > < /title >
      < b:else/ >
      < b:if cond='data:blog.pageType == "index"' >
      < title > < /title >
      < b:else/ >
      < title > < data:blog.pageName/ > < /title >
      < /b:if >
      < /b:if >

      Delete
    3. iya gan, artikelnya saya bisa pahami. tetapi apakah kode html punya saya udah sesuai atau belum ya?
      atau apakah saya ganti aja kode

      < b:if cond='data:blog.pageName == ""' >
      < title > < data:blog.title/ > < /title >
      < b:else/ >
      < b:if cond='data:blog.pageType == "index"' >
      < title > < /title >
      < b:else/ >
      < title > < data:blog.pageName/ > < /title >
      < /b:if >
      < /b:if >

      dengan kode yang ada di artikel agan tersebut?
      coz, sepertinya kode punya saya double dan amburadul gitu.
      maaf gan merepotkan....

      Delete
    4. maaf gan kalo itu ane kurang tau,
      tapi sepertinya kode agan di atas ga perlu di ubah.
      tinggal ganti kode
      < title > < data:blog. pageTitle / > < / title >
      dengan kode yg ada di artikel saya

      Delete
    5. oh gtu ya gan...
      makasih banget nih atas jawaban-jawabannya. semoga pahalanya makin bertambah banyak gan....
      ^_^

      Delete
    6. amiin.. sama-sama gan...
      kan kita sesama pengguna blogger harus saling tolong menolong.. :D

      Delete
  3. sep...
    hidup blogger!!!
    :)
    wew, ada emoticon nih

    ReplyDelete
    Replies
    1. hehe :-) barusan buat emoticonnya
      kalo boleh tau alamat blog situ apa.. :-?

      Delete
    2. cuma blog kecil-kecilan tingkat provinsi aja gan. soalnya saya belum mngerti betul tentang blog. alamat blog saya ada di profil google saya, tab "Tentang" Sub Tab "Kontributor di"
      malu saya mau nyebutinnya. hahaha....

      Delete
    3. ga papa gan semoga blog agan tambah maju.. (o) amin..

      Delete
    4. amin....
      sama2 gan, smoga sahabat blogger semakin maju lagi.
      terimakasih banyak ya gan udah bantuin doa...

      Delete

Pengunjung yang baik adalah pengunjung yang meninggalkan jejak setelah membaca