Update Perbaikan Untuk Logo Blog Kompi Males

Perbaikan Untuk Logo Blog Kompi Males

Ini adalah update yang ketiga untuk perbaikan logo blog setelah saya merilis template Kompi Males. Update-update ini saya lakukan untuk kenyamanan para pengguna template. 

Kewajiban saya untuk memperbaiki kekurangan pada template yang saya buat sehingga template ini menjadi lebih baik lagi. Ini template kedua saya jadi mohon maaf jika masih ada kesalahan, dan mohon informasi dari pengguna jika kekurangan selain hal modifikasi tampilan blog.

Untuk para pengguna template Kompi Males, silahkan cek update-update sebelumnya di postingannya pada link di bawah ini.
Untuk update ketiga kali ini adalah perbaikan pada logo blog untuk deteksi tag H1 di homepage sebagaimana saya jelaskan pada postingan sebelumnya yang bisa Anda simak pada link di bawah ini.
Untuk itu silahkan buka edit HTML blog Anda dan silahkan cari kode seperti di bawah ini:


                     <b:includable id='title'>
  <b:if cond='data:blog.url == data:blog.homepageUrl'>
<img alt='logo blog' height='90' src='http://1.bp.blogspot.com/-HJBAXm0_Kaw/UxvxnUXaQ9I/AAAAAAAAbbA/FZf8wpAZ24Y/s1600/titlekompimales.png' title='Kompi Males' width='212'/>
  <b:else/>
    <a expr:href='data:blog.homepageUrl' expr:title='data:title' itemprop='url'><span itemprop='name'><img alt='logo blog' height='90' src='http://1.bp.blogspot.com/-HJBAXm0_Kaw/UxvxnUXaQ9I/AAAAAAAAbbA/FZf8wpAZ24Y/s1600/titlekompimales.png' title='Kompi Males' width='212'/></span></a>
  </b:if>
</b:includable>
                   </b:widget>
                 </b:section>

Kemudian ganti dengan kode di bawah ini:


                     <b:includable id='title'>
  <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <data:title/>
  <b:else/>
    <a expr:href='data:blog.homepageUrl' expr:title='data:title' itemprop='url'><span itemprop='name'><data:title/></span></a>
  </b:if>
</b:includable>
                   </b:widget>
                 </b:section>
<div class='logo-blog'>
  <a href='/' title='Homepage'><img alt='logo blog' height='90' src='URL LOGO BLOG' title='Homepage' width='212'/></a>
               </div>

Silahkan ganti URL LOGO BLOG dengan URL logo blog Anda.

Kemudian cari kode CSS di bawah ini


#header-wrapper{width:100%;color:#555;margin:0 auto;padding:0}
#header{float:left;width:212px;margin:0;padding:0}
#header-inner{margin:0 auto;padding:0}
#header h1,#header p{font:28px Oswald;text-transform:uppercase;line-height:24px;color:#e74c3c;text-shadow:2px 2px 1px #000;padding:0;margin:0 auto}
#header h1 a,#header h1.title a:hover{color:#e74c3c;text-decoration:none}
#header .description{color:#fff;font:12px Arial;text-shadow:none;}
#header img{border:0;margin-top:10px;padding:0}
#header2{float:right;width:728px;margin:10px 10px 5px;text-align:left;color:#555}
.header2 .widget{margin:0 auto;padding:0}

Dan ganti dengan kode CSS di bawah ini


#header-wrapper{width:100%;color:#555;margin:0 auto;padding:0;position:relative}
#header{float:left;width:212px;margin:0;padding:0}
#header-inner{margin:0 auto;padding:0}
#header h1,#header p{font:28px Oswald;text-transform:uppercase;line-height:24px;color:#e74c3c;text-shadow:2px 2px 1px #000;padding:0;margin:0 auto;opacity:0}
#header h1 a,#header h1.title a:hover{color:#e74c3c;text-decoration:none;opacity:0}
#header .description{color:#fff;font:12px Arial;text-shadow:none;}
#header img{border:0;margin-top:10px;padding:0}
#header2{float:right;width:728px;margin:10px 10px 5px;text-align:left;color:#555}
.header2 .widget{margin:0 auto;padding:0}
.logo-blog{position:absolute;left:0;bottom:5px}

Kemudian kode float:left ganti dengan position:relative pada kode CSS di bawah ini


.page-menu{background-color:#666;width:100%;margin:0 auto;padding:0;float:left}

Menjadi seperti kode di bawah ini


.page-menu{background-color:#666;width:100%;margin:0 auto;padding:0;position:relative}

Kemudian tambahkan pada kode CSS di bawah ini pada media query @media screen and (max-width: 800px)

.logo-blog{position:relative;margin-top:-20px}

Dan tambahkan juga kode CSS di bawah ini pada media query @media screen and (max-width: 240px)

.logo-blog img{width:100%;height:auto;margin-left:-10px}

Selesai...

Atau silahkan download ulang di postingannya (link downloadnya sudah saya perbaiki dengan file yang sudah diupdate/diperbaiki).

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