Cara Menambah Icon Gambar Pada Judul Posting | Buku Catatan si Ugi

Berikut adalah contoh judul posting yang telah ditambahkan icon gambar

gambar pada judul posting

Cara Membuat Icon Gambar Pada Judul Posting
  •  Siapkan gambar atau logo yang ingin anda pasang dalam format .gif atau .png karena kualitasnya lebih bagus
  • Resize gambarnya menjadi (20px x 20px) atau (25px x 25px). Usahakan ukuran gambarnya jangan terlalu besar agar loading blog tidak berat.
  • Jika sudah, upload gambarnya ke image hosting yang anda gunakan. Kalau saya sendiri menggunakan Photobucket untuk menyimpan gambar.
  • Setelah upload, copy alamat gambarnya. Contoh http://i291.photobucket.com/albums/ll311/caprt3a/My%20Galery/writing12.gif 
  • Buka blogger. Masuk ke menu Design -> Edit HTML
  • Cari kode seperti dibawah ini:
.post h3 {
margin:.5em 0;
padding:0px 0px 0px 10px;
font-size:140%;
font-weight:bold;

font-style:italic;
line-height:1.3em;
color:#333;
  • Setiap template mempunyai kode yang berbeda-beda. Jadi yang perlu anda perhatikan adalah tulisan post h3.
  • Kalau sudah ketemu, tambahkan kode background:url(URL gambar) no-repeat; dan edit nilai padding menjadi 0px 0px 05px 30px. Sehingga hasilnya menjadi seperti ini
.post h3 {
background:url(URL gambar) no-repeat;
margin:.5em 0;

padding:
0px 0px 05px 30px;
font-size:140%;
font-weight:bold;

font-style:italic;
line-height:1.3em;
color:#333;
 Keterangan:
Ganti URL gambar dengan alamat gambar anda. Contoh http://i291.photobucket.com/albums/ll311/caprt3a/My%20Galery/writing12.gif
  • Kalau sudah, klik Save Template.
  • Selesai . Silahkan lihat hasilnya




0 komentar:

Post a Comment



Catatan :

Untuk menyisipkan gambar kedalam komentar, gunakan tag : [img]URL_Gambar[/img]
atau <i rel="image">URL_Gambar</i>
Untuk Video Youtube : [youtube]URL_Video[/youtube]
atau <i rel="youtube">URL_Video</i>
Untuk "Kutipan", gunakan : [blockquote]Kutipan_Anda[/blockquote]
atau <b rel="quote">Kutipan_Anda</b>
Untuk menyisipkan Kode: [code]KODE[/code]
atau <i rel="code">KODE</i>
atau <i rel="pre">KODE</i>
Dan untuk menyisipkan smiles/ emoticon, lihat kode Emoticon







 

Anda sudah mengaktifkan penyaringan konten ( AdBlocker di Aktifkan )

Mohon maaf untuk sementara Anda tidak dapat melihat halaman ini, silahkan kembali lagi setelah Anda menonaktifkan filter yang Anda gunakan. Abaikan