Cara Membuat Widget Headline News Keren di Blogger

By Poztart Media Tuesday, July 3, 2012

Share Tweet Share Share Email

Baca Juga

Headline News. Kemarin baru saja saya sharing info tentang cara membuat auto like facebook fans page untuk meningkatkan jumlah facebook fans page di blog Anda, kali ini PoztART akan kembali memberikan tips blogging keren lainnya yaitu tutorial atau cara membuat headline news mungkin sudah sangat banyak sekali ditulis oleh para blogger, namun ternyata masih banyak juga blogger baru yang masih bingung bagaimana cara membuat headline news yang dimaksud. Pada awalnya saya juga pernah mengalami hal tersebut, bingung bagaimana caranya membuat headline news keren seperti halnya yang sudah dipasang disitus-situs besar.

Headline news merupakan barisan title bergerak yang menyajikan info berita terbaru atau berita terkini yang sering dipakai untuk menarik pengunjung sebuah situs. Seperti pernah kamu lihat di TV juga selalu menampilkan headline news pada posisi layar bagian bawah untuk menampilkan berita-berita terhangat yang lagi populer di masyarakat. Manfaat headline news untuk blog adalah meningkatkan pageviews sebuah situs yang juga berdampak bagus untuk SEO blog Anda.



Contohnya seperti gambar berikut :

Kamu tertarik ingin memasang headline news keren ini di blog? OK saya berikan cara mudah pasang headline news ini untuk blog sobat. Silahkan simak tutorialnya..!!

1. Login ke blogger Anda kemudian menuju ke tab Rancangan >> Edit HTML (centang Expand Template Widget).
2. Cari kode ]]></b:skin> dan letakkan kode berikut di atas kode ]]></b:skin>
/* News Ticker Wrapper */ .newspic {background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRRPLWDXGcUkOZM1j462sh4B17dEiOociaweyuh4gSfG7eSB3XGnHLq6e48hL7S0hP8YQgOtT0cP3cL30-b3MhUucttPHE4izGOn1gUA4lY8nk9k42cYjfpIaaT1gnLrJ_GfxkPL-Hhyphenhyphenc_/s87/headlines.png) no-repeat top left;width:1000px;margin:0 auto;padding:0 auto;height:28px;color:#none;} .news {width: 1000px;margin:0 auto;padding:0 auto;line-height: 1.4em;text-align:left;font-family:Arial;font-size:12px;color:#fff;overflow:hidden;clear:both;} .news a:link{color:#ffffff;font-weight: bold;text-decoration:none} .news a:visited{color:#0000ff;font-weight: bold;text-decoration:none} .news a:hover{color:#fff;font-weight: bold;text-decoration:underline}
3. Cari kode </head> dan letakkan kode berikut diatas kode </head>
<script src='http://www.google.com/jsapi?key=ABQIAAAA4qkT5i26SQ6NmgJd5KQemhRQ_a6zv5_Bim3H_GL4gaueIFZ15xRdt8jcAUk8ZHokIVo-TBZgYVbkzw' type='text/javascript'/> <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+'" /> ';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)?" "+a[c].content:/snippet/i.test(this.showoptions)?" "+a[c].contentSnippet:"";e+=this.itemcontainer+d+" "+b+" "+g+"n"+f+this.itemcontainer.replace("<","</")+"nn"}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)?" "+d[e].content:/snippet/i.test(b)?" "+d[e].contentSnippet:"";c+=f+h+" "+j+" "+k+"n"+a+f.replace("<","</")+"nn"}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>
4. Untuk instalasi kode yang terakhir, cari <div id='navigation'> bla..bla.. </div> atau <div id='content-wrapper'> kemudian letakkan kode berikut di bawahnya.
<div class='newspic'> <div class='news'> <div style='float:left;padding:5px 80px 5px 7px;font:bold 14px Arial;color:#0000ff;text-transform:none;'> </div><div style='float:left;width:805px;padding:2px 0; position:relative; overflow:hidden;background:none'> <script type='text/javascript'> var cssfeed=new gfeedrssticker("example1", "example1class", 4000, "_new") cssfeed.addFeed("FakhrianAmrullah", "URL_BLOG_SOBAT/feeds/posts/default") //Specify "label" plus URL to RSS feed cssfeed.displayoptions("date") //show the specified additional fields cssfeed.setentrycontainer("div") //Wrap each entry with a DIV tag cssfeed.filterfeed(10, "date") //Show 10 entries, sort by date cssfeed.entries_per_page(1) cssfeed.init() </script> </div></div><div style='clear:both;'/> </div>

Untuk kode script point 4 ganti tulisan URL_BLOG_SOBAT dengan alamat url blog sobat sendiri misal https://poztart.blogspot.com Kalau instalasi sudah selesai semua, langkah selanjutnya adalah menyimpan pekerjaan sobat dan cek di blog sobat apakah widget headline news sudah keluar atau belum, kalau belum mungkin ada sedikit langkah yang salah coba koreksi kembali.

Kalau Anda berhasil tampilan Headline News akan seperti gambar di atas atau headline news di blog PoztART ini sendiri yang posisinya ada di bawah Header. Mau mencoba? Silahkan coba tips membuat Headline News keren ini!