Kustomisasi Template Kompi Ajaib

Pada postingan ini aku akan menjelaskan beberapa cara kustomisasi template Kompi Ajaib yang aku bagikan kemarin, semoga 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" ibarat pada gambar di bawah ini.

Photo Admin atau Photo Avatar

Silahkan ganti photo avatar untuk photo admin blog dengan mengganti url photo avatar pada arahan berikut (kode yang aku 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/AVvXsEjzLaokqX2xRD4JRE8Aa1FdpAp18Bn0II7UYYGAp9NU-QSq6ucrZq7akNFe7rcvHZWNvB7f-gRI3RzsR0gWprCaSHCavvj7wVLz5Ud3nI0BJncfB0tK6_w35daeofirNvrA9NLyr_hM8cg/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 ibarat berikut di postingan.

 <pre><code>
 Script Di Sini
 </code></pre>

Silahkan gunakan arahan <br/> di setiap selesai barisnya. Jika kita akan menampilkan arahan di postingan, silahkan paste kodenya pada postingan mode Compose kemudian sesudah beres menulis semua artikelnya pindahkan ke mode HTML, nah gres deh kasih tag pre pada setiap kodenya,dengan begitu akan otomatis mempunyai <br/> di setiap selesai barisnya. Tema syntax highlight.js ini memakai tema dark, kalau ingin mengganti tema syntax ini silahkan simak postingannya DI SINI.

Namun kalau blog Anda tidak menampilkan arahan di postingan, alangkah lebih baiknya untuk menghapus script highlight.js semoga loading blog menjadi lebih ringan lagi. Silahkan hapus arahan 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 arahan berikut:

 <span class='homeblog'><a href='/' title='Homepage'><span class='spantitle'>Title</span>Blog</a></span>

Silahkan ganti arahan yang aku marking dengan image ibarat 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 aku hanya mengaktifkan kolom komentar dari Google Plus. Dan untuk kode-kode komentar Blogger sudah aku hapus, jadi kalau ingin memakai komentar blogger silahkan lengkapi lagi kode-kode komentar Bloggernya, aku yakin Anda mengetahuinya arahan apa saja yang aku hapus, Anda niscaya sanggup melihatnya, jadi silahkan Anda sedikit jeli. Atau silahkan ganti dengan kolom komentar Disqus dengan mengganti arahan berikut dengan arahan 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 selesai arahan komentar Disqus.

Saya kira cukup sekian cara kustomisasi Template Kompi Ajaib, kalau ada hal lain yang perlu ditanyakan mengenai kustomisasi Template Kompi Ajaib ini, silahkan tanyakan di kolom komentar postingan ini atau di Forum.

Sumber https://www.kompiajaib.com/

Share this post