Animated News Ticker Recent Posts Blogger With Javascript

Animated News Ticker Recent Posts Blogger With Javascript

Bola Hero Gawai

Animated News Ticker Recent Posts Blogger With Javascript

Animated News Ticker Recent Posts Blogger With Javascript
Jika kita mencari di Google dengan keyword News Ticker for Blogger, maka dipastikan akan susah menemukan tutorial cara membuat news ticker ini yang tanpa Jquery. Bukannya saya alergi dengan Jquery, namun mencoba mencari sebuah widget yang tidak menyebabkan render blocking js untuk template magazine premium yang saya kembangkan dari template Kompi Flexible.

Akhirnya saya menemukan sebuah tutorial membuat rotating recent post dengan javascript, yang saya pikir widget ini memungkinkan untuk dimodifikasi dijadikan sebuah news ticker.

Akhirnya jadilah sebuah news ticker recent post dengan animasi type atau animasi mengetik seperti pada demo ini.


Bagaimana, Anda tertarik untuk mencobanya? Silahkan ikuti tutorial di bawah ini.

Kode CSS
Silahkan simpan kode CSS di bawah ini di atas kode ]]></b:skin> atau </style>


.hot-title,.recent-news{font-family: 'Roboto', sans-serif;box-sizing:border-box;height:40px}
.recent-news{width:100%;background:#ddd;padding:0 20px 0 0;margin:0;line-height:40px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;overflow:hidden;}
.hot-title{display:inline;float:left;width:130px;height:40px;line-height:40px;margin-top:0px;background:#222;font-size:16px;font-weight:500;color:#fff;padding-left:20px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}
.gfg-root{width:100%;height:auto;position:relative;margin:0 auto}
.gfg-title{display:none}
.gfg-entry{display:block;padding:0;margin:0 0 0 140px;height:40px;line-height:40px;}
.gf-title a{text-transform:capitalize;text-decoration:none;color:#333;font-size:16px;font-weight:300;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;width:100%;animation: type 8s steps(60, end)}
.gf-author,.gf-snippet,.gf-spacer,.gfg-list,.gfg-subtitle{display:none!important}
.gf-relativePublishedDate{display:inline;float:right;margin-top:-40px;font-size:16px;font-weight:300;}
#feedGadget{font-size:16px;font-weight:300;}
@keyframes type{
  from { width: 0; }
}
@media screen and (max-width:800px){
    .gf-relativePublishedDate{display:none!important}
}
@media screen and (max-width:480px){
    .recent-news{display:none!important}
}

Silahkan sesuaikan kode font-family: 'Roboto', sans-serif; dengan font yang Anda gunakan.

Kode JavaScript
Simpan kode javascript di bawah ini di atas kode </body>


<script>
//<![CDATA[
function GFdynamicFeedControl(t,e,i){if(this.nodes={},this.collapseElements=[],this.feeds=[],this.results=[],"string"==typeof t)this.feeds.push({url:t});else if("object"==typeof t)for(var s=0;s<t.length;s++){var n=t[s],o={};if("string"==typeof n)o.url=t[s];else if("object"==typeof n&&(o=t[s],o&&o.title)){var r=o.title;o.title=r.replace(/</g,"&lt;").replace(/>/g,"&gt;")}this.feeds.push(o)}"string"==typeof e&&(e=document.getElementById(e)),this.parseOptions_(i),this.setup_(e)}GFdynamicFeedControl.DEFAULT_NUM_RESULTS=4,GFdynamicFeedControl.DEFAULT_FEED_CYCLE_TIME=18e5,GFdynamicFeedControl.DEFAULT_DISPLAY_TIME=5e3,GFdynamicFeedControl.DEFAULT_FADEOUT_TIME=1e3,GFdynamicFeedControl.DEFAULT_TRANSISTION_STEP=40,GFdynamicFeedControl.DEFAULT_HOVER_TIME=100,GFdynamicFeedControl.prototype.parseOptions_=function(t){if(this.options={numResults:GFdynamicFeedControl.DEFAULT_NUM_RESULTS,feedCycleTime:GFdynamicFeedControl.DEFAULT_FEED_CYCLE_TIME,linkTarget:google.feeds.LINK_TARGET_BLANK,displayTime:GFdynamicFeedControl.DEFAULT_DISPLAY_TIME,transitionTime:GFdynamicFeedControl.DEFAULT_TRANSISTION_TIME,transitionStep:GFdynamicFeedControl.DEFAULT_TRANSISTION_STEP,fadeOutTime:GFdynamicFeedControl.DEFAULT_FADEOUT_TIME,scrollOnFadeOut:!0,pauseOnHover:!0,hoverTime:GFdynamicFeedControl.DEFAULT_HOVER_TIME,autoCleanup:!0,transitionCallback:null,feedTransitionCallback:null,feedLoadCallback:null,collapseable:!1,sortByDate:!1,horizontal:!1,stacked:!1,title:null},t)for(var e in this.options)"undefined"!=typeof t[e]&&(this.options[e]=t[e]);this.options.stacked||(this.options.collapseable=!1),this.options.displayTime=Math.max(200,this.options.displayTime),this.options.fadeOutTime=Math.max(0,this.options.fadeOutTime);var i=this.options.fadeOutTime/this.options.transitionStep;this.fadeOutDelta=Math.min(1,1/i),this.started=!1},GFdynamicFeedControl.prototype.setup_=function(t){if(null!=t){this.nodes.container=t,window.ActiveXObject?this.ie=this[window.XMLHttpRequest?"ie7":"ie6"]=!0:!document.childNodes||document.all||navigator.taintEnabled?null!=document.getBoxObjectFor&&(this.gecko=!0):this.safari=!0,this.feedControl=new google.feeds.FeedControl,this.feedControl.setLinkTarget(this.options.linkTarget),this.expected=this.feeds.length,this.errors=0;for(var e=0;e<this.feeds.length;e++){var i=new google.feeds.Feed(this.feeds[e].url);i.setResultFormat(google.feeds.Feed.JSON_FORMAT),i.setNumEntries(this.options.numResults),i.load(this.bind_(this.feedLoaded_,e))}}},GFdynamicFeedControl.prototype.bind_=function(t){var e=this,i=[].slice.call(arguments,1);return function(){var s=i.concat([].slice.call(arguments));return t.apply(e,s)}},GFdynamicFeedControl.prototype.feedLoaded_=function(t,e){return this.options.feedLoadCallback&&this.options.feedLoadCallback(e),e.error?void(++this.errors>=this.expected&&(this.nodes.container.innerHTML="Feed"+(this.expected>1?"s ":" ")+"could not be loaded.")):(this.feeds[t].title&&(e.feed.title=this.feeds[t].title),this.results.push(e),void(this.started?!this.options.horizontal&&this.options.stacked&&this.addResult_(this.results.length-1):(this.createSubContainers_(),this.displayResult_(0))))},GFdynamicFeedControl.prototype.sortByDate_=function(t,e,i){for(var s=this.results[t].feed.entries[0].publishedDate,n=Date.parse(s),o=null,r=0;r<this.results.length;r++){var l=this.results[r].feed.entries[0].publishedDate,a=Date.parse(l);if(n>a){o=r;break}}if(null==o)return this.nodes.root.appendChild(e),this.nodes.root.appendChild(i),void this.createListEntries_(t,i);var d=2+2*o,h=d+2,c=t+1,p=this.nodes.root.childNodes,u=p[d];this.nodes.root.insertBefore(e,u),this.nodes.root.insertBefore(i,u),this.results.splice(o,0,this.results[t]),this.results.splice(c,1);var y=p[h].nextSibling.childNodes;this.createListEntries_(o,i),0==o&&this.displayResult_(0),o+=1;for(var r=h;r<p.length;r+=2){for(var y=p[r].nextSibling.childNodes,f=0;f<y.length;f++)y[f].onmouseover=this.bind_(this.listMouseOver_,o,f),y[f].onmouseout=this.bind_(this.listMouseOut_,o,f);o++}},GFdynamicFeedControl.prototype.addResult_=function(t){var e=this.results[t],i=this.createDiv_("gfg-subtitle");this.setTitle_(e.feed,i);var s=this.createDiv_("gfg-list");if(this.options.collapseable){var n=document.createElement("div");s.style.display="none",n.className="gfg-collapse-closed",i.appendChild(n),n.onclick=this.toggleCollapse(this,s,n),this.collapseElements.push({list:s,collapse:n})}var o=document.createElement("div");o.className="clearFloat",i.appendChild(o),this.options.sortByDate?this.sortByDate_(t,i,s):(this.nodes.root.appendChild(i),this.nodes.root.appendChild(s),this.createListEntries_(t,s))},GFdynamicFeedControl.prototype.displayResult_=function(t){this.resultIndex=t;var e=this.results[t];this.options.feedTransitionCallback&&this.options.feedTransitionCallback(e),this.options.title?this.setPlainTitle_(this.options.title):this.setTitle_(e.feed),this.clearNode_(this.nodes.entry),this.started&&!this.options.horizontal&&this.options.stacked?this.entries=e.feed.entries:this.createListEntries_(t,this.nodes.list),this.displayEntries_()},GFdynamicFeedControl.prototype.setPlainTitle_=function(t,e){var i=e||this.nodes.title;i.innerHTML=t},GFdynamicFeedControl.prototype.setTitle_=function(t,e){var i=e||this.nodes.title;this.clearNode_(i);var s=document.createElement("a");s.target=google.feeds.LINK_TARGET_BLANK,s.href=t.link,s.className="gfg-collapse-href",s.innerHTML=t.title,i.appendChild(s)},GFdynamicFeedControl.prototype.toggleCollapse=function(t,e,i){return function(){for(var s=t.collapseElements,n=0;n<s.length;n++){var o=s[n];o.list.style.display="none",o.collapse.className="gfg-collapse-closed"}e.style.display="block",i.className="gfg-collapse-open"}},GFdynamicFeedControl.prototype.createListEntries_=function(t,e){var i=this.results[t].feed.entries;this.clearNode_(e);for(var s=0;s<i.length;s++){this.feedControl.createHtml(i[s]);var n="gfg-listentry ";n+=s%2?"gfg-listentry-even":"gfg-listentry-odd";var o=this.createDiv_(n),r=this.createLink_(i[s].link,i[s].title,this.options.linkTarget);o.appendChild(r),this.options.pauseOnHover&&(o.onmouseover=this.bind_(this.listMouseOver_,t,s),o.onmouseout=this.bind_(this.listMouseOut_,t,s)),i[s].listEntry=o,e.appendChild(o)}e==this.nodes.list&&(this.entries=i)},GFdynamicFeedControl.prototype.displayEntries_=function(){this.entryIndex=0,this.displayCurrentEntry_(),this.setDisplayTimer_(),this.started=!0},GFdynamicFeedControl.prototype.displayNextEntry_=function(){if(this.options.autoCleanup&&this.isOrphaned_())return void this.cleanup_();if(++this.entryIndex>=this.entries.length){if(this.results.length>1)return++this.resultIndex>=this.results.length&&(this.resultIndex=0),void this.displayResult_(this.resultIndex);this.entryIndex=0}this.options.transitionCallback&&this.options.transitionCallback(this.entries[this.entryIndex]),this.displayCurrentEntry_(),this.setDisplayTimer_()},GFdynamicFeedControl.prototype.displayCurrentEntry_=function(){if(this.clearNode_(this.nodes.entry),this.current=this.entries[this.entryIndex].html,this.current.style.top="0px",this.nodes.entry.appendChild(this.current),this.createOverlay_(),this.options.collapseable){for(var t=null,e=0;e<this.results.length;e++)this.results[e].feed.entries==this.entries&&(t=this.results[e].feed.title);for(var i=this.collapseElements,e=0;e<i.length;e++){var s=i[e],n=s.collapse.previousSibling.innerHTML,o=s.collapse;t==n&&(this.ie?o.click():o.onclick())}}if(this.currentList){var r="gfg-listentry ";r+=this.currentListIndex%2?"gfg-listentry-even":"gfg-listentry-odd",this.currentList.className=r}this.currentList=this.entries[this.entryIndex].listEntry,this.currentListIndex=this.entryIndex;var r="gfg-listentry gfg-listentry-highlight ";r+=this.currentListIndex%2?"gfg-listentry-even":"gfg-listentry-odd",this.currentList.className=r},GFdynamicFeedControl.prototype.listMouseHover_=function(t,e){var i=this.results[t],s=i.feed.entries[e].listEntry;s.selectTimer=null,this.clearTransitionTimer_(),this.clearDisplayTimer_(),this.resultIndex=t,this.entries=i.feed.entries,this.entryIndex=e,this.displayCurrentEntry_()},GFdynamicFeedControl.prototype.listMouseOver_=function(t,e){var i=this.results[t],s=i.feed.entries[e].listEntry,n=this.bind_(this.listMouseHover_,t,e);s.selectTimer=setTimeout(n,this.options.hoverTime)},GFdynamicFeedControl.prototype.listMouseOut_=function(t,e){var i=this.results[t],s=i.feed.entries[e].listEntry;s.selectTimer?(clearTimeout(s.selectTimer),s.selectTimer=null):this.setDisplayTimer_()},GFdynamicFeedControl.prototype.entryMouseOver_=function(t){this.clearDisplayTimer_(),this.transitionTimer&&(this.clearTransitionTimer_(),this.displayCurrentEntry_())},GFdynamicFeedControl.prototype.entryMouseOut_=function(t){this.setDisplayTimer_()},GFdynamicFeedControl.prototype.createOverlay_=function(){if(null!=this.current){if(null==this.overlay){var t=this.createDiv_("gfg-entry");t.style.position="absolute",t.style.top="0px",t.style.left="0px",this.overlay=t}this.setOpacity_(this.overlay,0),this.nodes.entry.appendChild(this.overlay)}},GFdynamicFeedControl.prototype.setDisplayTimer_=function(){this.displayTimer&&this.clearDisplayTimer_();var t=this.bind_(this.setFadeOutTimer_);this.displayTimer=setTimeout(t,this.options.displayTime)},GFdynamicFeedControl.timeNow=function(){var t=new Date;return t.getTime()},GFdynamicFeedControl.prototype.fadeOutEntry_=function(){if(this.overlay){var t=this.fadeOutDelta,e=this.options.transitionStep,i=GFdynamicFeedControl.timeNow(),s=i-this.lastTick;this.lastTick=i,t*=s/e;var n=this.overlay.opacity+t;if(this.setOpacity_(this.overlay,n),this.options.scrollOnFadeOut&&n>.5){var o=2*(n-.5),r=Math.round(this.current.offsetHeight*o);this.current.style.top=r+"px"}if(1>n)return}this.clearTransitionTimer_(),this.displayNextEntry_()},GFdynamicFeedControl.prototype.setFadeOutTimer_=function(){this.clearTransitionTimer_(),this.lastTick=GFdynamicFeedControl.timeNow();var t=this.bind_(this.fadeOutEntry_);this.transitionTimer=setInterval(t,this.options.transitionStep)},GFdynamicFeedControl.prototype.clearTransitionTimer_=function(){this.transitionTimer&&(clearInterval(this.transitionTimer),this.transitionTimer=null)},GFdynamicFeedControl.prototype.clearDisplayTimer_=function(){this.displayTimer&&(clearTimeout(this.displayTimer),this.displayTimer=null)},GFdynamicFeedControl.prototype.createSubContainers_=function(){var t=this.nodes,e=this.nodes.container;if(this.clearNode_(e),this.options.horizontal?(e=this.createDiv_("gfg-horizontal-container"),t.root=this.createDiv_("gfg-horizontal-root"),this.nodes.container.appendChild(e)):t.root=this.createDiv_("gfg-root"),t.title=this.createDiv_("gfg-title"),t.entry=this.createDiv_("gfg-entry"),t.list=this.createDiv_("gfg-list"),t.root.appendChild(t.title),t.root.appendChild(t.entry),!this.options.horizontal&&this.options.stacked){var i=this.createDiv_("gfg-subtitle");if(t.root.appendChild(i),this.setTitle_(this.results[0].feed,i),this.options.collapseable){var s=document.createElement("div");s.className="gfg-collapse-open",i.appendChild(s),s.onclick=this.toggleCollapse(this,t.list,s),this.collapseElements.push({list:t.list,collapse:s}),t.list.style.display="block"}var n=document.createElement("div");n.className="clearFloat",i.appendChild(n)}t.root.appendChild(t.list),e.appendChild(t.root),this.options.pauseOnHover&&(t.entry.onmouseover=this.bind_(this.entryMouseOver_),t.entry.onmouseout=this.bind_(this.entryMouseOut_)),this.options.horizontal&&(t.branding=this.createDiv_("gfg-branding"),google.feeds.getBranding(t.branding,google.feeds.VERTICAL_BRANDING),e.appendChild(t.branding))},GFdynamicFeedControl.prototype.clearNode_=function(t){if(null!=t)for(var e;e=t.firstChild;)t.removeChild(e)},GFdynamicFeedControl.prototype.createDiv_=function(t,e){var i=document.createElement("div");return e&&(i.innerHTML=e),t&&(i.className=t),i},GFdynamicFeedControl.prototype.createLink_=function(t,e,i){var s=document.createElement("a");return s.href=t,s.innerHTML=e,i&&(s.target=i),s},GFdynamicFeedControl.prototype.clearResults_=function(){for(var t=0;t<this.results.length;t++)for(var e=this.results[t],i=e.feed.entries,t=0;t<i.length;t++){var s=i[t];s.html=null,s.listEntry.onmouseover=null,s.listEntry.onmouseout=null,s.listEntry.selectTimer&&(clearTimeout(s.listEntry.selectTimer),s.listEntry.selectTimer=null),s.listEntry=null}},GFdynamicFeedControl.prototype.isOrphaned_=function(){var t=this.nodes.root,e=!1;return t&&t.parentNode?this.options.horizontal&&!t.parentNode.parentNode&&(e=!0):e=!0,e},GFdynamicFeedControl.prototype.cleanup_=function(){this.started=!1,this.clearDisplayTimer_(),this.clearTransitionTimer_(),this.clearResults_(),this.clearNode_(this.nodes.root),this.nodes.container=null},GFdynamicFeedControl.prototype.setOpacity_=function(t,e){if(null!=t){if(e=Math.max(0,Math.min(1,e)),0==e?"hidden"!=t.style.visibility&&(t.style.visibility="hidden"):"visible"!=t.style.visibility&&(t.style.visibility="visible"),this.ie){var i=Math.round(100*e);t.style.filter="alpha(opacity="+i+")"}t.style.opacity=t.opacity=e}},GFgadget=GFdynamicFeedControl;
function showGadget() {var feeds = [{title:'List',url:'http://blogmu.blogspot.com/feeds/posts/default/-/Blogger?redirect=false&start-index=1&max-results=10'},];
new GFdynamicFeedControl(feeds, 'feedGadget',{title: '', numResults : 10, displayTime : 5000, hoverTime : 500});} google.load("feeds", "1");
google.setOnLoadCallback(showGadget);
//]]>
</script>

Ganti http://blogmu.blogspot.com/ dengan URL blog Anda.
Ganti Blogger dengan label yang ingin Anda tampilkan, jika ingin featured post yang akan ditampilkan, silahkan hapus kode /-/Blogger
displayTime : 5000 untuk mengatur kecepatan pergantian title post, jika ingin tampil lebih lama silahkan perbesar angkanya.
News ticker di atas menampilkan 10 buah recent posts, jika ingin lebih silahkan ganti angka 10 pada kode numResults : 10

Kode HTML
Silahkan simpan kode HTML di bawah ini di tempat di mana Anda ingin menampilkan news ticker-nya, misalnya di atas atau di bawah header blog.


    <div class="recent-news">
    <div class="hot-title">Recent News:</div>
<div id="feedGadget">&amp;nbsp; Loading...</div>
    </div>

Update
Sebenarnya script ini terintegrasi dengan Google API Loader atau jsapi, namun setelah saya coba di template Blogger yang saya buat, saya tidak perlu memasang jsapi ini seperti di sini. Namun jika ternyata di blog Anda news ticker ini tidak jalan, silahkan coba simpan script ini di atas kode </body>.


<script>
//<![CDATA[
(function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = '//www.google.com/jsapi'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();
//]]>
</script>

Selamat mencoba....

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

0 Comment

Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×