Gambar di Samping Judul Posting

kampanye damai pemilu indonesia 2009 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...

8 comments:

  1. wah ternyata ada 2 cara ya....
    hahahaha aku pakai cara yg kedua tapi aku otak-atik sendiri jadi posisinya jadi sebelah kanan... (jadi gini)

    [b:if cond='data:post.url']
    [div align='right'][img src='http://i43.tinypic.com/33tjz9c.png'/][/div][data:post.title/][/a]
    [b:else/]
    [data:post.title/]

    tapi aku juga mau coba cara pertama ahh...
    sepppp.. ooiya sob.. sori aku nggak ijin dulu nih tp udah aku pasang.. aq copi paste icon home dibawah posting..
    boleh nggak .. kalau nggak boleh ya aku ganti deh... (hiks hiks)

    ReplyDelete
  2. @3ndur0 sipppp tuh pren...

    Yoi bro,,,ndak p2....

    thanks yo infonya..

    ReplyDelete
  3. nahhhh....baju yang ini kelihatAN enak dilihat. ManTAP.....................

    ReplyDelete
  4. haha.. nice inpo...
    simple yah triknya...

    ReplyDelete
  5. sob kalau gambarnya beda-beda tiap postingan bisa ngga ?

    mohon di replay di blogku yah

    ReplyDelete
  6. nice trik
    tetapi ada gx cra lain yg dapat menentukan size gambarnya

    ReplyDelete
  7. gan mksudnya kode gambar itu yg mana low gmbr mlik sndiri

    ReplyDelete

Klo ada pertanyaan, masukan ato tips yang lebih mudah, koment aja y..Insya Allah Ayas bales.. Thanks all..moga2 bermanfaat

 
Copyright © 2013. About - Sitemap - Contact - Privacy
Template Seo Elite oleh Bamz