Gambar di Samping Judul Posting

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;
}

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/>

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/>

Selanjutnya, tinggal save aja, trus preview... Jadi deh..

Gimana? GAMPANG KOK!!! Klo ada yang belum berhasil, silahkan tinggalin koment..

Thanks... C u...