Cara Membuat Latest Updates di Blog
Assalamualaikum sobat.Kali ini saya akan berbagi trik yang sangat sederhana.Trik ini saya ambil dari template Woles yang di desain oleh Mas sugeng.Latest Updates ini gunanya untuk menampilkan post terbaru yang kamu post.yah untuk lihat demonya silahkan lihat diatas.Gimana ? lumayan bagus kan.Untuk lebih jelas silahkan lihat screenshotnya.
Ingin Tahu Cara Membuatnya bagaimana ? Silahkan bahas dan simak baik-baik tips berikut.
Gimana ? Susah kagak ? kalau susah silahkan request di kotak komentar yah.
sekian dan terimah kasih
Ingin Tahu Cara Membuatnya bagaimana ? Silahkan bahas dan simak baik-baik tips berikut.
CSS
/* HEADLINE */
.newspic{
width: 1561px;
background: #f5f5f5;
float: left;
font-size: 11px;
overflow: hidden;
margin: 0 8px;
padding: 0;
height: 28px;
-webkit-box-shadow: 0px 0px 10px #2980b9;
-mox-box-shadow: 0px 0px 10px #2980b9;
-ms-box-shadow: 0px 0px 10px #2980b9;
-o-box-shadow: 0px 0px 10px #2980b9;
box-shadow: 0px 0px 10px #2980b9;
border: 2px solid #2980b9;
border-top: none;
line-height: 28px;
border-bottom: 2px solid #2980b9;
margin-left: 0;}
span.breakingnews{
background:#2980b9;
text-transform:none;
color:#fff;
float:left;
line-height:28px;
margin:0 8px 0 0;
padding:0 8px;
}
.news a:link,.news a:visited{
color:#000;text-decoration:none;
}
.news a:hover{
color:#0099cc;text-decoration:underline;
}
.labelfield{
color:#0099cc;
font-size:100%;
}
.datefield{
color:#aaa;
font-weight:normal;
}
#example1{
float:left;
overflow:hidden;
padding:0;
text-align:left;
}
#example1 img{
display:none;
}
code{
color:#0099CC;
}
example1 a:link,#example1 a:visited{
color:#0099cc;
text-decoration:none;
}
#example1 a:hover{
color:#555;
text-decoration:none;
}
HTML
<div class='newspic'>
<span class='breakingnews'>Latest Updates</span>
<script type='text/javascript'>
var cssfeed=new gfeedrssticker("example1", "example1class", 5000, "_new")
cssfeed.addFeed("Feed Blog", "http://zetta-zone.blogspot.com/feeds/posts/default") //Specify "label" plus URL to RSS feed
cssfeed.displayoptions("date") //show the specified additional fields
cssfeed.setentrycontainer("span") //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 class='clear'/>
jQuery
<!-- Headline -->
<script src='http://www.google.com/jsapi?key=ABQIAAAAUMsU2d40bO1-m8DeADFRexTdcQS31_Y0TkToW9tE1XWPEnv6YBSa1QfZaAr4GJ8-AZkWddpnW9Y0hA'/>
<script type='text/javascript'>
//<![CDATA[
var gfeedfetcher_loading_image="http://3.bp.blogspot.com/-YDemUmb6mk8/Ub9mpleHHOI/AAAAAAAACCc/u_rMQ9wdYlU/s1600/9.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 alt="loading" title="loading" 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="http://3.bp.blogspot.com/-YDemUmb6mk8/Ub9mpleHHOI/AAAAAAAACCc/u_rMQ9wdYlU/s1600/9.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>
Cara Pemasangan
- Untuk Cssnya Letakan di Atas kode ]]></b:skin>
- Untuk HTML Silahkan Letakan di atas kode Wrapper Kalian
- Untuk jQuery Silahkan diletakan diatas kode </head>
sekian dan terimah kasih
31 komentar
wah keren sob!, mantab deh
Balas- salam damai
nice artikel sob !!
BalasThanks sob... ^_^
BalasMakasih :)
Balasnice artikel,thanks sob,salam kenal
BalasOke Sob..^_^
BalasMantap sobat .. biar semua tau postingan baru
Balasoke.. :)
Balaswajib di coba ini, thanks infonya
Balasoke sob...
Balaswah keren sob!, mantab deh,tapi ane dah punya :3
BalasOke Sob.. ^_^
Balassilahkan bro.. ^_^
Balaswow mantab!! izin coba om :)
Balassilahkan om ^_^
BalasThanks ya gan infonya, boleh nih dicoba
Balasoke deh.. :D
BalasWaw , Keren Bro ! Terima Kasih Atas Tutornya
Balasoke bro, sering mampir disini yah ^_^
Balasnumpang coba ya gan, mantep nih gan
BalasOke gan jangna lupa untuk dicoba yah ^_^
BalasSilahkan gan..
Balasmakasih juga yah.. ^_^
Silahkan Gan.. ^_^
Balaswow ... saya mau nyoba boleh ngga??
Balasdan nice postingannyq
kayak berita gitu ya .. gan boleh juga nih di coba ..
BalasWah keren Latest Updatesnya. kapan-kapan cobain ah. Thanks gan
BalasGan aq ada yang gak ngerti.. maksudnya kode wrapper itu yang mana ya??
Balasvisit back: http://intandorama.blogspot.com
waduh,,koq tahun nya 2559..cara memperbaikinya gimana gan...???
BalasSeeep thank for Information...
BalasTanah Kavling Pontianak
thanks gan tutor nya, ane coba dulu... kalo ga bisa ntr ane tanyain di mari deh...
BalasTerima Kasih Telah Berkunjung Ke Blog yang Sederhana ini.Jika Anda ingin berkomentar mohon jangan Out Of Topic (OOT) dan sebarkan link-link porno dan sara.Sekian, Terimah Kasih.