KAWAH PAPANDAYAN

Cara Membuat Headline News di Blog Keren

Cara Membuat Headline News di Blog Keren - Cara Memasang Headline News Di Blog. Headline News yang akan sundaboy 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 :

Cara Membuat Headline News di Blog Keren

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(http://3.bp.blogspot.com/-zMXeFmgTWNo/Ud6wE3PxRBI/AAAAAAAACpw/jIkXxSqkCTg/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://www.sundaboy.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://www.sundaboy.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.

Cara Membuat Headline News di Blog Keren - mungkin hanya itu saja yang dapat sundaboy share pada kesempatan kali ini. kalau sahabat mengerti dengan kode CSS silahkan sahabat bisa memodifikasi Headline News sesuai dengan tampilan yang sahabat inginkan. sekian dan terimakasih.. happy Blogging.



Ditulis Oleh : Yudus | Media Sharing Sundaboy

Sahabat sedang membaca tulisan Cara Membuat Headline News di Blog Keren. Yang ditulis oleh sundaboy Grt. Apabila sahabat ingin menyebar luaskan artikel ini untuk kepentingan umum, dimohon untuk menyertakan Link sumber dibawah ini. Untuk Kritik dan sarannya sahabat bisa mengirimkan pada kotak komentar dibawah, atau melalui email sundaboy88@gmail.com. tengkyu

14 komentar:

  1. makasih infonya gan, sangat bermanfaat
    http://augustreinaldo.blogspot.com/

    BalasHapus
  2. udah di pasang sesuai menu tapi gk ada tampilan pada blog ane gan ...??
    http://bitcoin-21.blogspot.com/

    BalasHapus
  3. izin sedot mas dari blog tetangga http://www.codjember.com

    BalasHapus
  4. gan mau tanya gan kok kode ini div id='header' gak ketemu di template blog saya ? thanks

    BalasHapus
  5. cukup rumit, tapi perlu dicoba nih,

    BalasHapus
  6. halo gan, kok beritanya ga muncul?

    BalasHapus
  7. assek, bakalan mantap neh blog ane,
    wkwkwkw
    thanks gan

    BalasHapus
  8. Wah, gan mantep nih infonya makasih banget

    BalasHapus
  9. saya yang div header nyan gk da waktu di cari, gimana mas?

    BalasHapus
  10. makasih atas tutorialnya, its work :)

    boleh deh kunjungi tetepnulis.blogspot.co.id

    BalasHapus
  11. Makasih gan Infonya, sangat membantu.
    sudah ane coba, udah muncul d blog ane, tapi kurangnya satu gan, tampilan saat akses lewat smartphone kok memnjang gtu ya gan gak menyesuaikan sama layar smarphone.
    Solusinya gimna ya gan spaya menyesuaikan layar smarphone.
    Makasih gan.

    BalasHapus

=================================
- Berkomentarlah Yang Sopan
- Tidak Diperkenankan Memasukan Link Aktif Pada Isi Komentar
- Berkomentarlah Sesuai Dengan Content
=================================