Cara Membuat Headline News Di Blog

Cara Membuat Headline News Di Blog - Hallo sob, Untuk postingan aku selanjutnya kali ini aku ingin memberikan sedikit Tutorial Cara Membuat Headline News Di Blog, karna ada salah satu teman blogger kita yang menanyakan bagaimana cara membuat headline news seperti blog aku ini, yah terpaksa la aku ngobok-ngobok template lagi untuk mencari code scriptnya. Karna beberapa hari belakangan ini aku lagi senang karna Pagerank aku pecah telur menjadi 3 terus Google Adsense aku juga di terima jadi gak apa lah aku repot sedikit untuk bongkar-bongkar template aku untuk share Cara Membuat Headline News Di Blog. Yang belum tau Headline News tu seperti apa silahkan sobat lihat di bawah menu horizontal aku, Nah seperti itu la Headline News yang akan aku share kali ini.
Untuk sobat yang sudah sering mampir kesini mungkin sudah sering la ya melihatnya.
ini gunanya hanya untuk menghias blog aja biar kelihatan gimana gitu. hehehe
Kalau sobat masih gak tau juga nih aku kasih screen shot nya biar lebih jelas lagi bagaimana  Headline News yang aku maksud

Cara Membuat Headline News
Headline News



Ok kita gak usah berlama-lama lagi, langsung aja la ya ke cara pembuataan nya.
kalau sobat tertarik dengan Cara Membuat Headline News Di Blog silahkan mengikuti cara di bawah:

1. Login ke blog sobat terlebih dahulu.
2. Klik Template > Edit HTML > Centang Expand Template Widget
 untuk berjaga-jaga dari kesalahan sebaiknya biasa kan download dulu template sobat sebelum mengedit HTML
3. Cari code ]]></b:skin> lalu copy code di bawah ini dan paste kan di atas code ]]></b:skin>

