Bonus Hari Kemerdekaan RI Untuk Blogger

Bonus Hari Kemerdekaan RI Untuk Blogger

Bola Hero Gawai

Bonus Hari Kemerdekaan RI Untuk Blogger

Bonus Hari Kemerdekaan RI Untuk Blogger
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....
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://2.bp.blogspot.com/-amT1RdFjiL4/V6mvfTkz1iI/AAAAAAAAneg/AXHKRWRcaRQP2aO8dGoja_2lnJCn2Zv9ACLcB/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><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>


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

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 &#9660;",resetToc:"Kembali ke Awal",noImage:"//2.bp.blogspot.com/-ex3V86fj4dQ/UrCQQa4cLsI/AAAAAAAAFdA/j2FCTmGOrog/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>


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 {&quot;https://kompiindy.blogspot.com/p/daftar-isi.html&quot;,&quot;https://kompiindy.blogspot.com/p/blogger.html&quot;}'>

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 {&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>

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.

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

50 Comments Add Comment

Bookmark dulu..thx kang sudah berbagi

Balas

Ijin unduh template kang.. Makasih ^_^

Balas

hatur nuhun kang atos katampi template na hehe

Balas

Lumayan lah mas :) hehehee

Balas

Bonusnya ntaps kang :-d

Balas

Silahkan mas, sama-sama :)

Balas

Silahkan mas, sama-sama :)

Balas

Sami-sami kang, mudah-mudahan manfaat :)

Balas

Hehehe...mudah-mudahan bermanfaat mas :)

Balas

Mantap kang Adhy
Ijin simpan buat blog saya lainnya.... :)

Balas

Memang ajaib blog sama author-nya ni.

Balas

Gridnya ga rata ya kang, biar rata gimana ya?
Dari hape udah keren lah, tinggal dari desktop aja hehe.
Makasih, tak tunggu jawabannya kang

Balas

kerennn eeuuy.., ijin dowload kang... :)

Balas

Silahkan kang :)

Balas

Heheehe bisa aja mas :D

Balas

Bisa diratain tapi syaratnya ukuran gambar postingan yang jadi thumbnail/gambar pertama postingan harus sama agar tidak ada gambar yang gepeng.

Balas

Silahkan mas :)

Balas

Biasanya ukuran nya berapa kang ? 800x450 kah ? atau berapa? Ajari ratainnya ya kang :D

Balas

Kalau ini namanya baru bonus MERDEKA...
Mantap Kang (y)

Balas

Coba 750x400... dan usahakan sizenya kecil 50-60kb

Balas

Mudah-mudahan berguna mas :)

Balas

Ijin download ya kang , mw saya pasang di blog saya nih hehe :)

Balas

Oke kang, berarti dibuat .png jangan .jpg ya.
Gimana cara ratainnya kang? Pakai tutorial yang mana?

Balas

Dicoba dulu aja ya, dengan begitu (ukuran thumbnail sama) semua ukuran post di homepage akan sama, tinggal menyamakan tinggi judul blog dan judul postingan.

Balas

Wah bagus nih, boleh di coba nih!

Balas

Mas Adminnya lagi sibuk mba, jadi terpaksa saya balsa. Monggo mba!

Balas

Kang Adhy maaf oot, saya udah set tag h1 kembali, tapi ada yang aneh waktu buka homepage gambarnya rata, tapi kalau buka salah satu judul artikel, gambar header jadi gak rata, kenapa bisa begitu ya, kang? mohon pencerahannya... hatur nuhun.

Balas

Keren banget, ijin nyoba kang

Balas

Keren lah kang ajin-ajib

Balas

Kang , kalau mau merubah gambar pada bagian reeate Postnya gimana ya ? Soalnya saya kira gambarnya kegede.an jadi mau di kecilin dikit , dan kalau bisa gambarnya di tarus di bagian kiri judul

Terima kasih

Balas

Saya bukan cewek mas , saya cowok :3

Balas

tampilannya keren dik adhy ,, apalagi menunya sistim hidden ala google plus ,. oh yah ,, sy hampir lupa ,, emailnya tolong di cek ,, salam buat keluarga ,, insya ALLAH semoga dik adhy cepat sembuh ..

Balas

Biasanya harus dibantu juga dengan css kang :)

Balas

Silahkan mas :)

Balas

Makasih mas :)

Balas

Bisa di atur di css related post nya.

Balas

Sudah saya cek Kak :)
Silahkan cek kembali emailnya :)

Balas

Keren mas adhy ijin sedot ya kang.

Balas

ijin sedot kang.
terima kasih..

Balas

untuk sementara daya download yang gratis dulu mas, nanti prngin yang premium. :)

makasih mas templatnya.

Balas

Ijin download Mas Adhy, makasih yah...

Balas

keren kang, izin download dulu. :)

Balas

Mas reques artikel membuat cara membuat menu yang disamping nya pada https://kompiindy.blogspot.co.id/

Balas

Keren Templatenya...

Tapi untuk tampilan postingan bisa jadi satu baris enggak yaa+ di samping pake widget...?
kaya blog yang biasa...

Balas

mohon ijin memakaina nyak kang

Balas

Keren kang,,, izin sedot.

Balas

mas cek inbox ,saya mau beli versi premiumnya
template Kompiindy.

Allen Choc

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×