Cara Mudah Memasang Headline News di Blog

Hai Sahabat Blogger Bocah Poris Blog's Akhir - Akhir ini Saya Sangat Membuat Artikel Blog di Karenakan
Saya Fokus Ke Ujian Nasional yang Sebentar Lagi akan di Laksanakan Maka Dari itu Saya Sangat Jarang Sekali Membuat Artikel Baru, Nah Pada Kali ini Saya Ingin Membuat Artikel Tentang "Cara Mudah Memasang Headline News di Blog" Memang Sebenarnya Postingan Saya ini Sudah Banyak Blogger Yang Membahasnya Saya Hanya Re-Write Dengan Tulisan Saya Sendiri , Kenapa Saya Membuat Artikel Tentang Cara Memasang Headline News di Blog Keren ya Karena Itu Kemauan Saya Sendiri xP. Artikel ini Semoga Bisa Mencapai Google Page one , Headline News di Blogger Berguna Untuk Para Pengunjung Blogger Mengklik Artikel Terbaru yang Telah kita buat Dengan Susah Payah :D Headline News ini Juga Bisa Membuat Persentase Bounce Rate di Blog Kalian Berkurang . Pasti Banyak yang Bingung Apa sih Bounce Rate itu ? Nanti Saya Bahas Jika Ada Waktu Kawan akan Saya Bahas Tentang Bounce Rate.
Nanti Headline News Akan Menjadi Seperti gambar dibawah ini

Cara Mudah Memasang Headline News di Blog
Widget ini Banyak di Template Ciptaan Mas Kolis , Biasanya Widget ini Juga bisa Meningkatkan page View Blog , Jika Page View Blog Anda Sedikit Pakailah Headlines News ini Karena Sangat Berguna.

Ayo Kita Langsung Ke Tutorial Cara Mudah Memasang Headline News di Blog  :

1. Seperti Biasa Login Ke Akun Blogger Kesanyangan Anda.
Sebelum itu Biasakan Backup Template Anda Terlebih Dahulu Untuk Menghindari Hal yang Tidak di Inginkan . Caranya ke Template > Cadangkan > Unduh Template Anda
2. Masuk Ke Menu Template Blog Anda

3. Lalu Klik Edit HTML > Lanjutkan > Centang Expand Template Widget

4. Setelah itu Cari Kode dibawah Untuk Memudahkan Tekan Ctrl+F
]]></s:kin>
5. Setelah itu Copy Kode dibawah dan Pastekan Tepat diatas kode ]]></s:kin>
 /*Headline News For Blogger*/
.newspic {background:#000 url(http://4.bp.blogspot.com/-vqHATrTDsY8/TvguMe2lBTI/AAAAAAAAEUk/L8UwRygGp9s/s1600/news.gif) no-repeat top left;width:930px;margin:0 auto;padding:0 auto;height:32px;color:#fff;}
.news {width:930px;margin:0 auto;padding:0 auto;line-height: 1.4em;text-align:left;font-family:Arial;font-size:11px;color:#fff;overflow:hidden;clear:both;}
.news a:link, .news a:visited{color:#fff;text-decoration:none;}
.news a:hover {color:#ddd;text-decoration:underline;}  

Keterangan : Kode yang Berwarna Biru Adalah Ukuran Headlines Anda , Sesuaikan dengan Kemauan Anda Sendiri ya.. :)

6. Setelah Langkah diatas Sudah Sukses dilakukan Lalu Cari Kode </head>

7. Setelah ketemu Lalu Copy dan Pastekan kode dibawah Tepat 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){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>
8. Masih di Edit HTML , Setelah Langkah diatas Sukses dilakukan . Lalu Cari Lagi kode  <div id='header-wrapper'> atau
<div id='header-outer'>.

9. Setelah itu Copy kode dibawah lalu Pastekan  di atas Salah satu kode diatas.


<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;Bocah Poris Blogs&quot;, &quot;http://bocahporis.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>
Keterangan Ganti kode Berwarna Merah dengan Blog Anda.

10. Setelah itu Klik Simpan/Save Pada Template Anda .
Setelah itu Lihat Hasilnya di Blog Anda


Demikian Artikel  Tentang Cara Mudah Memasang Headline News di Blog Semoga Artikel ini Bermanfaat Buat Kalian . Jika Ada Permasalahan Tentang Headlines News di Blog Ini Beri Tahu Saya Lewat Kotak Komentar dibawah
Source Kode: dapur-tutorial.blogspot.com
Artikel Rekomendasi :

  1. Cara Memasang Menu Dropdown Keren di Blog
  2. Cara Memasang Kotak Berlangganan Berdampingan dengan Kotak Terkait di Blog


Judul : Cara Mudah Memasang Headline News di Blog
Di Tulis Oleh:MRizal Wrc
URL : http://bocahporis.blogspot.com/2013/02/cara-membuat-headline-news-diblog.html
Date Published : 17:10
Desription : Hai Sahabat Blogger Bocah Poris Blog's Akhir - Akhir ini Saya Sangat Membuat Artikel Blog di Karenakan Saya Fokus Ke Ujian Nasional...
Rating Blog: 5 dari 5