📌 Kode Script daftar isi
</>
<meta content='width=device-width, initial-scale=1' name='viewport'>
<link href='https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap' rel='stylesheet'/>
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
font-family:'Poppins',sans-serif;
background:linear-gradient(135deg,#f5f7ff,#eef2ff);
color:#222;
padding:20px;
}
/* WRAPPER */
#table-outer{
max-width:1100px;
margin:auto;
background:#fff;
padding:25px;
border-radius:24px;
box-shadow:0 10px 40px rgba(0,0,0,.08);
border:1px solid rgba(255,255,255,.4);
backdrop-filter:blur(10px);
}
/* TABLE */
#table-outer table{
width:100%;
border-collapse:separate;
border-spacing:15px;
}
#table-outer td{
vertical-align:middle;
}
/* LABEL */
#table-outer label{
font-size:14px;
font-weight:600;
color:#555;
display:block;
}
/* INPUT & SELECT */
#table-outer input,
#table-outer select{
width:100%;
border:none;
background:#f6f8fc;
border-radius:14px;
padding:15px 18px;
font-family:'Poppins',sans-serif!important;
font-size:15px!important;
font-weight:500!important;
outline:none;
transition:.3s;
color:#333!important;
box-shadow:inset 0 0 0 2px transparent;
}
#table-outer input:focus,
#table-outer select:focus{
background:#fff;
box-shadow:0 0 0 2px #4f46e5;
}
#table-outer select[disabled]{
opacity:.6;
cursor:not-allowed;
}
#feed-q::placeholder{
color:#999;
}
/* RESULT */
#result-desc{
max-width:1100px;
margin:25px auto 10px;
font-size:15px;
font-weight:500;
color:#666;
}
#result-desc span,
#result-desc div{
background:#fff;
padding:15px 20px;
border-radius:16px;
box-shadow:0 5px 20px rgba(0,0,0,.05);
}
/* FEED */
#feed-container{
max-width:1100px;
margin:auto;
list-style:none;
display:grid;
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
gap:20px;
padding:0;
}
/* CARD */
#feed-container li{
list-style:none;
background:#fff;
border-radius:22px;
overflow:hidden;
transition:.35s;
box-shadow:0 8px 25px rgba(0,0,0,.06);
border:1px solid rgba(0,0,0,.04);
}
#feed-container li:hover{
transform:translateY(-6px);
box-shadow:0 18px 40px rgba(79,70,229,.18);
}
/* INNER */
#feed-container li .inner{
padding:18px;
}
/* IMAGE */
#feed-container li img{
width:100%!important;
height:200px!important;
object-fit:cover;
border-radius:18px;
margin-bottom:15px;
padding:0!important;
float:none!important;
display:block;
}
/* TITLE */
#feed-container li a.toc-title{
display:block;
font-size:18px;
line-height:1.5;
font-weight:700;
color:#222;
text-decoration:none;
margin-bottom:10px;
transition:.3s;
}
#feed-container li a.toc-title:hover{
color:#4f46e5;
}
/* DESC */
.news-text{
font-size:14px;
line-height:1.8;
color:#666;
}
/* NAV */
#feed-nav{
max-width:1100px;
margin:35px auto 10px;
text-align:center;
}
#feed-nav a,
#feed-nav span{
display:inline-block;
padding:14px 30px;
border-radius:999px;
background:linear-gradient(135deg,#4f46e5,#7c3aed);
color:#fff!important;
text-decoration:none;
font-weight:600;
transition:.3s;
box-shadow:0 8px 25px rgba(79,70,229,.3);
}
#feed-nav a:hover{
transform:translateY(-3px);
box-shadow:0 14px 30px rgba(79,70,229,.4);
}
/* MOBILE */
@media screen and (max-width:768px){
body{
padding:12px;
}
#table-outer{
padding:18px;
border-radius:20px;
}
#table-outer table{
border-spacing:10px;
}
#table-outer td{
display:block;
width:100%;
}
#feed-container{
grid-template-columns:1fr;
}
#feed-container li img{
height:190px!important;
}
#table-outer label{
margin-bottom:8px;
text-align:left;
}
}
</style>
<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);
}
</script>
<script type='text/javaScript'>
document.write;var loadToc,loadCategories,_toc={init:function(){var cfg={homePage:"https://archivelocker.blogspot.com",maxResults:10,numChars:270,thumbWidth:140,thumbHeight:95,navText:"Tampilkan artikel selanjutnya ▼",resetToc:"Kembali ke Awal",noImage:"//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMBAk76JNVI8tRYpKyWLbEzCyGhB-aYlZOYoXOz7qYp7eAcoPwPHGZSq8dIpMJeYRrLP_ERCIIAay0bQYIzKhhNFmV6bUJFnCeKrRs3m0xXM63vJIW8hH62frA2axxvgL5ucJUNlW-TH2-BKsaxe26xkZhDIKJb00jz4K7Uh32vRF0zd2-tl0Qi5Whc1yZ/s1254/No%20image%20%28safelink-aza%29.png",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(/.*?:\/\//g , "//").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).replace(/%20/g, " ")+'">'+ encodeURIComponent(a[i].term).replace(/%20/g, " ")+'</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>
Safelink-aza
Komentar untuk Sitemap
Posting Komentar