Cara Membuat Headline News di Blog

Cara Membuat Headline News di Blog Keren - Cara Memasang Headline News Di Blog. Headline News yang akan
MAK NYUS bahas pada kesempatan kali ini merupakan Headline News yang akan menampilkan artikel terbaru atau postingan terbaru pada blog, fungsinya hampir mirip dengan Recent Post yaitu artikel terbaru pada sebuah blog, namun disini kita akan mencoba menampilkan dalam bentuk Headline News. Posisinya akan ditempatkan pada header blog atau dibawah header blog dengan judul postingan satu baris secara bergantian.  Tentunya dengan Membuat Headline News pada blog akan menambah nilai plus tersendiri, karena secara tidak langsung kita telah mempermudah pengunjung untuk mengetahui postingan terbaru sebuah blog tanpa harus menuju halaman home atau halaman awal terlebih dahulu. Dengan begitu postingan terbaru akan mudah dilihat oleh para pengunjung, dan seandainya pengunjung tertarik dengan judul postingan terbaru yang telah kita buat maka pengunjung akan mencoba untuk membaca postingan terbaru yang muncul pada Headline News yang sudah kita pasang pada blog.

Cara Membuat Headline News di Blog Keren - Nah kalau sahabat penasaran dengan Headline News yang akan sundaboy share, berikut gambar contoh Headline News tersebut :

Bagaimana, apakan sahabat tertarik Untuk Membuat Headline News di Blog? kalau tertarik silahkan ikuti petunjuk dibawah ini :

1. Langkah awal tentunya sahabat harus login terlebih dahulu
2. Silahkan Pilih Template dan klick "Edit HTML"
3. Setelah itu sahabat harus mencari kode ]]></b:skin>
4. Kalau sudah ketemu silahkan copy kode dibawah ini dan pastekan tepat diatas kode ]]></b:skin>

.newspic {background:#252525 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc-6O6yl2XZ7GxrqDUxzCnT2idpkYOC-P_8wQF6sBxFBLIyp0VdylOFCiM_y1sla4paodA7xEuwDjUb-p1b5QcioCS7aCwVoKJbAEcplbooAu-9wSTqVQZSECMmOLLOP-rFxHmcF7mpSM/s1600/hotnews.png) no-repeat top left;width:900px;margin:0 auto;padding:0 auto; height:24px;color:#fff;}
.news {width: 900px;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 :
width:900px : merupakan lebar dari Headline News (sesuaikan dengan template sahabat)

5. Selanjutnya silahkan cari lagi kode </head>
6. Copy kode dibawah ini dan letakan tepat diatas kode </head>

<script src='http://www.google.com/jsapi?key=ABQIAAAAUMsU2d40bO1-m8DeADFRexTdcQS31_Y0TkToW9tE1XWPEnv6YBSa1QfZaAr4GJ8-AZkWddpnW9Y0hA'/>
<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>

7. Tahap akhir kita akan memanggil script Headline News supaya bisa muncul diblog, untuk menampilkan Headline News di blog terdapat dua cara , Yaitu :

Cara Pertama :
Silahkan cari kode <div id='header'> atau sahabat bisa mencari kode yang lain sesuai dengan keinginan sahabat untuk menempatkan Headline News pada blog sahabat. Jadi terserah sahabat mau diletakan dimana Headline News tersebut. setelah ketemu kode tersebut silahkan copy kode dibawah ini lalu pastekan tepat diatas kode diatas.

<div class='newspic'>
<div style='float:left;width:900px;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://maknyusblogger.bloggspot.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(9, &quot;date&quot;) //Show 9 entries, sort by date
cssfeed.entries_per_page(1)
cssfeed.init()
</script>
</div>
<div style='clear:both;'/>
</div>

Keterangan :
width:900px = merupakan lebar dari Headline News (sesuaikan dengan tempolate milik sahabat)
9 = Merupakan jumlah postingan yang ingin ditampilkan
http://maknyusblogger.com = Silahkan ganti dengan URL sahabat sendiri

Cara Kedua :
Sahabat bisa memasukan kode diatas kedalam Widget, caranya :
1. Pilih Tata Letak
2. Selanjutnya silahkan tambahkan widget baru
3. Pilih HTML/Javascript
4. Pastekan kode diatas tadi kedalam Widget
5. Simpan template dan lihatlah hasilnya.

Anda baru saja membaca artikel tentang - Cara Membuat Headline News di Blog . Silahkan baca artikel berikutnya Tentang - Next - Jangan lupa g+1 / fb / twit :)