Membuat Text Style Untuk Judul Blog or Header

Tulisan ini sebenarnya merupakan tanggapan salah satu rekan boogle yang request tentang membuat tulisan judul blog atau header seperti yang terlihat di www.jaloee.blogspot.com. atau saudara bisa lihat pada screenshot di bawah ini.

Kalau menggunakan program grafis seperti photoshop untuk membuat text seperti gambar di atas sangatlah mudah, Namun pada blog jaloee tersebut boogle menggunakan sedikit trik . Keuntunganya tentu saja lebih ringan waktu tunggu loding-nya jika di bandingkan menggunakan sebuah gambar.

Beginilah Caranya

Untuk keamanan backup dulu source templatenya.

1. pilih tab Edit Html kemudian centang/cek tulisan “Expand Widget Templates”.

2. Setelah itu cari kode #Header H1 ( heading 1 ) seperti berikut.

#header h1 {
  font-size:……..
  dan el-el
}

3 Kemudian ganti dengan kode ini.

#header p {margin:3px 0 20px}
#header h1 {
font: bold 1.75em "Trebuchet MS", Arial, Helvetica, sans-serif;
letter-spacing: -1px; padding: 2px 0 0 0px;
margin: 0; background: inherit;
}
h1 .red{ color: #DF5900;background: inherit;}

*note : tentu saja sesuaikan ukuran font, warna dan margin-nya menurut selera anda.

4. Kemudian cari html berikut

<div id='header-inner'>
<div class='titlewrapper'>
<h1 class='title'>
<b:include name='title'/>
</h1>
</div>
<b:include name='description'/>
</div>

5. Setelah itu ganti dengan kode berikut..

<div id='header-inner'>
<div class='logo'>
        <h1><a href='http://www.jaloee.blogspot.com/' title='The best tutorial photoshop on the net!'>Beloon <span class='red'>Online</span>^{3eX edition}</a></h1>
            <p>What shall your read and think today?</p>
      </div>
</div>

* Note : Ganti tulisan berwarna dengan url (alamat blog)  dan slogan blog saudara.

Akhirnya

Setiap template mungkin memuat kode yang berbeda-beda, tapi jika saudara jeli dan teliti, boogle yakin anda dapat melakukanya. Kreatifitas dan inprovisasi anda itu yang paling utama.

Page views this post: reader