Kustomisasi Template Kompi Ajaib

Template Kompi Ajaib
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:

Photo Admin Dan Post Edit

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.

Layout Blogger

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(http://2.bp.blogspot.com/-KjVxDap0Bzs/Uc7Jfm_9VWI/AAAAAAAAEqs/jD56hYNIm88/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 </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.

You Might Also Like:

How to style text in Disqus comments:
  • 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 Hide Parser
Disqus Comments