Cara Membuat Breaking News di Blog

Sebenarnya, ini bukan widget breaking news.. Tapi mirip breaking news dan di google terkenal dengan sebutan "breaking news". Jadi, pada artikel kali ini kita akan membahas bagaimana caranya membuat breaking news di blog. Penasaran seperti apa penampakannya? Silahkan kunjungi link ini

LINK INI

Kurang lebih seperti itu lah. Berminat? Langsung di perhatikan tutorialnya.

1. Login ke akun blogger anda
2. Klik Template
3. Klik Edit HTML
4. Cari kode ]]></b:skin> untuk mempermudah pencarian, tekan CTRL + F
5. Letakkan kode ini diatas kode ]]></b:skin>

.newspic {background:#c8d3ff url(http://s17.postimg.org/v3unlwf6z/Breaking_News.png) no-repeat top left;width:919px;margin:0 auto;padding:0 auto; height:24px;color:#fff;}
.news {width: 919px;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;}

Note: Tulisan berwarna biru diganti dengan lebar header blog anda.


     6.   Kemudian cari kode </head> untuk mempermudah pencarian, tekan CTRL + F
     7.   Letakkan kode ini diatas 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) 

     8.   Kemudian cari kode <div id='header-wrapper'> untuk mempermudah pencarian,
           tekan CTRL + F
     9.   Letakkan kode ini dibawah kode <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://dandi-ixa.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>

Note : Ganti tulisan berwarna merah dengan link blog anda

     10.   Klik Simpan / Save

Sekian. Selamat mencoba dan semoga sukses.