[Tutorial] Cara Membuat News Update atau Headline News di Blog

- [Tutorial]  Cara Membuat News Update atau Headline News di Blog Eits.... ketemu lagi. jangan sampe bosan untuk membaca di sini ya......

-[Tutorial] Cara Membuat News Update atau Headline News di Blog


Eits.... ketemu lagi. jangan sampe bosan untuk membaca di sini ya... :D
Setelah sebelumnya sempat membuat postingan tentang Cara Membuat Kotak Facebook Tersembunyi dan Auto Hidden

Pada kesempatan kali ini juga ana ingin membagi pengetahuan ana mengenai Cara Membuat News Update atau Headline News di Blog.  Untuk contoh dapat melihat langsung pada blog ini.




News Update atau Headline News cukup terkenal pada situs-situs berita. Hal ini digunakan agar pembaca dapat mengetahui langsung apa yang telah di update pada situs tersebut.  Nah... pada blog juga sudah dapat digunakan nih... tertarik untuk memasangnya??

Ini langkah-langkah Cara Membuat News Update atau Headline News di Blog :

1.    seperti biasa Login ke Blogger

2.    Pilih Template > Edit HTML > Lanjutkan
   (Jangan lupa centang Expand Template Widget)

3.    Cari kode ]]></b:skin>
(Untuk memudahkan tekan aja CTRL + F untuk mencarinya)

4.    Copy kode di bawah ini dan pastekan tepat di atas kode ]]></b:skin>


.newspic{background:#000 url(http://2.bp.blogspot.com/-j3VQrEyxYco/Tzh17nW6ndI/AAAAAAAAAOU/W-evUUOLOPc/s1600/bg_news.png) no-repeat top center;width:970px;margin:0 auto;padding:0 auto;height:26px}
.news{width:970px;margin:0 auto;padding:0 auto;line-height:1.4em;text-align:left;font-family:Arial;font-size:11px;color:#ddd;overflow:hidden;clear:both}
.news a:link,.news a:visited{color:#ddd;text-decoration:none}
.news a:hover{color:#fff;text-decoration:underline}

5.    Kemudian copy kode di bawah ini dan pastekan tepat di bawah kode ]]></b:skin>


<script src='http://www.google.com/jsapi?key=ABQIAAAA4qkT5i26SQ6NmgJd5KQemhRQ_a6zv5_Bim3H_GL4gaueIFZ15xRdt8jcAUk8ZHokIVo-TBZgYVbkzw'/>
<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+'"></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+'" /> Retrieving RSS feed(s)';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+'">'+a[c].title+"</a>";var b=/label/i.test(this.showoptions)?'<span>['+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+'">'+d[e].title+"</a>";var j=/label/i.test(b)?'<span>['+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:#666;font-size: 100%;}
.datefield{ /*CSS for date field in general*/
color:#eee;font:normal 13px Arial;}
#example1{ /*Demo 1 main container*/
width: 800px;
height: 14px;
border: 0px solid #aaa;
padding: 0px;
font:bold 13px Arial;
text-transform:none;
text-align:left;
background-color:transparent;}
code{ /*CSS for insructions*/
color: #000;}
#example1 a:link, #example1 a:visited {color:#FFC932;text-decoration:none;}
#example1 a:hover {color:#fff;text-decoration:none;}
.newspic{background:#000 url(http://2.bp.blogspot.com/-j3VQrEyxYco/Tzh17nW6ndI/AAAAAAAAAOU/W-evUUOLOPc/s1600/bg_news.png) no-repeat top center;width:970px;margin:0 auto;padding:0 auto;height:26px}.news{width:970px;margin:0 auto;padding:0 auto;line-height:1.4em;text-align:left;font-family:Arial;font-size:11px;color:#ddd;overflow:hidden;clear:both}.news a:link,.news a:visited{color:#ddd;text-decoration:none}.news a:hover{color:#fff;text-decoration:underline}
</style>

6.    Cari kode  <div id=’main-wrapper’>

7.    Copy kode di bawah ini dan pastekan tepat di atas kode <div id=’main-wrapper’>


<div class='newspic'>
<div class='news'>
<div style='float:left;margin-left:10px;padding:5px 60px 5px 0;font:bold 14px Arial;color:#333;text-transform:none;'>
News Update :
</div>
 
<div style='float:left;width:800px;padding:4px 0; position:relative; overflow:hidden;'>
<script type='text/javascript'>
var cssfeed=new gfeedrssticker("example1", "example1class", 4000, "_new")
cssfeed.addFeed("Tutorial Blog", "URLSOBAT/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>

NOTE :

-Kata "News Update :" dapat sobat ganti dengan kata yang lain seperti "Headline   News"
- Ganti tulisan "URLSOBAT" dengan url blog yang sobat miliki.
9.    Setelah selesai simpan template dan lihat hasilnya

O ya... pada kode yang ada pada langkah 7. tidak harus diletakkan diatas kode <div id=’main-wrapper’>,  dapat sobat sesuaikan dengan template yang digunakan.

Selamat mencoba, 
Demikian Cara Membuat News Update atau Headline News di Blog.
Apabila menemukan kegagalan dapat berkomentar di postingan ini.
Semoga bermanfaat dan semoga berhasil.
Salam sukses... :-)


COMMENTS

BLOGGER: 4
Loading...

Nama

Artikel,66,Cerita singkat,82,Java,12,SEO,15,Tahukah sobat??,21,Tips dan Trik,15,Tips.....n' Trick.....,14,Tutorial,20,Tutorial Blogger,50,
ltr
item
Blog Salman Syuhada: [Tutorial] Cara Membuat News Update atau Headline News di Blog
[Tutorial] Cara Membuat News Update atau Headline News di Blog
http://2.bp.blogspot.com/-kJEwfeKtpZQ/UCqxdyz-UTI/AAAAAAAAB1U/u32F0rV_Eks/s640/news.jpg
http://2.bp.blogspot.com/-kJEwfeKtpZQ/UCqxdyz-UTI/AAAAAAAAB1U/u32F0rV_Eks/s72-c/news.jpg
Blog Salman Syuhada
http://blog.salmansyuhada.com/2012/08/cara-membuat-news-update-atau-headline.html
http://blog.salmansyuhada.com/
http://blog.salmansyuhada.com/
http://blog.salmansyuhada.com/2012/08/cara-membuat-news-update-atau-headline.html
true
5369818979434965955
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy