Bonus Hari Kemerdekaan RI Untuk Blogger

Ditulis oleh: Adhy Suryadi

Ditulis pada: 8/14/2016

Sebelumnya banyak pesan email yang masuk ke inbox saya yang bertanya apakah template yang digunakan Kompi Ajaib dishare atau mungkin dijual. Nah kali ini saya membuat postingan ini untuk menjawab pesan-pesan yang telah masuk tadi.

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 (jika saya belum menggantinya hehehe....) 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....

              <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/AVvXsEhS-xsbNsyYcxNxXkUcTAit1VBXG4nk0-3ELfp1ItKFkXcugRgWAk2i5t68yCzhK7MtOrMRAZ2uEFThLImL8NFGP1YFMJZ4gHthiQ16Xg5IINCO_Hf5M9kCvjE7bJBkPfzT6fCYesy-2JxW/s128/kompi-indy.png' width='128'/><span class='judul-blog'><data:title/></span></a>

                <span class='deskripsi-blog'><data:description/></span>

                </div>

</b:includable>

makemeSticky("Label1");

<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><br />

<span class="contact-form-email">

<input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" /></span><br />

<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 == &quot;https://kompiindy.blogspot.com/p/contact.html&quot;'>

<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 &#9660;",resetToc:"Kembali ke Awal",noImage:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4vaY6MHYhozV4pNcorc6AJ7SVoY9zGdXyDKomorlYYOBEd-wkjJh9YE0xz0rGOK0JKr__B0Skhep7jOphbdQCHWvAmAJvOw-gG0Nmb6e1LEVjZvyTLpURxPY9DtwJqXRlEYV1LxjeRKCQ/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>&#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(/.*?:\/\//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+'&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).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>

<div id="result-desc"></div>

<ul id="feed-container"></ul>

<div id="feed-nav">

</div>



<script type='text/javaScript'>

var label="Blogger";

</script>

<b:if cond='data:blog.url in {&quot;https://kompiindy.blogspot.com/p/daftar-isi.html&quot;,&quot;https://kompiindy.blogspot.com/p/blogger.html&quot;}'>

<b:if cond='data:blog.url in {&quot;https://kompiindy.blogspot.com/p/blogger.html&quot;}'>

7. Untuk komentar Disqus, silahkan ganti shortname Disqus 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 = &quot;kompiajaib&quot;;

                var disqus_blogger_current_url = &quot;<data:blog.canonicalUrl/>&quot;;

                if (!disqus_blogger_current_url.length) {

                    disqus_blogger_current_url = &quot;<data:blog.url/>&quot;;

                }

                var disqus_blogger_homepage_url = &quot;<data:blog.homepageUrl/>&quot;;

                var disqus_blogger_canonical_homepage_url = &quot;<data:blog.canonicalHomepageUrl/>&quot;;

            </script>

            </b:includable>

Changelog:

1. v1.00 - 14-08-2016
- Rilis template, gratis untuk Blogger.