Spiga

Menyisipkan Gambar sebelum Judul Posting

Dear All My Lovely Friend’s,,,


Menambah cantik template Blog kita adalah suatu kewajiban dari para Blogger. Hanya saja dalam menambah pernak pernik untuk mempercantik harus didahului dengan berbagai pertimbangan yang banyak. Jangan sampai hal itu malah menambah kacau template kita atau menambah beban dari loading time Blog kita. Berbagai cara tanpa mempengaruhi loading time telah di kupas tuntas oleh para master template. Hanya saja kali ini qu ingin memberikan tutorial tentang “Menyisipkan gambar sebelum Judul Posting”.

Kalian pasti pernag Blogwalking dan menemukan ada sebuah Blog yang di sebelah persis Judul Postingnya memiliki gambar. Beberapa kawan sempat penasaran hingga akhirnya qu coba untuk menuliskan tutorialnya agar kalian bisa memilikinya. Ada beberapa langkah yang harus kalian lakukan, maka dari itu coba pahami langkah yang qu berikan secara seksama oche……

Langkah pertama :
1. Carilah gambar yang kalian inginkan, kalian bisa mencarinya melalu search engine seperti google atau lainnya.
2. Gambar yang kalian cari minimal memiliki ukuran sebesar 40 px x 40 px. Harapannya agar gambar tersebut Fit atau sesuai dengan Judul posting kalian.
3. Upload gambar tersebut ke tempat seperti Imgaeshack, photobucket atau lainnya. Tapi sedikit rekomendasi buat kalian lebih baik upload ke piccasa. Alasannya agar dibawah hosting yang sama yaitu google.
4. Setelah upload selesai kalian ambil direct url gambar tersebut, biasanya code nya seperti :

http://i991.photobucket.com/albums/af32/ludefa/os_27.png

5. Lalu rubah code tersebut menjadi seperti ini :

<img src=”http://i991.photobucket.com/albums/af32/ludefa/os_27.png”width="40" hight="40" border="0"> </img>

6. Lalu taruh sementara code tersebut di notepad dan ikuti langkah kedua

Langkah Kedua :
1. Log in ke blogger -> Dasboard
2. Klik Layouts -> Edit HTML
3. Centang “Expand Widget Template” dan Back up template kalian untuk menjaga jika terjadi error.
4. Cari kode di bawah ini (gunakan CTRL + F)

<a expr:href='data:post.url'> <data:post.title/></a>
<b:else/>

5. Letakan URL image di antara <a expr:href='data:post.url'> dan <data:post.title/></a>

Sehingga baris kodenya seperti ini :

<a expr:href='data:post.url'> <img src="http://i991.photobucket.com/albums/af32/ludefa/os_27.png" width="40" hight="40" border="0"> </img> &nbsp;&nbsp;<data:post.title/></a>

Penambahan kode &nbsp;&nbsp; untuk memberi jarak antara gambar dan judul postingan.

6. Selesai, klik Save Template
7. Lihat hasilnya.

Bila masih belum berhasil atau bahkan tambah kacau template kalian, ada beberapa hal yang mungkin salah. Kesalahan biasanya akibat bentuk gambar kalian terlalu besar dan kalian paksakan untuk menjadi tampilan gambar sebelum Judul.

Cukup sudah tutorial yang qu berikan, tidak ada masalah yang tidak memiliki pemecahannya dan hikmah dari masalah tersebut. Terima Kasih buat para Blogger dan Netter yang sudah mau untuk membaca tutorial kali ini. Jangan lupa ya seperti biasa kasih comment dan Keep Blogging……

Best Regard


Natha Lia




Artikel Lainnya :




7 komentar:

  Oby Syam

1 Maret 2010 pukul 00.51

ooh...............................
makasih yah mbak infonya,,,,,,,,,,,,,,,,,,,,,,,,,,

  musthofa-idris

20 Maret 2010 pukul 23.41

thank's bgt atas postinganx...

  PAPASUKA

17 Mei 2010 pukul 22.34

banner mbak udh sy pasang di http://papasuka.com/komunitas/portal.php

  Dian

2 Desember 2010 pukul 22.33

Makasih postingannya mba...

  _ D14N _

2 Desember 2010 pukul 22.38

Makasih postingannya mba...

  imaginasiqu

28 Desember 2010 pukul 06.34

contona gimana mbak?? :)

  Exstacycop

13 Maret 2011 pukul 07.19

Salam Likum ..

Mbak" Newbie Mau Nanya Ni,kalo bikin Search form-box nyang kaya blog ini,yang ntu diatas pojok kanan gmn si mbak .. cakaep banget,tulung ya mba di ajarken ..
Tks Sebelum nya ..

Posting Komentar


Terima Kasih telah membaca Article Natha Lia semoga dapat bermanfaat.

Blog ini menganut sistem DO FOLLOW jadi komentar kalian tidak akan sia - sia. Komentar yang mengandung SPAM, SARA atau PORN akan dihapus.

Bila ada Pertanyaan lebih lanjut silahkan hubungi melalui :

atau