Tentang Ilmu Komputer, Android, Panduan Blogging dan Tips di Internet.

Cara Membuat Headline News di Blog

Lagi tidak ada kerjaan nih sob. Daripada diam saja lebih baik buat posting di Blog tercinta ini. Kali ini saya akan mennyampaikan Cara Membuat Headline News di Blog. Headline News itu apa sih? Sedikit gambaran saja yaah. Headline News di Blog ini berfungsi untuk menampilkan beberapa berita atau konten pada Blog Sobat dalam satu baris dan bergantian.

Cara Membuat Headline News

Mungkin sobat Blogger pernah melihat atau bahkan sudah tidak asing lagi dengan Headline News ini. Banyak sahabat-sahabat Blogger yang telah memasang Headline News ini pada Blog-nya. Umumnya mereka memasang pada bagian atas Blog, sesuai namanya "Headline". Namun, tidak jarang juga yang memasang pada bagian bawah Blog.

Nah, sekarang saya akan membahas Cara Membuat Headline News yang dipasang di atas Blog atau pada bagian Header. Dan Headline News versi ini menampilkan konten-konten terbaru pada Blog sobat dengan jumlah yang akan ditampilkan bisa disesuaikan. Jadi fungsinya mirip dengan Recent Post (Dapatkan Widget Recent Posts keren, Klik disini), hanya beda penempatanya saja.

Cara Membuat Headline News di Blog

Membuat Headline News di Blog

  • Login ka akun Blogger sobat.
  • Masuk pada bagian Template pada Blog yang diinginkan.
  • Pilih Edit HTML.
  • Cari kode HTML ]]></b:skin>, dengan tombol ctrl+F.
  • Masukan kode berikut diatas kode ]]></b:skin>.
