Skip to content

Menampilkan Gambar di Sidebar WordPress & Blogspot

August 4, 2009

Untuk menampilkan gambar atau logo di blog khususnya di samping

kanan atau kiri blog WordPress (sidebar), bisa menggunakan kode html lewat Widget Text. Caranya

setelah masuk ke halaman admin, pilih menu Design/Desain selanjutnya pilih

Widget sehingga muncul halaman sebagai berikut.

Klik Add pada Widget Text di daftar

pilihan Available Widget dibagian kiri, sehingga akan muncul widget Text di

bagian Current Widget sebelah kanan. Kemudian klik edit sehingga terlihat dua

kolom kosong. Yang atas adalah kolom untuk judul yang akan ditampilkan. Kosongkan kolom bila

tidak mengingkan adanya judul widget. Selanjutnya masukkan kode html pada kolom di bawahnya.

Pada dasarnya gambar yang akan dimunculkan harus dihostingkan

dulu. Foto atau gambar tersebut yag biasanya berformat *.jpg *.gif atupun *.png bisa

dihostingkan di penyedia free image hosting yan banyak di internet. Atau bila foto Anda sudah

diupload misal di Friendster, Flickr dlsb, Anda cukup meng-copy address/alamat URL foto

tersebut. Salah satu penyedia hosting gratis dan simple yang disarankan adalah Tinypic.com.

Karena untuk menghosting foto atau gambar tidak diminta register dulu. Sangat instan dan cepat

seperti tampilan kedua gambar berikut:


Pilih file untuk diupload, sebelumnya pastikan lebar ukuran gambar dalam pixels sesuai lebar

maksimum sidebar yang biasanya antara 180-250pixels. Setelah proses upload selesai akan muncul

beberapa pilihan kode html sbb:

Pilih kolom “HTML for Websites” dan copy paste

kode didalamnya ke halaman widget Text. Seperti berikut contoh kode hasil upload:

<a href=”http://tinypic.com&#8221; target=”_blank”><img

src=”http://i37.tinypic.com/33el8bl.jpg&#8221; border=”0″ alt=”Image and video hosting by

TinyPic”></a>

Kemudian klik Change dulu dan selanjutnya klik Save Change. Kunjungi halaman depan blog Anda

untuk memastikan gambar sudah terlihat dan sesuai yang diinginkan.

Sedangkan untuk menampilkan gambar di sidebar Blogger (Blogspot), langkahnya hampir sama dengan

WordPress. Untuk Blogger Classic silahkan copy paste (copas) kode diatas di

menu Edit HTML pada bagian Template,kemudian masukkan kode di tempat yang diinginkan. Lihat

gambar dibawah ini:

Sedangkan untuk Blogger Beta klik Layout dan pilih menu Page

Elements seperti gambar berikut:

Kemudian klik Edit sehingga muncul halaman seperti dibawah ini. Copas juga kode html tersebut di

kotak yang disesuaikan beserta judul yang diinginkan. Selamat mencoba.. Semoga sukses :-

No comments yet

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: