Tutorial Cara Menambahkan Gambar Pada Widget WordPress

Menambahkan sebuah gambar di wordpress, bahkan sebuah galeri sangatlah mudah. Namun, menambahkannya diluar isi postingan atau halaman cukup rumit untuk seorang pemula. WordPress memang tidak menyediakan fitur untuk menambahkan gambar di widget sidebar maupun footer misalnya. Jika kita ingin menambahkan gambar di widget, kita bisa melakukannya dengan cara manual menggunakan code html atau menggunakan plugin tambahan. Nah, dibawah ini akan saya jelaskan kedua cara tersebut.

1. Menambahkan Gambar Secara Manual Menggunakan Kode HTML pada Widget

Pertama-tama, anda harus upload dulu gambar ke situs wordpress anda. Caranya klik menu Media > Add New di menu sidebar admin, lalu pilih gambar untuk diupload. Setelah gambar terupload, klik link edit seperti ditunjukkan pada gambar di bawah.

upload dan edit gambar

 

Anda akan diarahkan ke halaman edit media, di mana anda akan menemukan url untuk gambar tersebut di samping kanan. Anda harus meng-copy url tersebut.

Edit dan copy image url

 

Setelah itu, klik menu Appearance > Widget di menu sidebar kiri admin wordpress anda untuk menambahkan widget. Tambahkan widget baru dengan widget teks/Text Widget. 

menambahkan widget gambar

 

Di teksarea pada widget di atas, anda dapat menambahkan gambar dengan kode html dengan pola berikut :

<img src="Paste URL yang tadi di copy disini" alt="judul gambar anda"/>

Tag HTML <img/> di gunakan untuk menampilkan gambar pada halaman website. Tag tersebut membutuhkan 2 atribut yaitu src untuk mendefinisikan letak gambar dan atribut alt untuk alternatif teks atau judul untuk gambar. Sehingga hasil akhirnya akan terlihat seperti dibawah :

<img src="http://www.example.com/wp-content/uploads/2014/09/strawberries.jpg" alt="Strawberries" />

Simpan widget anda dan lihatlah hasilnya.

2. Menambahkan Gambar dengan Plugin Image Widget

Jika anda tidak ingin menyentuh kode sama sekali, cara yang lebih mudah untuk menambahkan gambar di widget adalah denga menggunakan plugin Image Widget.

Aktifkan plugin tersebut, lalu klik menu Appearance > Widget untuk menambahkan widget lagi. Kali ini, akan tersedia widget dengan tipe baru yaitu “Image Widget” untuk menambahkan gambar. Buatlah sebuah widget dengan tipe tersebut.

image widget

 

Setelah itu, anda hanya perlu meng-klik tombol “select an image” pada widget tersebut untuk memilih/upload gambar yang ingin ditampilkan.

tambah gambar dengan plugin

 

Setelah terupload, gambar akan secara otomatis tertampil dan akan tampil juga pengaturan seperti title, alternate text dan caption dibawahnya. Anda juga dapat menambahkan tautan/link untuk gambar tersebut dan memilih ukuran gambar dari pilihan ukuran(size) yang tersedia.

pilihan

 

Setelah semua pengaturan selesai, tinggal klik tombol simpan dan gambar anda sudah tampil di sidebar.

Sekian. Semoga bermanfaat,

~Muhammad Syakirurohman~

Diterjemahkan dari www.wpbeginner.com dengan sedikit perubahan.

37 Comments

  1. SitusGaptek.com - Situs Berita Teknologi Terbaru

    makasih gan buat tutornya 🙂

  2. sangat membantu min , tengyu 🙂

  3. request artikel yah min kalo bisa,untuk membuat galery foto dengan css yang efek nya keren

  4. Wihhh keren dari kemarin saya bingung gmn cara dpt url gambar yg mau saya pasang dan sekarang sudah sukses
    tks

  5. wah, mantap sekali mastah, newbie nih lagi belajar, thanks ya mastah

  6. Bagus … alternatfi tanpa coding, mudah tanpa ribet. Kalo misal tambahkan ukuran image Width sama Height gimana caranya mas syakir?

  7. mas saya ingi nanya . kenapa maximum upload size saya hanya 5 byte saja ya ?

    • Itu konfigurasinya ada di hosting.. Ada file bernama php.ini , disitu ada konfigurasi untuk menentukan maximal ukuran file untuk di upload, namanya kalau gasalah max_upload_file_size = (ukuran file) .. Kalau tidak mengerti, hubungi pihak hostingnya saja

  8. Mohon pencerahannya jika memasang gambar yang jika di klik akan ngelink ke url yang lain? Terima kasih

  9. Makasih atas Pencerahannya.

  10. oke, terimakasih. sudah berhasil di http://sukodonodampit.com/

  11. Mas kalo gambar nya mau dikasih link gimana ya.. Thx

  12. Walah… diatas udah ditulis. Makasih

  13. Bagus infonya langsung saya praktekkan dan mantep. terima kasih

  14. Mantap gan! joss gandos artikelnya, barangkali agan2 butuh referensi lebih dalam tentang cara membuat sidebar di WordPress, agan bisa berkunjung ke http://kafeinkode.com/tutorial-cara-membuat-sidebar-di-wordpress/

  15. terima kasih di atas tunjuk ajar ini
    semoga banyak lagi tipsnya ya

  16. terima kasih atas perkongsian ilmu. sgt bermanfaat dan membantu =)

  17. Terimakasih petunjuk berbagi ilmunya.

  18. terimakasih tutornya

  19. Sangat bermanfaat tutorialnya, ditunggu update berikutnya

  20. terima kasih mas, sangat berguna sekali buat uder wordpress pemula seperti saya.

  21. Kenapa kalau pasang link (misalnya http://www.anu.com , linknya selalu diikuti oleh link asal (menjadi seperti ini) http://www.asal.com/www.anu.com.

  22. Salam Mas Bro

    Huhu, keren keren dan berhasil
    Tau ilmu kayak gini darimana sih Bro?

    Mauliate
    Terimakasih

  23. Akhrnya ketemu caranya…
    Terimakasih bang…
    Maklum masih belajar nih…

  24. Sangat membantu.. tksh banyak..

  25. Maksih, artikelnya sangat membantu, alhamdulillah saya udah berlangganan di Website ini

  26. Gan klo masukin gambar di dalam postingan (artikel) tanpa upload alias via paste url ala blogspot bisa ga y?

  27. Alhamdulillah, terimakasih banyak atas ilmunya mas… Sangat bermanfaat bagi saya yang baru merambah ke dunia wordpress. Semoga Allah memberikan balasan yang banyak atas kebaikan mas syakirurahman dalam menyebarkan ilmu yang bermanfaat, aamiin..

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *