Update Perbaikan Untuk Logo Blog Kompi Males

Ini yaitu update yang ketiga untuk perbaikan logo blog sesudah 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 kalau masih ada kesalahan, dan mohon gosip dari pengguna kalau kekurangan selain hal modifikasi tampilan blog.

Untuk para pengguna template Kompi Males, silahkan cek update-update sebelumnya di postingannya pada link di bawah ini.

• Baca juga: Kompi Males - Blogger Template Responsive Dan Valid HTML5

Untuk update ketiga kali ini yaitu perbaikan pada logo blog untuk deteksi tag H1 di homepage sebagaimana saya jelaskan pada postingan sebelumnya yang dapat Anda simak pada link di bawah ini.

• Baca juga: Perbaikan Logo Blog Pada Header Blog

Untuk itu silahkan buka edit HTML blog Anda dan silahkan cari arahan menyerupai di bawah ini:

                      <b:includable id='title'>
   <b:if cond='data:blog.url == data:blog.homepageUrl'>
 <img alt='logo blog' height='90' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5MoVWSdpOIVAZ7EPUETvUd7EPksWHQQ1VO3TECdhEODzBYq7nTs9tFIVXR0gZPXVAPUFdYEUwwemon9YdAPdtEnzEGSeCm7MT5UknuaL_6lN1eY-AAqCCSp78qVGMDVP3EdnE6Fq2NQ0/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5MoVWSdpOIVAZ7EPUETvUd7EPksWHQQ1VO3TECdhEODzBYq7nTs9tFIVXR0gZPXVAPUFdYEUwwemon9YdAPdtEnzEGSeCm7MT5UknuaL_6lN1eY-AAqCCSp78qVGMDVP3EdnE6Fq2NQ0/s1600/titlekompimales.png' title='Kompi Males' width='212'/></span></a>
   </b:if>
 </b:includable>
                    </b:widget>
                  </b:section>

Kemudian ganti dengan arahan 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 arahan 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 arahan 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 arahan float:left ganti dengan position:relative pada arahan CSS di bawah ini

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

Menjadi menyerupai arahan di bawah ini

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

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

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

Dan tambahkan juga arahan 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).

Sumber https://www.kompiajaib.com/

Share this post