Last active
April 14, 2017 01:40
-
-
Save dimaslanjaka/04bcad6b42c508cfed6d95f8b62cd688 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html ⚡> | |
<head> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> | |
<link href='' rel='canonical'/> | |
<style amp-custom>#table-outer{ | |
padding:7px 10px; | |
margin:0 auto} | |
#table-outer table{ | |
width:auto; | |
margin:0 auto} | |
#table-outer form{ | |
font:inherit} | |
#table-outer label{ | |
display:block; | |
text-align:right; | |
margin:0 10px 0 0; | |
padding:4px 0 0} | |
#table-outer select[disabled]{ | |
opacity:.4} | |
#post-searcher{ | |
display:block; | |
margin:0; | |
padding:0} | |
#table-outer input,#table-outer select{ | |
width:100%; | |
border:1px solid #dedede; | |
border-radius:5px; | |
margin:0; | |
padding:5px; | |
font-family:Roboto,sans-serif; | |
font-size:16px; | |
font-weight:500; | |
text-transform:capitalize; | |
outline:0; | |
color:#333; | |
-moz-box-sizing:border-box; | |
-webkit-box-sizing:border-box; | |
box-sizing:border-box} | |
#table-outer select option{ | |
min-height:1.4em} | |
#table-outer input#feed-q{ | |
padding:5px 10px} | |
#feed-container{ | |
background:#fff; | |
display:block; | |
clear:both; | |
margin:0; | |
padding:0; | |
list-style:none; | |
overflow:hidden; | |
position:relative; | |
border-top:none} | |
#feed-container li{ | |
list-style:none; | |
margin:0; | |
padding:0; | |
border-top:1px solid #eee; | |
color:#555; | |
width:auto; | |
float:left; | |
display:inline} | |
#feed-container li .inner{ | |
margin:15px 0; | |
height:auto; | |
overflow:hidden; | |
word-wrap:break-word; | |
text-overflow:ellipsis} | |
#feed-container li a{ | |
text-decoration:none; | |
color:#2C2C2C; | |
font-weight:500} | |
#feed-container li a:hover{ | |
text-decoration:none; | |
color:#E94141} | |
#feed-container li .news-text{ | |
margin-top:5px; | |
line-height:1.3em} | |
#feed-container li img{ | |
margin:0 15px 5px 0; | |
padding:7px 7px 7px 0; | |
float:left; | |
display:block} | |
#result-desc{ | |
margin:0; | |
padding:0} | |
#result-desc div,#result-desc span{ | |
display:block; | |
margin:0; | |
padding:5px 0 7px; | |
color:#D64D52} | |
#result-desc div{ | |
color:inherit} | |
#feed-nav{ | |
margin:10px 0 30px; | |
text-align:center; | |
font-weight:500} | |
#feed-nav a,#feed-nav span{ | |
border:1px solid #dedede; | |
border-radius:5px; | |
padding:0; | |
color:#757575; | |
text-decoration:none; | |
display:block; | |
height:30px; | |
line-height:32px} | |
#feed-nav a,#feed-nav span:hover{ | |
color:#1B1B1B} | |
#feed-nav a:active,#feed-nav a:hover{ | |
color:#555} | |
#feed-nav span{ | |
cursor:wait} | |
@media screen and (max-width:600px){ | |
#table-outer table{ | |
margin:0 auto; | |
width:100%} | |
#feed-container,#table-outer{ | |
margin:0 auto} | |
#feed-container li .inner{ | |
margin:5px auto; | |
height:auto} | |
#feedContainer li{ | |
float:none; | |
display:block; | |
width:auto; | |
height:auto} | |
#feed-container li .news-text,#feedContainer:after,#feed-container li img{ | |
display:none} | |
} | |
</style> | |
<style amp-boilerplate='amp-boilerplate'>body{ | |
-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both; | |
-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both; | |
-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both; | |
animation:-amp-start 8s steps(1,end) 0s 1 normal both} | |
@-webkit-keyframes -amp-start{ | |
from{ | |
visibility:hidden} | |
to{ | |
visibility:visible} | |
} | |
@-moz-keyframes -amp-start{ | |
from{ | |
visibility:hidden} | |
to{ | |
visibility:visible} | |
} | |
@-ms-keyframes -amp-start{ | |
from{ | |
visibility:hidden} | |
to{ | |
visibility:visible} | |
} | |
@-o-keyframes -amp-start{ | |
from{ | |
visibility:hidden} | |
to{ | |
visibility:visible} | |
} | |
@keyframes -amp-start{ | |
from{ | |
visibility:hidden} | |
to{ | |
visibility:visible} | |
} | |
</style> | |
<noscript> | |
<style amp-boilerplate='amp-boilerplate'>body{ | |
-webkit-animation:none; | |
-moz-animation:none; | |
-ms-animation:none; | |
animation:none} | |
</style> | |
</noscript> | |
<script async='async' src='https://cdn.ampproject.org/v0.js'> | |
</script> | |
<script async='async' custom-element='amp-form' src='https://cdn.ampproject.org/v0/amp-form-0.1.js'> | |
</script> | |
<script async='async' custom-element='amp-analytics' src='https://cdn.ampproject.org/v0/amp-analytics-0.1.js'> | |
</script> | |
<script async='async' custom-element='amp-ad' src='https://cdn.ampproject.org/v0/amp-ad-0.1.js'> | |
</script> | |
<script async='async' custom-element='amp-accordion' src='https://cdn.ampproject.org/v0/amp-accordion-0.1.js'> | |
</script> | |
<script async='async' custom-element='amp-iframe' src='https://cdn.ampproject.org/v0/amp-iframe-0.1.js'> | |
</script> | |
<script async='async' custom-element='amp-carousel' src='https://cdn.ampproject.org/v0/amp-carousel-0.1.js'> | |
</script> | |
<script async='async' custom-element='amp-sidebar' src='https://cdn.ampproject.org/v0/amp-sidebar-0.1.js'> | |
</script> | |
<script async='async' custom-element='amp-sticky-ad' src='https://cdn.ampproject.org/v0/amp-sticky-ad-1.0.js'> | |
</script> | |
</head> | |
<body> | |
<div id="table-outer"> | |
<table> | |
<tbody> | |
<tr> | |
<td> | |
<label for="feed-order">Urutkan artikel berdasarkan: | |
</label> | |
</td> | |
<td> | |
<select id="feed-order"> | |
<option selected="" value="published">Artikel terbaru | |
</option> | |
<option value="updated">Artikel yang terakhir di update | |
</option> | |
</select> | |
</td> | |
</tr> | |
<tr> | |
<td> | |
<label for="label-sorter">Filter artikel berdasarkan kategori: | |
</label> | |
</td> | |
<td> | |
<select disabled="" id="label-sorter"> | |
<option selected="">Loading.... | |
</option> | |
</select> | |
</td> | |
</tr> | |
<tr> | |
<td> | |
<label for="feed-q">Cari artikel dengan kata kunci: | |
</label> | |
</td> | |
<td> | |
<form id="post-searcher"> | |
<input id="feed-q" type="text" placeholder="Ketik dan tekan ENTER"/> | |
</form> | |
</td> | |
</tr> | |
</tbody> | |
</table> | |
</div> | |
<header id="result-desc"> | |
</header> | |
<ul id="feed-container"> | |
</ul> | |
<div id="feed-nav"> | |
</div> | |
<script> | |
function getQueryVariable(variable) { | |
var query = window.location.search.substring(1); | |
var vars = query.split("&"); | |
for (var i=0;i<vars.length;i++) { | |
var pair = vars[i].split("="); | |
if(pair[0] == variable){ | |
return pair[1]; | |
} | |
} | |
return(false); | |
} | |
var cfg = [], relatedPostConfig = { | |
homePage: getQueryVariable("url"), numPosts: 6, summaryLength: 100, widgetStyle: 2, callBack: function() { | |
var $container = $('#' + this.containerId + ' > ul'), $list = $container.find('li'), innerHeight = $list.first().height(), outerHeight = $list.first().outerHeight(true); | |
// Container & list height setup $container.css({ "height": outerHeight * $list.length / 2, "overflow": "hidden" }); $list.css({ "height": innerHeight, "overflow": "hidden" }); // Animation function newsTicker() { window.setTimeout(function() { $container.find('li:last').stop().animate({ opacity: 0 }, 1000, function() { $(this).hide().prependTo($container).slideDown(1000, function() { $(this).stop().animate({ opacity: 1 }, 1000, newsTicker); }); }); }, 3000); } newsTicker(); } }; | |
</script> | |
<script type='text/javaScript'> | |
document.write; | |
var loadToc,loadCategories,_toc={ | |
init:function(){ | |
var cfg={ | |
homePage:"http://www.web-development.cf",maxResults:10,numChars:270,thumbWidth:140,thumbHeight:95,navText:"Tampilkan artikel selanjutnya ▼",resetToc:"Kembali ke Awal",noImage:"http://2.bp.blogspot.com/-11FkySHGB5Y/TpZ6SSbsF2I/AAAAAAAAA94/zK10UaL7jgo/s1600/images.jpeg",loading:"<span>Memuat...</span>",counting:"<div>Memuat artikel...</div>",searching:"<span>Mencari...</span>"} | |
,w=window,d=document,el=function(id){ | |
return d.getElementById(id); | |
} | |
,o={ | |
a:el('feed-order'),b:el('label-sorter').parentNode,c:el('post-searcher'),d:el('feed-q'),e:el('result-desc'),f:el('feed-container'),g:el('feed-nav'),h:d.getElementsByTagName('head')[0],i:0,j:null,k:'published',l:0,m:""} | |
,fn={ | |
a:function(){ | |
old=el('temporer-script'); | |
old.parentNode.removeChild(old); | |
} | |
,b:function(param){ | |
var script=d.createElement('script'); | |
script.type="text/javascript"; | |
script.id="temporer-script"; | |
script.src=param; | |
if(el('temporer-script'))fn.a(); | |
o.h.appendChild(script); | |
} | |
,c:function(mode,tag,order){ | |
o.i++; | |
o.e.innerHTML=cfg.counting; | |
o.g.innerHTML=cfg[mode==1?"searching":"loading"]; | |
if(mode===0){ | |
fn.b(tag!==null?cfg.homePage+'/feeds/posts/summary/-/'+ tag+'?alt=json-in-script&start-index='+((o.i*cfg.maxResults)+ 1)+'&max-results='+ cfg.maxResults+'&orderby='+ order+'&callback=loadToc':cfg.homePage+'/feeds/posts/summary?alt=json-in-script&start-index='+((o.i*cfg.maxResults)+ 1)+'&max-results='+ cfg.maxResults+'&orderby='+ order+'&callback=loadToc'); | |
} | |
else if(mode==1){ | |
fn.b(cfg.homePage+'/feeds/posts/summary?alt=json-in-script&start-index='+((o.i*cfg.maxResults)+ 1)+'&max-results='+ cfg.maxResults+'&q='+ tag+'&orderby='+ order+'&callback=loadToc'); | |
} | |
o.j=(tag!==null)?tag:null; | |
o.l=mode; | |
o.a.disabled=true; | |
o.b.children[0].disabled=true; | |
} | |
,d:function(json){ | |
var _h; | |
o.g.innerHTML=""; | |
o.e.innerHTML=o.l==1?'<span>Hasil penelusuran untuk kata kunci <b>“'+ o.m+'”</b> ('+ json.feed.openSearch$totalResults.$t+' Hasil)</span>':'<div>Total: '+ json.feed.openSearch$totalResults.$t+' Artikel</div>'; | |
if("entry"in json.feed){ | |
var a=json.feed.entry,b,c,_d,e="0 Komentar",f="",g; | |
for(var i=0;i<cfg.maxResults;i++){ | |
if(i==a.length)break; | |
b=a[i].title.$t; | |
_d=("summary"in a[i])?a[i].summary.$t.replace(/<br ?\/?>/ig," ").replace(/<(.*?)>/g,"").replace(/<iframe/ig,"").substring(0,cfg.numChars):""; | |
g=("media$thumbnail"in a[i])?a[i].media$thumbnail.url.replace(/\/s[0-9]+\-c/,"\/s"+ cfg.thumbWidth+""):cfg.noImage.replace(/\/s[0-9]+\-c/,"\/s"+ cfg.thumbWidth+""); | |
for(var j=0,jen=a[i].link.length;j<jen;j++){ | |
c=(a[i].link[j].rel=="alternate")?a[i].link[j].href:"#"; | |
} | |
for(var k=0,ken=a[i].link.length;k<ken;k++){ | |
if(a[i].link[k].rel=="replies"&&a[i].link[k].type=="text/html"){ | |
e=a[i].link[k].title; | |
break; | |
} | |
} | |
_h=d.createElement('li'); | |
_h.innerHTML='<div class="inner"><img style="width:'+ cfg.thumbWidth+'px;height:'+ cfg.thumbHeight+'px;" src="'+ g+'" alt="'+ b+'"><a class="toc-title" href="'+ c+'" target="_blank" title="'+ b+'">'+ b+'</a><div class="news-text">'+ _d+'…<br style="clear:both;"></div></div>'; | |
o.f.appendChild(_h); | |
} | |
_h=d.createElement('a'); | |
_h.href='#load-more'; | |
_h.innerHTML=cfg.navText; | |
_h.onclick=function(){ | |
fn.c(o.l,o.j,o.k); | |
return false; | |
}; | |
} | |
else{ | |
_h=d.createElement('a'); | |
_h.href='#reset-content'; | |
_h.innerHTML=cfg.resetToc; | |
_h.onclick=function(){ | |
o.i=-1; | |
o.e.innerHTML=cfg.counting; | |
o.f.innerHTML=""; | |
fn.c(0,null,'published'); | |
o.a.innerHTML=o.a.innerHTML; | |
o.b.children[0].innerHTML=o.b.children[0].innerHTML; | |
return false; | |
}; | |
} | |
o.g.appendChild(_h); | |
o.a.disabled=false; | |
o.b.children[0].disabled=false; | |
} | |
,e:function(json){ | |
var a=json.feed.category,b='<select id="label-sorter"><option value="" selected disabled>Pilih Kategori...</option>'; | |
for(var i=0,len=a.length;i<len;i++){ | |
b+='<option value="'+ encodeURIComponent(a[i].term)+'">'+ encodeURIComponent(a[i].term)+'</option>'; | |
} | |
b+='</select>'; | |
o.b.innerHTML=b; | |
o.b.children[0].onchange=function(){ | |
o.i=-1; | |
o.f.innerHTML=""; | |
o.g.innerHTML=cfg.loading; | |
fn.c(0,this.value,o.k); | |
}; | |
} | |
}; | |
loadToc=fn.d; | |
loadCategories=fn.e; | |
fn.b(cfg.homePage+'/feeds/posts/summary?alt=json-in-script&start-index='+(o.i+ 1)+'&max-results='+ cfg.maxResults+'&orderby=published&callback=loadToc'); | |
fn.b(cfg.homePage+'/feeds/posts/summary?alt=json-in-script&max-results=0&orderby=published&callback=loadCategories'); | |
o.a.onchange=function(){ | |
o.i=-1; | |
o.f.innerHTML=""; | |
o.g.innerHTML=cfg.counting; | |
o.b.children[0].innerHTML=o.b.children[0].innerHTML; | |
fn.c(0,null,this.value); | |
o.k=this.value; | |
}; | |
o.c.onsubmit=function(){ | |
o.i=-1; | |
o.f.innerHTML=""; | |
o.m=o.d.value; | |
fn.c(1,o.d.value,o.k); | |
return false; | |
}; | |
} | |
}; | |
_toc.init(); | |
</script> | |
</body> | |
</HTML> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment