Menampilkan Gambar di Sidebar WordPress & Blogspot

August 22, 2008 at 7:05 am 10 comments

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

Entry filed under: Blogger [Blogspot], Tip & Trik, Wordpress. Tags: .

Membuat Beberapa Blog dalam 1 Account Pengelolaan Mesjid, Kita Utamakan Kesucian

10 Comments Add your own

  • 1. wiryo  |  October 20, 2008 at 4:05 am

    terima kasih atas infonya

    Reply
  • 2. gusfudz  |  November 7, 2008 at 12:26 pm

    terima kasih juga untuk ilmunya….semoga terus bisa berbagi ilmu dan pengalaman

    Reply
  • 3. jogjagrafika  |  January 8, 2009 at 5:53 pm

    ini dia yg sy cari, makasih ya mas
    salam kenal
    salam ericjogja

    Reply
  • 4. diane  |  January 14, 2009 at 7:22 am

    salam,
    saya newbie nih, infonya berguna sekali
    ditunggu artikel lainnya

    trims

    Reply
  • 5. gus  |  January 18, 2009 at 2:23 pm

    mas, saya sudah mencoba tapi gambar yang tertampil di sidebar sesuai ukuran aslinya, tidak bisa mengeceil seukuran sidebar. caranya bagaimana ya? thanks

    Reply
    • 6. qhj4ever  |  January 20, 2009 at 5:24 am

      Harusnya memang ukuran gambarnya yang harus diresize disesuaikan dengan lebar side bar, biasanya lebar sekitar 160 pixels

      Reply
  • 7. ldiikarawang  |  February 17, 2009 at 6:52 am

    Jazakallahu khoiro atas info yang bermanfaatnya… sukses selalu

    Reply
  • 8. bondan  |  August 30, 2009 at 7:05 pm

    Nice Blog. Don’t forget visit us and I hope we become good friends

    Reply
  • 9. dian  |  March 23, 2011 at 10:44 am

    ahamdulillah makasih banyak untuk infonya.
    jangan lupa visit blog saya juga yaah.

    Reply
  • 10. alatpijat  |  June 7, 2011 at 8:34 pm

    terimakasih infonya

    Reply

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

Trackback this post  |  Subscribe to the comments via RSS Feed


August 2008
M T W T F S S
    Sep »
 123
45678910
11121314151617
18192021222324
25262728293031

Archives

Twitter LDII News

RSS LDII.or.id

  • An error has occurred; the feed is probably down. Try again later.

RSS Nuansa Online

  • An error has occurred; the feed is probably down. Try again later.

Blog Stats

  • 299,083 hits

%d bloggers like this: