Cara Kustomisasi Template Ala Kompi Ajaib




Cara Kustomisasi Template Ala Kompi Ajaib
Cara Kustomisasi Template Ala Kompi Ajaib: Sebelumnya saya sudah membagikan artikel download ala template kompi ajaib, namun pada malam ini saya akan bagikan Cara Kustomisasi Template Ala Kompi Ajaib. Tujuannya  agar Anda tidak merasa kesulitan untuk menyesuaikan beberapa element template nantinya.

Di bawah ini ada beberapa element template yang harus anda aktifkan atau diganti terlebih dahulu secara manual oleh admin blog, diantaranya yaitu:

Quickedit Post atau Post Edit

Silahkan anda aktifkan terlebih dahulu (jika belum muncul ikon edit post di postingan) quickedit post untuk anda yang ingin agar mempermudah mengedit postingan atau menuju halaman post editor postingan yang akan di edit.

Jadi bisa anda aktifkan fitur seperti di bawah ini melalui yaitu melalui :
dashboard ==> tata letak ==> dan kemudian anda klik edit pada blog post (kotak paling besar) dan centang pada "Show Quick Editing" Lihat gambar di bawah ini agar anda tidak kebingungan.

Photo Admin atau Photo Avatar

Anda ganti photo avatar untuk photo admin blog tersebut dengan mengganti url photo avatar pada kode berikut ini (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 Postingan

Nah untukTemplate ini kompi ajaib sudah membuat syntax highlighter dari highlight.js jadi silahkan anda gunakan tag pre seperti berikut di pada artikel atau konten anda.
<pre><code>
Script Di Sini
</code></pre>
Jika anda ingin menampilkan kode di postingan seperti kode di artikel saya ini, maka jangan lupa  untuk menggunakan kode <br/> di setiap akhir barisnya. Langsung anda paste kodenya pada postingan mode Compose kemudian setelah beres menulis semua artikelnya pindahkan ke mode HTML, jika sudah baru lah anda beri tag pre pada setiap kodenya, dan dengan begitu maka akan otomatis memiliki <br/> di setiap akhir barisnya. Tema syntax highlight.js ini menggunakan tema dark, jadi jika anda ingin mengganti tema syntax ini lebih kerenb lagi bisa anda simak penjelsan di postingan Cara Membuat  Syntax Highlighter Highlight.js With Copy To Clipboard Clipboard.js

Jika blog Anda tidak menampilkan kode di artikel, saran saya lebih baik harus anda hapus script highlight.js tujuannya 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

Namun bila anda ingin mengganti title blog dengan gambar, silahkan anda ganti kode berikut ini:
<span class='homeblog'><a href='/' title='Homepage'><span class='spantitle'>Title</span>Blog</a></span>
Dan anda ganti kode yang saya marking dengan image seperti berikut ini:
<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

Oya untuk masalah masalah template ini kompi ajaib hanya mengaktifkan kolom komentar dari Google Plus saja. Untuk kode-kode komentar Blogger sudah di hapus sama beliau, nah jika anda ingin menggunakan komentar blogger silahkan lengkapi lagi kode-kode komentar Bloggernya  di bawah ini. 

Jika anda seorang blogger yang sudah lama bergelut di dunia blogging tentu pasti paham dengan urusan kode css seperti di bawah ini. Dan anda sudah mengetahuinya kode apa saja yang sudah di hapus, Anda pasti dapat melihatnya, maka silahkan Anda sedikit jeli untuk kode tersebut. Atau bisa juga silahkan anda 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>
Selanjutnya silahkan tambahkan </div> di akhir kode komentar Disqus tersebut.

Jangan Lupa Baca Juga  Cara membuat Show  Facebook  Hide Dan Defer JS

Demikian penjelasan singkat pada malam ini, selamat mencoba dan semoga berhasil. salam blogger

Share Google URL Shortener: Get Short URLloading short url

Bila Anda merasa memang artikel-artikel di blog ini bisa bermanfaat, maka Anda bisa membantu memberikan donasi melalui Paypal Dana hasil dari donasi akan digunakan untuk memperpanjang domain mizipedia.com - Terima kasih.

Comment Policy Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments

Peraturan Berkomentar di mizipediacom
1. Berkomentarlah dengan Relevan dan Sopan
2. Jangan Spam
3. Tidak Porn dan Sara
4. Berkomentar dengan link tanpa relevan maka akan otomatis terhapus
5. Semua komentar pasti akan saya baca dan dibalas. Show Emoticon. Klik ==>

+ Follow
Join on this site

with Google Friend Connect