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 menciptakan news ticker ini yang tanpa Jquery. Bukannya aku alergi dengan Jquery, namun mencoba mencari sebuah widget yang tidak menjadikan render blocking js untuk template magazine premium yang aku kembangkan dari template Kompi Flexible.

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

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

DEMO

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

Kode CSS
Silahkan simpan arahan 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 arahan font-family: 'Roboto', sans-serif; dengan font yang Anda gunakan.

Kode JavaScript
Simpan arahan javascript di bawah ini di atas arahan </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, kalau ingin featured post yang akan ditampilkan, silahkan hapus arahan /-/Blogger
displayTime : 5000 untuk mengatur kecepatan pergantian title post, kalau ingin tampil lebih usang silahkan perbesar angkanya.
News ticker di atas menampilkan 10 buah recent posts, kalau ingin lebih silahkan ganti angka 10 pada arahan numResults : 10

Kode HTML
Silahkan simpan arahan HTML di bawah ini di daerah di mana Anda ingin menampilkan news ticker-nya, contohnya 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 sesudah aku coba di template Blogger yang aku buat, aku tidak perlu memasang jsapi ini menyerupai di sini. Namun kalau ternyata di blog Anda news ticker ini tidak jalan, silahkan coba simpan script ini di atas arahan </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....
Sumber https://www.kompiajaib.com/

Share this post