Bertepatan dengan perayaan Hari Kemerdekaan RI yang ke-71 ini, saya membagikan template Blogger sebagai bonus hari kemerdekaan RI untuk Blogger dari Kompi Ajaib.
Template ini saya ambil dari template Kompi Ajaib yang saat ini digunakan, namun saya merubah beberapa bagian yang kebetulan saya menemukan tampilan menarik dari theme Tumblr (Indy Theme) yang saya gunakan juga di blog Tumblr saya yang kemudian saya terapkan pada template yang akan saya bagikan ini.
Untuk itu saya kasih nama juga untuk template ini dengan nama Kompi Indy dengan beberapa fitur seperti di bawah ini.
- Tampilan terinspirasi dari Indy Theme Tumblr.
- Responsive dan support HTTPS.
- Grid dengan masonry di homepage dengan menampilkan thumbnail full size sesuai ukuran gambar sebenarnya.
- 3 sistem komentar, Blogger, Disqus, dan Facebook dengan parse tool untuk komentar Blogger dan Disqus.
- Slide side menu dengan search Blogger menggunakan ajax.
- Sticky widget sidebar.
- Popular post dengan full size thumbnail dengan show hide snippet on hover.
- Dilengkapi syntax highlighter Highlight.js.
- Dilengkapi dengan tombol Bootstrap.
- Dilengkapi pemasangan iframe Youtube responsive.
- Simple dan komplit sitemap.
- Contact Form Blogger dengan popup succses message.
- Valid struktur data, dan lainnya....
Kustomisasi yang perlu dilakukan.
1. Silahkan sesuaikan di bagian
<head> untuk kode verifikasi webmaster tool, url profil Goole+, dan lainnya.
2. Silahkan sesaikan menu dan link sosial media di bawah kode
<nav class='main-menu-mobile'
3. Logo Blog - untuk mengganti logo blog, silahkan buat logo dengan ukuran 128px X 128px (bisa sekaligus untuk favicon blog (lengkapi juga favicon blog di bagian
<head>) kemudian ganti url image pada kode di bawah ini.
<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/AVvXsEitYgl1-ajkrIfiVWG9NXVeFj5R-qLxBW1V-aLCbgdw-kt6JQRTUAO45AbNzS42POKUfFIj9FuJT7AzHbaA-ICeIh46Gw5_Ml8juntO_Apud2Re7h-Sh_EzC5UnsL4V58nU5zN_xAbimzbv/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 - jika ingin mengganti widget untuk sticky widget silahkan ganti kode Label1 pada kode berikut dengan ID widget yang akan dibuat melayang dan tempatkan widget tersebut di paling bawah sidebar.
makemeSticky("Label1");
5. Contact Form - silahkan buat halaman statis atau PAGE dan simpan kode di bawah ini pada editor page mode 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>
Kemudian masuk ke edit HTML dan ganti URL dengan URL contact form blog Anda pada kode berikut untuk conditional tag CSS style contact form:
<b:if cond='data:blog.url == "https://kompiindy.blogspot.com/p/contact.html"'>
6. Full Sitemap dan Sitemap berdasarkan label.
Untuk Full Sitemap gunakan kode di bawah ini.
<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/AVvXsEgo9guTNZ9WlY0Uvtx4kXe607bvihsUyjIIs8kl4Hxwgg3x3HWMyvtQ7OvnlSBAd3aaObDKhOs6Wige5f1cQfBcP-eEXT9iV2HbTj0gY-0r_VxDhyHM4llgAVMck5G3-BCrOjtaG2ZUDBOP/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>
Untuk Sitemap berdasarkan label gunakan kode di bawah ini. Fungsi sitemap per label ini bisa disimak Di sini.
<div id="result-desc"></div>
<ul id="feed-container"></ul>
<div id="feed-nav">
</div>
<script type='text/javaScript'>
var label="Blogger";
</script>
Ganti kode
Blogger dengan label yang diinginkan.
Kemudian masuk ke edit HTML dan ganti URL pada conditional tag CSS style di bawah ini dengan URL halaman Full sitemap dan halaman-halaman sitemap berdasarkan label.
<b:if cond='data:blog.url in {"https://kompiindy.blogspot.com/p/daftar-isi.html","https://kompiindy.blogspot.com/p/blogger.html"}'>
Kemudian untuk sitemap berdasarkan label masih ada 1 lagi URL pada conditional tag untuk javascript sitemap berdasarkan label pada kode di bawah ini di bagian bawah Edit HTML. Jika Anda membuat lebih dari satu halaman sitemap berdasarkan label, silahkan buat conditional tag seperti di atas.
<b:if cond='data:blog.url in {"https://kompiindy.blogspot.com/p/blogger.html"}'>
kompiajaib pada kode di bawah ini dengan shortname Disqus blog Anda.
<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>
Untuk kustomisasi template hanya itu saja, jika ada yang kurang dimengerti bisa tanyakan di kolom komentar.
Untuk template Kompi Indy versi pertama ini saya bagikan gratis untuk Blogger. Namun Anda juga bisa membeli versi premium untuk mendapatkan update-update template Kompi Indy ini selanjutnya dan menghapus credit link dengan harga $9 saja. Yang berminat versi premium silahkan hubungi saya via contact form blog ini.
Selamat mencoba...
Changelog:
1. v1.00 - 14-08-2016
- Rilis template, gratis untuk Blogger.