Untuk membuat blog kita lebih menarik, kita bisa menambahkan gambar/image disamping judul postingan kita. Bisa menambahkannya disebelah kiri judul postingan, atau bisa juga disebelah kanan judul postingan.Ada 2 trik untuk menambahkan gambar/image disamping judul postingan kita. Tentunya ke 2 trik tersebut memiliki kelemahan dan kelebihan.
Ke 2 trik itu adalah dengan menambahkan kode gambar di sebelah kode judul postingan kita, sedangkan trik kedua adalah 'bermain' dengan background judul postingan.
Bagaimana triknya, dan apa kelebihan dan kekurangan masing-masing trik tersebut, yuk kita pelajari bareng...
Trik 1 : Bermain dengan background postingan
Jika kita ingin meletakkan gambar/image disebelah KANAN judul postingan kita, Ayas pikir trik ini yang lebih mudah. Jika trik ini ingin kita gunakan untuk memberikan gambar/image di sebelah kiri postingan kita, maka akan sedikit sulit, karena kita harus mengatur posisi judul postingan.
Hasil dari trik ini, bisa Sodara liat di blog Ayas ini.
Berikut Triknya :
Cari kode berikut :
.post-title atau .post h1
Biasanya, beda template, akan beda kodenya. Pokoknya, ini adalah properties atau pengaturan untuk judul postingan kita.
Setelah ketemu, Sodara akan melihat kode2 seperti ini :
.post-title {
margin: 0;
padding: 0;
font: Times New Roman;
font-size: 160%;
font-weight: bold;
line-height: 45px;
border-bottom:2px solid #f2f2f2;
background: #000;
}
margin: 0;
padding: 0;
font: Times New Roman;
font-size: 160%;
font-weight: bold;
line-height: 45px;
border-bottom:2px solid #f2f2f2;
background: #000;
}
Perhatikan kode berwarna merah
Nah, setelah ketemu, tinggal tambahin kode gambar pada background nya.
Ganti dengan kode seperti ini :
background: #000 url(http://i43.tinypic.com/33tjz9c.png) no-repeat right center ;
Pemberian kode 'no-repeat right center' adalah wajib, agar tampilan bisa gambar akan teratur.
Kode yang berwarna hijau, silahkan ganti dengan kode gambar Sodara. Lalu simpan, dan preview.
Untuk 'line-height', sesuaikan dengan tinggi image Sodara, supaya gambar bisa terlihat dengan sempurna.
Trik 2 : Menambahkan kode gambar disebelah kode judul postingan
Trik ke 2 ini memudahkan Anda untuk meletakkan gambar/image disebelah KIRI judul postingan. Mengapa? karena dengan trik ini, Sodara tidak perlu lagi mengatur posisi judul postingan.
Contoh dari penggunaan trik ini bisa Sodara lihat disini.
Berikut triknya :
Cari kode berikut (Cara termudah dengan menggunakan Ctrl+F) :
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
Jika sudah ketemu, tambahkan kode gambar berikut tepat di ATAS kode tersebut :
<img src='http://i43.tinypic.com/33tjz9c.png'/>
Kode berwarna hijau, silahkan ganti dengan kode gambar Sodara
Sehingga, keseluruhan kode akan menjadi seperti ini :
<img src='http://i43.tinypic.com/33tjz9c.png'/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
Selanjutnya, tinggal save aja, trus preview... Jadi deh..
Gimana? GAMPANG KOK!!! Klo ada yang belum berhasil, silahkan tinggalin koment..
Thanks... C u...
