Membuat Headline News Pada Blog

Tutorial memasang Headline News di Blog, seperti kita ketahui bahwa memasang pernak-pernik seperti Headline News merupakan salah satu tujuan untuk memperindah tampilan Blog. Disamping itu dengan memasang Headline ini untuk meningkatkan pageview blog. Sebenarnya dimata para Blogger cara ini sudah tidak asing lagi tapi tidak salahnya saya share kembali kepada teman2 pemula seperti saya. Oke langsung saja

1. Masuk ke blog anda

2. Pilih Template--EDIT HTML
3. Sebelumnya Backup terlebih dahulu templatenya untuk menghindari terjadinya kesalahan
4. Centrang Expand Widget Templates 
5. Cari kode ]]></b:skin> gunakan CTRL+F atau F3 untuk mempercepat pencarian
6. Copy code di bawah ini, tepat di atas code ]]></b:skin>

.newspic {background:#252525 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_cIJK40TVKQchsDTfEGqLvOhMOxf_vqFn2MJSqnICDiQuJFVZowyQepnU-Gz3JxUqEk6QStY9X1KqhUYvS6qDn7jo4Q-W2IgepGrjvuuU8zX3t5JkrFx8vm_JDXSbXDLa9cDH2PltWCY/s1600/news.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;}

Keterangan :
Kode warna merah sesuaikan dengan ukuran template anda


7. Langkah selanjutnya letakkan code dibawah ini, tepat di atas code </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)

8. Cari code <div id='header-wrapper'> letakkan code di bawah ini 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://www.fianetmus.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>

Keterangan :
Ganti code http://www.fianetmu.com/ dengan alamat blog anda

9. Kemudian Save dan lihat hasilnya

Tweet

Postingan terkait:

— Blogspot, tutorial