Menambah Icon Gambar Pada Judul Posting

Posted by Herman on Tuesday, May 26, 2009 15 comments

Beberapa hari yang lalu, ada yang menanyakan kesaya, apakah judul posting bisa dipasang gambar? Jawabannya tentu saja bisa dan sangat mudah malah sengihnampakgigi. Anda bisa memasang icon, logo ataupun foto anda disana.

Berikut adalah contoh judul posting yang telah ditambahin icon gambar

gambar pada judul postingGimana menarik bukan? Nah bagi anda yang ingin mencobanya. Silahkan ikuti langkah-langkah dibawah ini:

1. Siapkan gambar atau logo yang ingin anda pasang dalam format .gif atau .png karena kualitasnya lebih bagus

2. Resize gambarnya menjadi (20px x 20px) atau (25px x 25px). Usahakan ukuran gambarnya jangan terlalu besar agar loading blog tidak berat.

3. Jika sudah, upload gambarnya ke image hosting yang anda gunakan. Kalau saya sendiri menggunakan Photobucket untuk menyimpan gambar.

4. Setelah upload, copy alamat gambarnya. Contoh http://i37.photobucket.com/albums/e74/mrphoto16/cool.png

5. Buka blogger. Masuk ke menu Design -> Edit HTML

6. 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;

7. Setiap template mempunyai kode yang berbeda-beda. Jadi yang perlu anda perhatikan adalah tulisan post h3.

8. 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;

Ganti URL gambar dengan alamat gambar anda. Contoh http://i37.photobucket.com/albums/e74/mrphoto16/cool.png

9. Kalau sudah, klik Save Template.

10. Selesai . Silahkan lihat hasilnya


Recent Posts:

15 comments

insanitis37 said... 19 December, 2009
makasih tipsnya mas,,menarik sekali
Fathur Rohman said... 05 February, 2010
:))
Darma Saputra said... 16 February, 2010
Halloo...
Terimakasih Mas atas infonya sangat bermanfaat sekali, dan salam buat semua teman-teman Blogger, Jangan lupa, kalau ada waktu jalan-jalan sebentar ke blog Bujang Riau http://www.darma-saputra.co.cc
Fadliansyah(fo_fot) said... 15 March, 2010
wah...keren mas...!?thanks
BRAM IRIANTO said... 28 May, 2010
Demak, 28 Mei 2010, Jam : 10.40 WIB

Menambahkan icon pada judul postingan, memang sangat menarik, hanya saja saya masih kesulitan memasangnya karena jenis template tidak sama, tapi mudah-mudahan kedepannya bisa sukses.

Hormat kami,
BRAM IRIANTO
rockyblank@gmail.com
http://www.kencangratis.blogspot.com
Bandang said... 06 July, 2010
mantap nich blognya dan tips2 nya,,,,
viksana said... 27 August, 2010
Menarik infonya gan...tkl mau nambah label di samping judul postingan gmn gan??..

kl ada waktu silahkan mampir ke tempat saya...thnks
Herman said... 28 August, 2010
@viksana: susah mau dijelasin disini bro karena disini tidak support kode HTML. klu berminat tanya via email saja ya :)
Anonymous said... 10 November, 2010
Howdy to exploiters of this website!
I'm happy to be here.
I invite you our sites:
[url=http://www.nasze-pozycjonowanie.pl/1/pielegnacja-paznokci/]pielegnacja paznokci[/url]
Look at it! Goodbye!
Anonymous said... 16 November, 2010
Letchworth Centre For Complimentary Medicine http://michigancapitals.org/ - buy terbinafine online Wearing sandals when you are using a swimming pool, hot tub, and the hot tub are also measures that you will need to take. [url=http://michigancapitals.org/]terbinafine online[/url]
Guntur Latif said... 24 April, 2011
=))
ipan-dolars said... 26 May, 2011
:))
Blog Dedhe said... 31 May, 2011
makasi infonya mas , salam kenal
Er'end said... 12 October, 2011
Makasih tipsnya Gan,berhasil ku terapkan di blogku.Salam hangat dari Ppapua.
ngocop16 said... 24 December, 2011
thanks

:)) :)] ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* : 8-} ~x( :-t b-( :-L x( =))

Post a Comment