.newspic {background:#252525 url(http://3.bp.blogspot.com/-GoZGUMDvx8g/T1je4hEa9iI/AAAAAAAAA7E/aOfllbW_qOc/s1600/BRK+NW.png) no-repeat top left; width:1000px; margin:0 auto;padding:0 auto; height:24px;color:#fff;}
.news {width: 1000px;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;}

  • Kode berwarna merah sesuaikan dengan Lebar Blog sobat.
  • Cari kode </head>, dengan tombol ctrl+F.
  • Masukan kode berikut 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>

    • Cari kode kode <div id='header'> atau <div id='header-wrapper'> atau <div id='header-outer'>, dengan tombol ctrl+F.
    • Masukan kode berikut di atas kode yang sebelumnya saya sebutkan.
    <div class='newspic'>
    <div style='float:left; width:1000px; 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://regibrader-free.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>

    #Pada kode warna merah, sesuaikan width atau lebarnya dengan lebar Blog sobat. Ubah URL-nya dengan URL Blog sobat. Dan tentukan berapa banyak entri yang akan ditampilkan pada Headline News.
    • Terakhir, klik Simpan Template dan lihat hasilnya.

    Artikel terkait : Cara Membuat Headline News di Blog

    Artikel Blog Regi Brader Lainnya :

    47 komentar:

    1. Hadir, mampir gan ke blog saya : http://mahografauzan.blogspot.com

      ReplyDelete
    2. Sob,kok saya gak bisa ya.. cuma muncul tulisan BREAKING NEWS doang, padahal template saya sama kayak sobat.. Tolongg yaa

      ReplyDelete
      Replies
      1. Maaf sobat, mungkin ada kesalahan dalam penulisan script. Sekarang telah saya perbarui, silakan coba lagi.

        Delete
    3. Gagal mas bro. Coba cek di blog saya http://www.oke-reload.blogspot.com

      ReplyDelete
      Replies
      1. Wah, saya coba ulang berhasil kok sob...

        Delete
    4. Oke Gan... Thankss.. Sekarang blog saya sudah bisaaa...

      ReplyDelete
    5. makasih gan...mantab dah..,
      oz napa widget breaking newsnya ada 2 ( atas bawah ),ada yang salah kah...,
      mampir ke gubug ane jg ya gan
      http://maxichasite.blogspot.com/

      ReplyDelete
      Replies
      1. Saya rasa jika pengerjaanya benar hasilnya akan cuma satu, di posisi atas ..

        Delete
    6. thanks infonya sob..
      eh mau nanyak kalau dibuat melayang bisa gk, kyak toolbar gitu.. ^^
      jadi meskipun kita arahin scrool kebawah breking news nya masih keliatan..
      kalau ada caranya mohon penjelasannya..

      ReplyDelete
      Replies
      1. Mungkin ada caranya sob, tapi saya urang tau tuh..

        Delete
    7. Numpang lapak master,, Price 50 rb - 100 rb

      portofolio demo script AGC


      http://script.jatimweb.org
      http://thehackernews.com
      http://id-evinside.blogspot.com

      ( perhatikan artkel dan jumlah posting nya )

      auto generate content support wordpress, pivotx, blogspot, dan cms tertentu. ( harga sudah termasuk hosting tempat script )

      fitur :
      # support buat moodle, BuzzTouch, blogs pot, p ivotx, wordpr ess dan cms tertentu
      # per minggu ratusan content terisi sendiri
      # bisa memilih bahasa dan kategori artikel yang di generate otomatis, jadi sesuai keinginan.
      # sudah termasuk hosting buat script
      # aman tanpa resiko.
      # seo friendly karena artikel cepat mencapai ribuan
      # di bantu cara instal nya sampai bisa,
      # tutorial gratis
      # mendukung script iklan buat pengahasil dollar

      Untuk tutorial gratis hanya buat klien yang bisa ketemu, soal nya sulit kalo dijelaskan
      selengkapnya hubungi,,

      Call only : 087753423315
      pin BB : 31E81478
      fp : https://www.facebook.com/AutoGenerateContent
      Group : https://www.facebook.com/groups/autogeneratecontent/
      ym : jatimweb

      suwoon master..

      ReplyDelete
    8. mantap gan tank's Headline News

      ReplyDelete
    9. knp RSS ane kgk Update :/ :/

      check http://kankyo11.blogspot.ru/

      gimana cara fix na itu.,.???

      ReplyDelete
    10. Sangat membantu sekali, terima kasih.
      Ditunggu kunjungan baliknya :)

      ReplyDelete
    11. mantap bro... berjalan dengan baik...

      ReplyDelete
    12. keren sob...


      sekalian folback y sob !

      ReplyDelete
    13. Salam kenal ,link sobat sudah saya pasang link back ya
      http://johaedi.blogspot.com/
      Terimakasih

      ReplyDelete
      Replies
      1. Wah, terimakasih mas... Tapi saya sudah tidak bertukar link... maaf yaa...

        Delete
    14. di tempat ane ku pasang ndak berhasil gan, feed eror laporannya gemana ya?

      ReplyDelete
    15. udah dicoba tapi ga nimbul gmna gan?

      ReplyDelete
    16. nampaknya saya berhasil sob,, thanks yah atas tutorialnya,, sungguh sangat membantu,, cek di www.hiburdunia.com

      ReplyDelete
    17. banyak banget kodenya gan,apa gk tambah berat tuh gan..?

      ReplyDelete
      Replies
      1. Sebenarnya memang semakin banyak script, semakin berat loading Blog.

        Delete
    18. mantap gan.... kapan2 nulis yang untuk wordpress ya

      ReplyDelete
      Replies
      1. Haha, belum ada niat untuk pakai Wordpress kang.

        Delete
    19. makasih mas, kunjungi juga blog adik ya http://prediksibola888.blogspot.com

      ReplyDelete
    20. Alhamdulillah, berhasil kunjungi ya balik : http://www.salurankajianislam.com/

      ReplyDelete
    21. Berhasil gan, thanks tutorialnya http://anehnymous.blogspot.com/

      ReplyDelete
    22. banyak pelajaran dari blog ini,tiap artikel yang saya cari pasti ada disini, sukses salalu sob
      http://www.duniagame.info/

      ReplyDelete
    23. Makasih gan, ijin ane pakek d blog ane
      http://softwaredotblog.blogspot.com

      ReplyDelete
    24. sangat bermanfaat gan trimakasaih salam kenal http://handexcel.blogspot.com/

      ReplyDelete
    25. saya stuck di langkah 9, ga ada menu header seperti itu di template saya. mohon pencerahannya

      ReplyDelete
      Replies
      1. Kunjungi halaman ini, "http://regibrader-free.blogspot.com/2014/05/cara-membuat-menu-navigasi-melayang-di.html" di sana ada cara mengetahui kode elemen...

        Delete
    26. terima kasih gan,,, triknya bermanfaat bangeett.. jangan lupa mampir ya ke blog ane http://animasigrafiscomputer.blogspot.com/ maklum baru belajar ngeblogg . . hehehe

      ReplyDelete
    27. terima kasih gan saya cari-cari artikel yang kaya gini akhirnya dapet juga ,
      yukk tengok my blog : http://thewitwicky.blogspot.com/

      ReplyDelete
    28. Trimakasih Tutorialnya bro.. Sudah saya adopsi dan saya sesuaikan dengan template blog saya... :)
      Kunjungi Blog saya ya di [http://clever-society.blogspot.com/].. Salam Blogwalking... ;)

      ReplyDelete
    29. oke !! nice post..
      kunjung balik gan !!!

      ReplyDelete
    30. thanks infonya gan :)
      misi completed..

      ReplyDelete
    31. makasih infonya gan mau saya coba , muengkin mau mampir
      ihealthus.blogspot.com

      ReplyDelete
    32. mantap dah artikelnya
      http://acemaxs31.com/obat-kanker-paru-paru/

      ReplyDelete
    33. terima kasih sudah sharing cara membuat headline news... demi menambah cantik tampilan dan juga saya dengar juga dapat meningkatkan traffik rank.. (benar apa tidak.. belum tau)
      Sukses selalu.. ditunggu kehadirannya di blog saya..

      http://miniblogger28.blogspot.com

      ReplyDelete
    34. thank kunjung juga http://soft4fox.blogspot.com/

      ReplyDelete
    35. terima l=kasih salam dari http://noteblogeko.blogspot.com

      ReplyDelete
    36. gan kx di blog saya munculnya diatas ya gan

      ReplyDelete

    Copyright © 2013-2016 Blog Regi Brader - All Right Reserved