Author: KompiAjaib
Feature:
- Responsive support HTTPS.
- Grid with masonry on the homepage with full size display thumbnails corresponding actual image size.
- 3 comment system, Blogger, Disqus and Facebook to parse tool for Blogger comments and Disqus.
- Slide side menu to search Blogger using ajax.
- Sticky widget sidebar.
- Popular post dengan full size thumbnail dengan show hide snippet on hover.
- Equipped Highlight.js syntax highlighter.
- Equipped with Bootstrap button.
- Equipped installation of Youtube iframe responsive.
- Simple and complete sitemap.
- Contact Form succses Blogger with a popup message.
- Valid data structures, and more ....
Các tùy chỉnh sau khi cài đặt template này.
1. Thay đổi các thông tin của thẻ Meta bên trong thẻ <head>
2. Chỉnh sửa Menu và cài đặt mạng xã hội theo thẻ
<nav class='main-menu-mobile'
3. Logo Blog - Để thay thế Logo, hãy tạo một logo kích thước 128px X 128px, sau đó thay đổi liên kết trong đoạn code:
<b:includable id='title-blog' var='post'>
<div class='post title-blog'>
<a expr:href='data:blog.homepageUrl' expr:title='data:title' itemprop='url'><img expr:alt='data:title' expr:title='data:title' height='128' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijeVPYzjY6KV4xGCT4HjIaceO9zh5-m6llszL5G9LkIxiymO1VUfcLEpTOy3gGhQvjTaqgp8D7tga6zcXnV1CeUoCmpeifOaAISFQIR-VBH0G68giqYyqJGzN1ddRTSZzBOFwosuvNLtn2/s128/kompi-indy.png' width='128'/><span class='judul-blog'><data:title/></span></a>
<span class='deskripsi-blog'><data:description/></span>
</div>
</b:includable>
4. Sticky widget - Widget đính: Nếu bạn muốn đính Widget khác lên sidebar, hãy thay Label1 bằng tên Widget mới
makemeSticky("Label1");
5. Contact Form - Hãy tạo một trang tĩnh và dán đoạn code dưới vào thẻ chỉnh sửa HTML
<div class="contact-form-box">
<div>
Silahkan isi form di bawah ini untuk menghubungi admin Kompi Ajaib.
</div>
<br />
<form name="contact-form">
<span class="contact-form-name">
<input id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" /></span>
<span class="contact-form-email">
<input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" /></span>
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="5"></textarea><br />
<input id="ContactForm1_contact-form-submit" type="button" value="Kirim" /><br />
<div class="clear">
</div>
<div style="max-width: 100%; text-align: left; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
</div>
<b:if cond='data:blog.url == "https://kompiindy.blogspot.com/p/contact.html"'>
6. Full Sitemap và Sitemap theo nhãn.
Full Sitemap to use the code below.
<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" placeholder="Ketik dan tekan ENTER" type="text" />
</form>
</td></tr>
</tbody></table>
</div>
<br />
<header id="result-desc"></header>
<br />
<ul id="feed-container"></ul>
<div id="feed-nav">
</div>
<script type='text/javaScript'>
document.write;var loadToc,loadCategories,_toc={init:function(){var cfg={homePage:window.location.origin,maxResults:10,numChars:270,thumbWidth:140,thumbHeight:95,navText:"Tampilkan artikel selanjutnya ▼",resetToc:"Kembali ke Awal",noImage:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtEiHnt0cWuScDi0e8kkR42pWxqIfi8nrwfBRt0lTaNwkS1Nf9pzQ9bQ6vQh9eV0DJ_sL-LsrYnqLSrLB6XKaZ65YcWidfJHE5TF7mQJl0vNjdOCxd3qod2ej19pSfZeYoMBszyM9M-sL9/s1100/no-thumbnail.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>
Sitemap theo nhãn sử dụng code bên dưới, bạn có thể tham khảo ở Đây.
<div id="result-desc"></div>
<ul id="feed-container"></ul>
<div id="feed-nav">
</div>
<script type='text/javaScript'>
var label="Blogger";
</script>
Sau đó vào chỉnh sửa Template và thay thế địa chỉ url trong thẻ điều kiện bên dưới với sitemap đầy đủ và sitemap theo label:
<b:if cond='data:blog.url in {"https://kompiindy.blogspot.com/p/daftar-isi.html","https://kompiindy.blogspot.com/p/blogger.html"}'>
Khi đó Sitemap theo nhãn vẫn có thêm địa chỉ Url trong thẻ điều kiện cho đoạn javascript sitemap theo nhãn như đoạn code bên dưới (phía cuối của Template HTML). Nếu bạn tạo nhiều hơn một sitemap theo nhãn, hãy tạo các thẻ tương tự như trên:
<b:if cond='data:blog.url in {"https://kompiindy.blogspot.com/p/blogger.html"}'>
<b:includable id='disqus-comment' var='post'>
<script type='text/javascript'>
var disqus_shortname = "kompiajaib";
var disqus_blogger_current_url = "<data:blog.canonicalUrl/>";
if (!disqus_blogger_current_url.length) {
disqus_blogger_current_url = "<data:blog.url/>";
}
var disqus_blogger_homepage_url = "<data:blog.homepageUrl/>";
var disqus_blogger_canonical_homepage_url = "<data:blog.canonicalHomepageUrl/>";
</script>
</b:includable>