/* Headline News */ .newspic {background:#000 url(http://2.bp.blogspot.com/-Gi_4y7eGWlg/TzePAUfnxbI/AAAAAAAAA4g/WsJKC56NBs4/s1600/headline.png) no-repeat top left;width:940px;margin:0 auto;padding:0 auto;height:28px;color:#ff0000;} .news {width: 940px;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{color:#ff0000;font-weight: bold;text-decoration:none} .news a:visited{color:#ddd;font-weight: bold;text-decoration:none} .news a:hover{color:#fff;font-weight: bold;text-decoration:underline}

4. Cari lagi Code </head> Copy dan paste kan code di bawah ini dan letakkan di atas code </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+'" /> Eflianda BlogzZz';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>

5. Cari lagi code <div id='main-wrapper'> copy code di bawah ini lalu paste kan di bawah code <div id='main-wrapper'> tersebut.

<div class='newspic'>
<div class='news'>
<div style='float:left;padding:5px 60px 5px 7px;font:bold 14px Arial;color:#333;text-transform:none;'>
Headline News :
</div><div style='float:left;width:680px;padding:4px 0; 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;Eflianda BlogzZz&quot;, &quot;http://eflianda.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><div style='clear:both;'/>
</div>

6. Ganti yang berwarna Merah dangan URL sobat lalu Save Template.
sekarang coba lihat hasilnya, bagaimana apakah sudah berhasil..?
Sobat bisa mengkreasikan tempat peletakan Headline News di blog sobat dimana pun yang menurut sobat paling pas dan bagus dengan memindahkan code script nomor 5.

Ok mungkin segitu aja dulu Cara Membuat Headline News Di Blog
kalau sobat ada pertanyaan silahkan datang kerumah saya,,hehe gak ding.
maksudnya silahkan bertanya di kotak komentar..hehe
Oya satu lagi silahkan baca juga Cara Beda Membuat Internal Link Otomatis
atau kalau ingin ingin men Download Lagu Noah Separuh Aku silahkan gratis kok,hehe
Dah ah wasallam Eflianda BlogzZz

39 Responses to "Cara Membuat Headline News Di Blog"

  1. itu tampilan dan warnanya sama dgn contoh screenshot ya Sob...?? makasih n' nice share

    ReplyDelete
  2. nanti yang keluar berita yg isinya tentang artikel di blog kita gitu ya sob.?
    btw,,kapan nih sobat bersedia follback blog saya..?

    ReplyDelete
  3. @Nakusan : iya sob,,sama-sama

    @Bagas : iya..
    silakan di liat contoh d atas,,
    sudah d follback sob,,

    ReplyDelete
  4. headline newsnya gak bisa di taro di tempat lainnya gak mas ? di bawah misalnya ?

    ReplyDelete
  5. sangat detil skali tutornya kang...
    sukses selalu...

    ReplyDelete
  6. Waahh ,Nice Sobb , Langsung Praktek Ahh !!

    ReplyDelete
  7. ternyata hasilnya keren sobat dan sangat mempermudah bagi pengunjung yang ingin melihat hasil postingan terbaru, thanks udah berbagi sobat

    ReplyDelete
  8. wah ilmu nih, dari dulu belum ketemu gnian sobat. thanks yaaa

    ReplyDelete
  9. trima kasih tipsnya sob....selamat gan ya GA nya dah di approve...bagi tipsnya dong....

    ReplyDelete
  10. blog walking sobat.....
    maff sob...saya masih dalam perbaikan template, mohon dimaklumi ea (^_^)....text link sobat masih saya pasang kok,,,, tp blum buat menunya, silahkan cek disini sobat (^_^)

    http://pondokmerana.blogspot.com/2012/06/link-exchanges.html

    ReplyDelete
  11. liat hasilnya keren juga ... nice share kawan :D

    ReplyDelete
  12. Dulu saya tidak suka main internet , tapi setelah merasakan khasiatnya saya jadi suka klik di mana mana dan dimana pun saya berada pokoknya suka klak klik klak klik ... terimakasih klik mana karena klik mana saya jadi Sehat kembali ...

    ReplyDelete
  13. ermmm... mau cuba ni... thanks ya sob...

    ReplyDelete
  14. Mantap sob tutornya sangat lengkap dan detail sekali,,,,

    ReplyDelete
  15. thank for the info, i'll implement into my blog

    ReplyDelete
  16. bagus ngak ya, klo si ayam gwe tambahin itu *berpikirkeras*

    ReplyDelete
  17. wah kya nya cocok buat blog ane nih :) hehe
    trims sdh berbagi ya sob :)

    ReplyDelete
  18. wah, sepertinya saya harus coba headline news yang ini nih sobat, kira2 ini lebih ringan dari yg pernah saya pakai atau nggak ya..

    ReplyDelete
  19. gan kalo diberi headline news apakah akan memperberat loading?

    ReplyDelete
  20. @all : silahkan d coba sob.

    @Medical Shaman : kalau menurut sobat blog aku berat apa ga..?
    tergantung banyak widget yg kita pakai sob..
    kalau sedikit ga kan memberatkan blog kok..

    ReplyDelete
  21. Banyak banger sobb kodenya tapi tetep keren dehh

    ReplyDelete
  22. wah mantap nih... makasih infonya bos

    ReplyDelete
  23. Salam kenal sob...

    klo gak salah, ini template dari BLoG Bamz ya...
    miriip ama pnya.q! hihihi...

    ReplyDelete
  24. sob, apakah GA boleh ditaruh di homepage?soalnya saya taruh di homepage, n bagaimana caranya pasang GA di search label. trims

    ReplyDelete
  25. @ternak ayam kampung : boleh sob.
    minimal 3 iklan.
    kalau lebih salah satu tidak akan timbul atau d tampil.
    aku liat posisi iklan GA sobat sudah bagus kok.

    ReplyDelete
  26. Wah info yang berguna buat saya yang baru belajar bikin blog .

    ReplyDelete
  27. hi sob, info yang menarik.. ane berterimakasih blog ini memberikan ane inspirasi, maklum karena ane orang awam dalam dunia blogging. Untuk pertukaran link.a ane bisa mendaftar ga nih? salam kenal..

    ReplyDelete
  28. Kira-kira ini memberatkan loading page tidak ya?

    ReplyDelete
  29. gak sob,
    asal tidak terlalu banyak memasang widget, gak memberatkan blog..

    ReplyDelete
  30. itu kita bisa milih postingan mana aja yang mau dimasukin ke headline tu ga sob ??

    ReplyDelete
  31. ternyata scriptnya banyak juga ya mas, baiklah akan saya coba :)

    ReplyDelete
  32. Thanks sobat atas artikelnya sangat bermanfaat, tapi saya mau bertanya bagaimana cara memindahkan posisi Headline Newsnya ?

    ReplyDelete
  33. @wewengkon sumedang : gak sob, ini untuk menampilkan artikel terbaru,

    @Sriwijaya FC Mania : mau di pindahin di posisi mana sobat.? kalau ingin memindahkan pindahkan kode html yang paling bawah.
    misal di letak di bawah : div id=outer-wrapper atau div id=content-wrapper

    ReplyDelete
  34. sukses gan. terimakasih atas tutorial dan ilmunya.

    ReplyDelete
  35. thanks tipsnya sob !follback blog gue dong !

    ReplyDelete
  36. Sob, biar nggak tampil di layar mobile gimana ya?

    ReplyDelete

Sebelum memberikan komentar harap di baca dulu


1. komen lah sesuai artikel yang sedang dibahas
2. Jangan Memasukan Link Aktif,
3. Komentar Singkat yang tidak relevan tidak akan di Publikasikan.