Bonus Hari Kemerdekaan Ri Untuk Blogger
Sebelumnya banyak pesan email yang masuk ke inbox saya yang bertanya apakah template yang dipakai Kompi Ajaib dishare atau mungkin dijual. Nah kali ini saya menciptakan 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 ketika ini digunakan, namun saya merubah beberapa bab 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 lalu 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 ibarat 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 sajian dengan search Blogger memakai 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 bab
<head> untuk arahan verifikasi webmaster tool, url profil Goole+, dan lainnya. 2. Silahkan sesaikan menu dan link sosial media di bawah arahan
<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 bab
<head>) lalu ganti url image pada arahan 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/AVvXsEhILIFeNyiGqDrRQ6AUsDLT2whlGP6TilSRM6cI475-OyIjZE8KUoikgfNCEw-l1nAv0e8TE5PuGQHk6b_m5Jf8T8T5E4MqaaOAupc5xNZQdo4ZgbyYkVP_8qx5jvJ9YDKuuq1TgngQl9JI/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 - kalau ingin mengganti widget untuk sticky widget silahkan ganti arahan Label1 pada arahan berikut dengan ID widget yang akan dibentuk melayang dan tempatkan widget tersebut di paling bawah sidebar.
makemeSticky("Label1"); 5. Contact Form - silahkan buat halaman statis atau PAGE dan simpan arahan 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 arahan 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 menurut label.
Untuk Full Sitemap gunakan arahan 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 menurut 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/AVvXsEjhid77Vl_9VEsqO28erjio61gqhZ4KCwjvE_nsVJTqg51j1Hx7XmWgrFQu35OPWMn5ylvqYRA4_lAC1R6o8gdCwQtK6OrviNq8GLsbdDF8ecJazXKdV_CogoI_2Y_3V-lBHkrZTg9jbOZf/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=" Sebelumnya banyak pesan email yang masuk ke inbox saya yang bertanya apakah template yang Bonus Hari Kemerdekaan RI Untuk Blogger"><a class="toc-title" href="'+ c+'" target="_blank" title="Bonus Hari Kemerdekaan RI Untuk Blogger">'+ 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 menurut label gunakan arahan di bawah ini. Fungsi sitemap per label ini dapat 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 arahan
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 menurut 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 menurut label masih ada 1 lagi URL pada conditional tag untuk javascript sitemap menurut label pada arahan di bawah ini di bab bawah Edit HTML. Jika Anda menciptakan lebih dari satu halaman sitemap menurut label, silahkan buat conditional tag ibarat di atas.
<b:if cond='data:blog.url in {"https://kompiindy.blogspot.com/p/blogger.html"}'>kompiajaib pada arahan 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, kalau ada yang kurang dimengerti dapat tanyakan di kolom komentar.
Untuk template Kompi Indy versi pertama ini saya bagikan gratis untuk Blogger. Namun Anda juga dapat membeli versi premium untuk mendapat 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.
Sumber https://www.kompiajaib.com/
0 Response to "Bonus Hari Kemerdekaan Ri Untuk Blogger"
Posting Komentar