Kompiana - Template Biru Modifikasi Dari Johny Wusss

Tadinya mau nungguin Maskolis untuk meminta reviewnya untuk template editan saya. Tapi kayaknya waktu bertapa Maskolis akan masih usang hehehe entah kapan mas yang satu ini akan muncul lagi. Template editan ini saya ambil dasarnya dari Johny Wusss yang sudah terbukti wuusss loadingnya hehehe....

Sehingga dibutuhkan template editan ini loadingnya akan ibarat kakaknya hehehe... Kaprikornus saya tidak banyak menambahkan javascript, hanya javascript untuk related post, cutter untuk thumbnail di homepage, dan paginasi homepage. Perubahan lain yang dilakukan yaitu di tempat header, footer, tampilan homepage. Dan tentunya perubahan warna template yang didominasi warna biru sehingga saya kasih title postingan ini "Kompiana - Template Biru Modifikasi Dari Johny Wusss".

Entah kenapa saya paling seneng pakai nama "Kompi" pada blog-blog saya ibarat Kompi Ajaib, Kompi Side, Kompi Wide, dan kini Kompiana. Tampilannya ibarat gambar di bawah ini.

DEMO | DOWNLOAD

Fitur-fitur:

1. Sudah terpasang tag h1, h2, h3
2. Menu Header, Menu Statis Page, Menu Footer
3. Tombol Scroll To Top
4. Translator ringan
5. Sidebar, Footer 3 kolom
6. Slot iklan header di bawah menu

Untuk nilai SEO template ini dikala dicek di Chkme menerima angka 100%, silahkan cek lagi oleh Anda di Chkme. Untuk validasi HTML5, hanya terdapat 2 error di homepage.

File xml-nya saya taruh di dalam notepad, jadi untuk memakainya Anda hanya perlu meng-copy seluruh kodenya dan paste di edit HTML blog Anda. Jika ada obrolan box yang meminta hapus widget, silahkan hapus widget supaya widget yang tampil sesuai dengan demonya.

Untuk mengganti gambar "title blog" silahkan cari kode 

#header-wrapper{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNdQZaphX-zwv5V2SGGse3VJQHgM5L1MNc19uWLEvnQdzC8NPVw507ShiyKGjYv_gJsTyrL-uaYJU-jp6opcnLD4ZBiZCRG_01AaiGc_U1M_N9EkNyi_xZtHRZv0PlIuFLz0oJSdJNtM0/s1600/Logo+Kompiana+copy.png) ;width:910px;margin:0 auto;overflow:hidden}

Silahkan ganti gambar background-nya dengan gambar Anda sendiri dengan dimensi 910px x 50px, upload di blog Anda dan ganti url berwarna merah di atas. Biar simpel silahkan tiru aja gambar yang sudah ada. Copy url yang berwarna merah di atas, paste di search kafetaria browser Anda dan save gambar ke komputer Anda. Modifikasi dengan photoshop dan simpan jadinya dengan format PNG dengan background transparant.

Untuk hidangan statis page akan otomatis terisi dikala Anda menciptakan statis page. Dan untuk hidangan header silahkan cari instruksi ibarat di bawah ini.

<div id='top-menu'>
<div id='topbar'>
<ul id='top'>
<li class='home'><a href='/' title='Home'>Home</a></li>
<li><a href='#' title='Menu 1'>Menu 1</a></li>
<li><a class='trigger' href='#' title='Drop hidangan 1'>Drop hidangan 1</a>
<ul>
<li><a href='/' title='Sub hidangan 1'>Sub hidangan 1</a></li>
<li><a href='/' title='Sub hidangan 2'>Sub hidangan 2</a></li>
<li><a href='/' title='Sub hidangan 3'>Sub hidangan 3</a></li>
<li><a href='/' title='Sub hidangan 4'>Sub hidangan 4</a></li>
</ul>
</li>
<li><a class='trigger' href='#' title='Drop hidangan 2'>Drop hidangan 2</a>
<ul>
<li><a href='/' title='Sub hidangan 1'>Sub hidangan 1</a></li>
<li><a href='/' title='Sub hidangan 2'>Sub hidangan 2</a></li>
<li><a href='/' title='Sub hidangan 3'>Sub hidangan 3</a></li>
<li><a href='/' title='Sub hidangan 4'>Sub hidangan 4</a></li>
<li><a href='/' title='Sub hidangan 5'>Sub hidangan 5</a></li>
<li><a href='/' title='Sub hidangan 6'>Sub hidangan 6</a></li>
</ul>
</li>
<li><a class='trigger' href='#' title='Drop hidangan 3'>Drop hidangan 3</a>
<ul>
<li><a href='/' title='Sub hidangan 1'>Sub hidangan 1</a></li>
<li><a href='/' title='Sub hidangan 2'>Sub hidangan 2</a></li>
<li><a href='/' title='Sub hidangan 3'>Sub hidangan 3</a></li>
<li><a href='/' title='Sub hidangan 4'>Sub hidangan 4</a></li>
<li><a href='/' title='Sub hidangan 5'>Sub hidangan 5</a></li>
<li><a href='/' title='Sub hidangan 6'>Sub hidangan 6</a></li>
<li><a href='/' title='Sub hidangan 7'>Sub hidangan 7</a></li>
<li><a href='/' title='Sub hidangan 8'>Sub hidangan 8</a></li>
</ul>
</li>
<li><a href='#' title='Menu 2'>Menu 2</a></li>
</ul>

