Skip to content

Instantly share code, notes, and snippets.

@dimaslanjaka
Last active April 14, 2017 01:40
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save dimaslanjaka/04bcad6b42c508cfed6d95f8b62cd688 to your computer and use it in GitHub Desktop.
Save dimaslanjaka/04bcad6b42c508cfed6d95f8b62cd688 to your computer and use it in GitHub Desktop.
<!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 &#9660;",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>&#8220;'+ o.m+'&#8221;</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+'&hellip;<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