Memperbaiki Tampilan Layout Template Kompi Ajaib

Pada kedua template yang kemarin saya share, saya menggunakan trik menyembunyikan CSS reset Blogger yang berbeda dari trik yang pernah saya share DI SINI. Biarpun template Kompi Ajaib dan template gelap Kompi Ajaib menggunakan trik yang berbeda untuk menyembunyikan CSS Reset Blogger, namun keduanya tetap valid HTML5.

Namun saya tidak menyadari bahwa layout atau tata letak di dashboard Blogger ternyata sedikit error yaitu bagian gadget sidebar menyusup ke sebelah kiri dan terpotong. Hal ini baru saya ketahui setelah salah seorang pengguna template menanyakan masalah ini. Ini disebabkan karena ukuran lebar main-wrapper dan sidebar di homepage dan postpage berbeda. Tampilan layout template Kompi Ajaib sebelum diperbaiki tampak seperti gambar di bawah ini.


Trik yang saya gunakan untuk menyembunyikan CSS Reset Blogger pada kedua template tersebut seperti berikut:

Mengganti kode <head> menjadi &lt;head&gt;
Dan mengganti kode </head> menjadi &lt;/head&gt;&lt;!--<head/>--&gt; 

Berbeda kan dengan trik yang sudah saya sharing dulu? Pada penggunaan trik yang dulu pun memiliki masalah yang sama yaitu tampilan layoutnya yang error, namun hal ini bisa diatasi oleh Kang Ismet pada postingannya DI SINI

Nah untuk mengatasi tampilan layout yang error pada template Kompi Ajaib ini (menggunakan trik menyembunyikan CSS Reset Blogger seperti di atas tadi), bagi yang menggunakan template Kompi Ajaib silahkan ikuti caranya di bawah ini.

Silahkan ganti kode <b:skin><![CDATA[ dengan kode di bawah ini.


&lt;style type=&quot;text/css&quot;&gt;
&lt;!-- /*<b:skin><![CDATA[
#main-wrapper{width:70.2%;float:left;}
#sidebar-right{width:29.8%;float:right;}
*/]]></b:skin>
<style type='text/css'>
/*<![CDATA[*/

Kemudian ganti kode ]]></b:skin> dengan kode di bawah ini.


/*]]>*/
</style>

Kemudian silahkan save template editornya, dan sekarang silahkan cek tampilan layout atau tata letak Blogger-nya. Jika Anda menggunakan trik di ats dengan benar, maka tampilan layout akan menjadi rapih seperti gambar berikut.

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