Sebelum itu keyoy mau kasih tau dulu nih buat SOMASIK kalau sanya HTML dan CSSnya hasil nyolong dari blog tetangga sebelah nih dengan FIREBUG(addons Mozilla). mungkin tetangga belum tau bahwa HTML dan CSSnya dicuri. hahahaha
Tapi menurut aku sah-sah aja kok kan FIREBUG sendiri di legal, di storenya Chrome juga ada tuh berarti boleh donk nyuri-nyuri scriptnya :D
Nah, langsung aja yang mau buat silakan baca terus yang gak mau silakan angkat kaki dari tempat ini(hahaha becanda).
Pertama kamu harus ke Edit HTML
Terus tekan Expand Template Widget
Udah belom? kalau udah lanjut nih, Lanjut ya?
Habes itu kamu cari dulu ini ]]></b:skin> ,kalau mau cara mudahnya tekan Ctrl + F. kalau udah ketemu sekarang kamu masukin script CSS dibawah ini diatas ]]></b:skin>
.newspic {
background: url("http://4.bp.blogspot.com/-a-mytFwSxAQ/ThFuN_y0gjI/AAAAAAAABJw/_F_anpC_Ee4/s1600/bg_navbottom.png") repeat-x scroll 0 0 transparent;
height: 28px;
margin: 0 auto;
width: 980px;
}
.news {
clear: both;
color: #666666;
font-family: Arial;
font-size: 11px;
line-height: 1.4em;
margin: 0 auto;
overflow: hidden;
text-align: left;
width: 970px;
}
.news a:link, .news a:visited {
color: #2E2E2E;
text-decoration: none;
}
.news a:hover {
color: #FFFFFF;
text-decoration: underline;
}
Udah di masukin kan? apa ada kendala? keyoy rasa gak mungkin ada kendala jadi kita lanjut aja kali ya tutorialnya.
Sekarang kamu masukin script dibawah ini diatas <div id='outer-wrapper'> / dibawah menu Navigation kamu tapi tergantung kamu juga mau naruhnya dimana sich tapi kalau keyoy naruhnya di bawah itu jadi pas seperti gambarnya diatas.
<div class='newspic'>
<div class='news'>
<div style='float:left;padding:5px 5px 5px 2px;font:bold 14px Arial;color:#333;text-transform:none;'> Artikel Terbaru : </div>
<div style='float:left;width:800px;padding:5px 0; position:relative; overflow:hidden;'><script type='text/javascript'>
var cssfeed=new gfeedrssticker("example1", "example1class", 4000, "_new")
cssfeed.addFeed("Berita Terbaru", "http://www.majalahasik.com/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(20, "date") //Show 10 entries, sort by date
cssfeed.entries_per_page(1)
cssfeed.init()
</script>
</div>
<div style='clear:both;'/>
</div></div>
Ganti www.majalahasik.com dengan alamat blog kamu
Selesai dech sekarang save template kamu dan lihat perubahannya tapi kalau kamu kurang yakin jangan save dulu tekan Pratinjau aja dulu untuk melihat template sebelum di save.
Waduch maaf nih buat SOMASIK ternyata keyoy melakukan kesalahan yang fatal ternyata ada script yang kelupaan makanya sekarang keyoy mau nambah scriptnya
<script src='http://www.google.com/jsapi?key=ABQIAAAAraXZAs3851GvDKvOsmoY4xQm79Us7a7AC9wZIMVkiI-gKnT4UBReJSNtstXHBirdgNwsJck7xxq0cw'/>
<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+'" /> Harap Menunggu Inilah artikel baru di MajalahAsik.com';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>":"";gfeedfetcher._sortarray(a,this.sortstring);for(var c=0;c<a.length;c++){var d='<b><a href="'+a[c].link+'" target="'+this.linktarget+'" class="titlefield">'+a[c].title+"</a></b>";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+f+this.itemcontainer.replace("<","</")}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>":"";for(var e=0;e<d.length;e++){var h='<b><a href="'+d[e].link+'" target="'+g+'" class="titlefield">'+d[e].title+"</a></b>";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+a+f.replace("<","</")}c+=(f=="<li>")?"</ul>":"";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: #000;}
.labelfield{ /*CSS for label field in general*/
color:#666;font-size: 100%;}
.datefield{ /*CSS for date field in general*/
color:#333;font-size: 100%;}
#example1{ /*Demo 1 main container*/
height: ancho;
font:normal 14px Arial;
text-align:left;
code{ /*CSS for insructions*/
color: #000;}
</style>
Ganti kode Google api ABQIAAAAraXZAs3851GvDKvOsmoY4xQm79Us7a7AC9wZIMVkiI-gKnT4UBReJSNtstXHBirdgNwsJck7xxq0cw dengan kode google api kamu caranya kesini dulu API key Google Code dan ambil kode apinya pasang ditempat yang udah keyoy bilang tadi. Selesai dech :D
