Ditulis oleh: Ditulis pada: 12/28/2014
Pada postingan ini saya akan menjelaskan beberapa cara kustomisasi template Kompi Ajaib yang saya bagikan kemarin, agar Anda tidak merasa kesulitan untuk menyesuaikan beberapa element template.
Ada beberapa element template yang memang harus diaktifkan atau diganti manual oleh admin blog, diantaranya:
Seperti pada screenshot di bawah ini:
Quickedit Post atau Post Edit
Silahkan aktifkan (jika belum muncul ikon edit post di postingan) quickedit post untuk mempermudah mengedit postingan atau menuju halaman post editor postingan yang bersangkutan.
Silahkan aktifkan fitur ini melalui dashboard >> tata letak >> klik edit pada blog post (kotak paling besar) dan centang pada "Show Quick Editing" seperti pada gambar di bawah ini.
Photo Admin atau Photo Avatar
Silahkan ganti photo avatar untuk photo admin blog dengan mengganti url photo avatar pada kode berikut (kode yang saya marking), silahkan buat photo Anda dengan dimensi 40px x 40px.
.authorphoto{position:absolute;top:0;left:0;width:38px;height:38px;cursor:pointer;background:#ddd url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxMGSoh6k8wQrqMuaGCGOxbNbU5z2b53GLXZpOPA0zD1Ke_YAgXIYP1RCjpK0j2Bpfr3HmZUhUyhUzHyhoWQpjHt_Ah5YDiHGUmHfEx01hCSJJA5unOvpf62SeBQl3URGyynm99Vdedpg/s48/anon48.gif)center no-repeat;padding:0}
Menampilkan Kode Di Postingan
Template ini sudah dilengkapi dengan syntax highlighter dari highlight.js jadi silahkan gunakan tag pre seperti berikut di postingan.
<pre><code>
Script Di Sini
</code></pre>
Silahkan gunakan kode
<br/> di setiap akhir barisnya. Jika kita akan menampilkan kode di postingan, silahkan paste kodenya pada postingan mode Compose kemudian setelah beres menulis semua artikelnya pindahkan ke mode HTML, nah baru deh kasih tag pre pada setiap kodenya,dengan begitu akan otomatis memiliki <br/> di setiap akhir barisnya. Tema syntax highlight.js ini menggunakan tema dark, jika ingin mengganti tema syntax ini silahkan simak postingannya DI SINI.
Namun jika blog Anda tidak menampilkan kode di postingan, alangkah lebih baiknya untuk menghapus script highlight.js agar loading blog menjadi lebih ringan lagi. Silahkan hapus kode berikut.
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/highlight.min.js' type='text/javascript'/>
hljs.initHighlightingOnLoad();hljs.configure({useBR:true});$("div.code").each(function(e,t){hljs.highlightBlock(t)});
loadCSS("//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/styles/dark.min.css");
Mengganti Title Blog Dengan Image
Jika Anda ingin mengganti title blog dengan gambar, silahkan ganti kode berikut:
<span class='homeblog'><a href='/' title='Homepage'><span class='spantitle'>Title</span>Blog</a></span>
Silahkan ganti kode yang saya marking dengan image seperti berikut:
<span class='homeblog'><a href='/' title='Homepage'><img alt='logo blog' src='URL IMAGE' height='tinggi image tanpa satuan' width='lebar image tanpa satuan' title='Homepage'/></a></span>
Komentar Blog
Pada template ini saya hanya mengaktifkan kolom komentar dari Google Plus. Dan untuk kode-kode komentar Blogger sudah saya hapus, jadi jika ingin menggunakan komentar blogger silahkan lengkapi lagi kode-kode komentar Bloggernya, saya yakin Anda mengetahuinya kode apa saja yang saya hapus, Anda pasti dapat melihatnya, jadi silahkan Anda sedikit jeli. Atau silahkan ganti dengan kolom komentar Disqus dengan mengganti kode berikut dengan kode komentar Disqus:
<div class='g-comments' data-first_party_property='BLOGGER' data-view_type='FILTERED_POSTMOD' data-width='620' expr:data-href='data:blog.canonicalUrl'>
</div></div>
<script type='text/javascript'>
//<![CDATA[
document.getElementsByClassName('g-comments')[0].setAttribute('data-width', document.getElementById('g_comments').clientWidth);
//]]>
</script>
Kemudian silahkan tambahkan
Saya kira cukup sekian cara kustomisasi Template Kompi Ajaib, jika ada hal lain yang perlu ditanyakan mengenai kustomisasi Template Kompi Ajaib ini, silahkan tanyakan di kolom komentar postingan ini atau di Forum.
</div> di akhir kode komentar Disqus.Saya kira cukup sekian cara kustomisasi Template Kompi Ajaib, jika ada hal lain yang perlu ditanyakan mengenai kustomisasi Template Kompi Ajaib ini, silahkan tanyakan di kolom komentar postingan ini atau di Forum.