Silahkan ganti "/" atau "#" dengan url label blog Anda. Jangan lupa untuk mengganti "title" dan Tulisan yang tampil di hidangan supaya nilai SEO template tidak berkurang.

Untuk hidangan di footer silahkan cari instruksi di bawah ini:

<div class='menubottom'>
<ul>
  <li><a href='/' target='_blank' title='About'>About</a></li>
  <li><a href='/' target='_blank' title='Contact'>Contact</a></li>
  <li><a href='/' target='_blank' title='Chat Author'>Chat Author</a></li>
  <li><a href='/' target='_blank' title='Sitemap'>Sitemap</a></li>
  <li><a href='/' target='_blank' title='Exchange'>Exchange</a></li>
</ul>

Untuk popular post, silahkan atur di tata letak dan hilangkan tanda "centang" pada image thumbnail. Ini supaya nilai Seo template tidak berkurang alasannya ialah thumbnail pada popular post ternyata menjadikan berkurangnya nilai SEO blog.

Untuk widget Recent Post silahkan copy instruksi di bawah ini pada tata letak atau layout pada widget Recent Post.

<div style="background:none repeat scroll 0% 0%; border: 0px; height: 250px; overflow: auto; padding: 10px;">
<span id="pbl_labels"></span>
<div id="pbl_posts">
Recent Posts </div>

<script type="text/javascript">
var jumlah_maksimum_post = 10;
var dengan_ringkasan = true;
var jumlah_karakter_ringkasan = 100;
</script>

<script type="text/javascript" src="http://yourjavascript.com/36152802110/recentposts.js">
</script>

<script src="http://kompiana.blogspot.com/feeds/posts/default?alt=json-in-script&amp;callback=onLoadFeed">
</script></div>

Ganti goresan pena yang berwarna merah dengan nama blog Anda.

Untuk widget komentar, silahkan isikan instruksi di bawah ini pada widget Comment di tata letak atau layout.

<script type="text/javascript">
//<![CDATA[
    // Recent Comments Settings
    var
numComments  = 5,
showAvatar  = true,
avatarSize  = 30,
characters  = 60,
defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",
hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="http://html-scripts.googlecode.com/files/rcentcmmntavr.js"></script>
<script type="text/javascript" src="http://kompiana.blogspot.com/feeds/comments/default?alt=json&amp;callback=tb_recent_comments&amp;max-results=5"></script>

Ganti goresan pena yang berwarna merah dengan nama blog Anda.

Untuk widget Subscribe silahkan copy instruksi di bawah ini pada widget Subscribe di tata letak atau layout.

