Cara Mudah Merubah Logo Header Kompi Males Dengan Judul Blog

Ditulis oleh: Ifrod Maksum

Ditulis pada: 11/15/2017

Baca juga:

• Cara Mudah Menghilangkan Garis Paragraf Pada MS Word 2013
• Video Tips / Cara Meningkatkan Penghasilan Google Adsense
• 2 Langkah Mudah dan Simple Mengurutkan Abjad di Excel

Seperti kita tahu bahwa tampilan judul blog pada template kompi males menggunakan gambar, jadi ya harus membuat gambar yang memilki ukuran yang sesuai yaitu 212x90. Namun terkadang para blogger lebih suka menampilkan judul blog secara langsung berupa teks/tulisan bukan gambar.

Dan sebelum mulai masuk ke HTML, perlu diketahui bahwa hal ini menggunakan kompi males v5. Untuk yang menggunakan versi sebelumnya, mungkin bisa disesuaikan sendiri.

bagaimana anda tertarik? yuk intip prosesnya bersama-sama:

Pertama silahkan cari dan hapus kode berikut:

<div class='clear'/>

<div class='logo-blog'>

<a href='/' title='Kompi Preett'><img alt='logo blog' height='90' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNT3p5c-Ry9JsL5aj1r_pv5T6HremB3B6TynSL67iPHFyXqGdF-zDrIcE8CRjqjDdykhGHpABpbbhYi1r4aFWHvrIuMxT170W4CV0omtRW8t3vGtJqRi_GbaClEFR-axL3iulqSqjIspo/s1600/titlekompimales.png' title='Kompi Preett' width='212'/></a>

</div>

hapus juga semua css terkait seperti ini:

.logo-blog {......}

.logo-blog img {.....}

Kedua silahkan cari kode berikut:

#header h1,#header p{font:28px Roboto,sans-serif;text-transform:capitalize;line-height:24px;color:#e74c3c;text-shadow:2px 2px 1px #000;padding:0;margin:0 auto;position:fixed;top:-1000px;left:-1000px;}

kemudian ganti dengan ini

#header h1,#header p{font-size:34px;text-transform:capitalize;line-height:24px;color:#444;padding:0;margin:40px 10px auto;position:relative;}

Ketiga silahkan cari kode berikut:

#header-wrapper{text-align:center;margin-top:-10px;}

lalu ganti dengan yang ini

#header-wrapper{text-align: center;min-height: 0;padding: 30px 0 30px 0;}

Keempat intip lagi kode seperti berikut:

#header h1,#header p{margin-right:0}

kemudian ganti ganti dengan kode ini:

#header h1,#header p{margin:0}

Bagaimana mudah kan? selamat mencoba dan semoga bermanfaat...