<div style="background: none; border:none; padding: 4px;">
<div class='social' style='padding: 0pt 0pt 0pt 5px;'>
<table><tbody><tr><td>
<a href='http://feedburner.google.com/fb/a/mailverify?uri=kompiajaib' target='_blank' title='Subscribe via Email'><img alt='email' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWKfy5F5O-7hapsJtiWWBTubHWvyPmpCO_fk5IFkH1oUsyS4iQuPCWjiNJA7WNfHQ9x08tuVLzq8gFf3Q_6cNgqxjyPeUgzrvDg4S2dEdYTFGiaKGIKjSPUZRGfwp0g0JnHDamvlUPoEk/s40/mail.png' title='Subscribe via Email'/></a> </td>
<td> <a href='http://feeds.feedburner.com/kompiajaib' target='_blank' title='Subscribe via RSS'><img alt='rssfeed' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3-edJ1mbpBBw7WtRaHRB-OGB-PtCToG6UHdikl84_hJpMwJeGubf7J5Y383xAFFFUi6WqmcMgi_9KPAZ29-0lQEzKsdwNyGZk_VofbtOoSdkLrCaxg0uKwqLdkltmItdYVJeRYFRhiqI/s40/rss.png' title='Subscribe via RSS'/></a> </td>
<td> <a href='http://twitter.com/KompiAjaib' target='_blank' title='Follow on Twitter'><img alt='twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRIwek4k_xFRwYN5FJlzdhC1kbCssCB1vtkvP8i-uIQ4-0RqVxl6wrBTlv4d9XYBTD-MV19Q0fVD9nbf5vQRAX87RwAvYFQbEXKQk_wu1C574RK0iYswtDYvFsO3vS8xH_GLTkAYXWP2w/s40/twitter.png' title='Follow on Twitter'/></a> </td>
<td> <a href='http://www.facebook.com/pages/Kompi-Ajaib/395526477133955' target='_blank' title=' Like me on Facebook'><img alt='facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1LZavlsmzkiJN5Fp4KTK-L9qPOriv8TgU5HSYS8LOlgq465P0y3AqHA02PbSt6wTVfFprfnSXtUy07vrCWPpMTz7b1ntzZTbpmjq4VtQ8nWsX-gnWOaZqcGAv7p6nsveQJbVvuTywF-I/s40/facebook.png' title=' Like me on Facebook'/></a> </td>
<td> <a href='https://plus.google.com/117950600521728942551' target='_blank' title='Follow on G+'><img alt='blog' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5aG5eisDW0o0y6Dkn_J9jxwYpWAb4pSo74xNqJP2W64nfSgrCRbj0I6VC8AtYMdTW8962yFO-pLLLoSeIfjCDaQScF-Vk4w_46WUtNWtE0-vzESC8PaizAZA2MCbTI533VHMcuhgLM2o/s1600/g+.png' title='Follow on G+'/></a>
</td></tr></tbody></table></div> <br/>

<div style='text-align: center;'>
<a href='http://www.blogger.com/follow-blog.g?blogID=2771657301427138693' target='_blank' title='Follow this blog'><img alt='blog' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPNFjRHgTki-8t080XrCqfOmQIVcIfwZ1LrekMIvrkVkIpOJfFwwv46dkoz-PWvj8H9Ml-x8HWQcjSU7cPBD7RlO_sIZR85Fa24C-jg7QKgq0G2CetTowMfHm311k9QlKf6UW2aGeY5Ss/s1600/Follower.png' title='Follow this blog'/></a>
</div><br/>

<div style='text-align: center;'>
<span style='color: #555; font:bold 13px Arial;'>
If you enjoyed this article just click the icons<br/> above for subscribe to our feeds<br/> or like and follow our Facebook, Twitter,<br/> G+ and Blog to receive more<br/> great content just like it.</span><br/><br/>
<a href='http://feeds.feedburner.com/KompiAjaib' title='Readers this blog'><img alt='readers' height='26' src='http://feeds.feedburner.com/ fc/KompiAjaib?bg=000000&amp;fg=FFFFFF&amp;anim=0' width='88' title='Readers this blog'/></a></div></div>

Untuk tutorialnya silakan baca postingannya DI SINI.

Dan terakhir, dikala Anda mengatur setting untuk jumlah postingan yang tampil di homepage, maka Anda juga harus mengatur jumlahnya pada setting paginasi homepage. Silahkan cari instruksi di bawah ini di edit HTML.

<script type='text/javascript'>
    var postperpage=5;
    var numshowpage=4;
    var upPageWord =&#39;&#171; Previous &#39;;
    var downPageWord =&#39;Next &#187;&#39;;
    var urlactivepage=location.href;
    var home_page=&quot;/&quot;;
  </script>

Ganti angka 5 yang berwarna merah dengan jumlah yang Anda tentukan pada setting-an untuk jumlah postingan yang tampil di homepage.

Sepertinya hanya itu yang perlu Anda ganti atau rubah supaya tampilannya sesuai dengan demonya. Seperti biasa dimohon untuk tidak menghilangkan atau merubah credit link di kanan bawah blog. Namun untuk kredit link di sebelah kiri sanggup Anda rubah sesuka hati Anda.

UPDATE:
Bagi pengguna template yang mengalami persoalan pada tombol Readmore-nya, silahkan atasi dengan cara ibarat di bawah ini:

Silahkan cari instruksi ibarat di bawah ini:

http://4.bp.blogspot.com/-LAGOPpd8H_o/UUVvnuO4yEI/AAAAAAAAAfE/Q26j4shYyzE/s1600/readmore.png

Kemudian silahkan ganti dengan instruksi di bawah ini:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRHbojP3lgia0uq2LMRaWS9ny-RoUPEmv6OzYOIbdI6wF_DV95gLFNK_dJL2P6J1LstiHrU1s4L_euAoRQWPOFT4UCcMsI49pVBRz3Ez1sOdILqdl5TEO1K2KLf3yUzFrfukZ-_ROPglBb/s1600/readmore.png

Sumber https://www.kompiajaib.com/

Share this post