Cara Menambahkan Sumber Gambar Artikel di Blog Secara Otomatis
Panduan lengkap cara menambahkan sumber gambar artikel di blog secara otomatis tanpa perlu edit manual pada setiap postingan
Daftar isi
Sumber gambar artikel sering kali menjadi hal yang diabaikan oleh banyak blogger, padahal mencantumkan sumber adalah bentuk etika dan penghargaan terhadap pemilik karya asli.Banyak penulis blog menggunakan gambar dari situs penyedia seperti Freepik, Pixabay, atau Unsplash, tetapi lupa menambahkan kredit di bawah gambar karena dianggap merepotkan. Padahal, dengan sedikit trik sederhana menggunakan script tambahan, kamu bisa membuat kredit gambar muncul otomatis di setiap artikel tanpa perlu menulisnya satu per satu.
Mengapa Sumber Gambar Itu Penting?
Menambahkan sumber gambar artikel bukan hanya soal sopan santun digital, tapi juga bentuk perlindungan diri terhadap masalah hak cipta. Saat menggunakan gambar dari pihak lain, kita perlu memastikan bahwa gambar tersebut bebas digunakan atau setidaknya mencantumkan sumber aslinya. Google dan mesin pencari lain juga menghargai blog yang memiliki etika atribusi yang baik, karena dianggap memberikan nilai informasi yang transparan dan jujur.
Selain itu, mencantumkan sumber gambar juga meningkatkan kredibilitas blog. Ketika pembaca tahu dari mana gambar berasal, mereka akan lebih percaya pada kualitas kontenmu. Hal ini juga membuat tampilan blog terasa lebih profesional, terutama jika kamu menulis di bidang yang melibatkan visual seperti desain, edukasi, atau teknologi.
Kendala Umum dalam Menambahkan Kredit Gambar
Masalah utama yang sering muncul adalah waktu. Bayangkan jika kamu memiliki puluhan artikel, dan setiap artikel punya lebih dari satu gambar. Menulis keterangan atau sumber di bawah setiap gambar secara manual tentu menyita banyak waktu. Selain itu, hasilnya juga tidak selalu konsisten. Kadang kamu lupa menambahkan keterangan, kadang tampilannya tidak rapi, atau bahkan malah mengganggu tata letak desain artikel.
Di sinilah keunggulan metode otomatis bekerja. Dengan sedikit tambahan kode, kamu bisa membuat sistem yang mendeteksi atribut khusus pada gambar di editor Blogger, lalu menampilkan keterangan sumber secara otomatis di tampilan publik blog. Solusi ini membuat kamu cukup menulis satu atribut tambahan di HTML gambar tanpa harus memodifikasi seluruh struktur template.
Langkah-Langkah Menambahkan Sumber Gambar Otomatis
1. Pastikan Kode Gambar Template Tidak Diubah
Pada panduan ini saya tidak akan meminta kamu untuk mengubah kode class gambar yang digunakan di kode template bog kamu. Namun pastikan untuk menyesuaikan penggunaan dari kode yang saya berikan ini.
Jika di kode template blog kamu menggunakan class untuk gambar artikel blog kamu seperti kode yang saya gunakan di blog ini yaitu .thumb-post, perhatikan saya element class kode tersebut.
<div class='thumb-post'> <b:if cond='data:blog.postImageUrl'> <img class='lazyload' expr:alt='data:post.title' expr:src='data:blog.postImageUrl + "=w680-h382-p-k-no-nu"' expr:title='data:post.title'/> </b:if> </div>
Kode di atas adalah bagian inti yang menampilkan gambar utama postingan di homepage atau halaman daftar artikel yang saya gunakan di blog ini. Oleh karena itu, apakah di blog kamu menggunakan class juga?
Jika iya, perhatikan saja kode tersebut karena kode struktur ini adalah bagian penting dari blog kamu, maka jangan diubah. Kita hanya akan menambahkan kode pendukung di luar bagian tersebut.
2. Tambahkan Atribut Sumber di Gambar Artikel
Pada saat menulis artikel di editor Blogger, tambahkan atribut khusus pada tag <img> didalam kode HTML gambar artikel. Misalnya:
<img src="https://blogger.googleusercontent.com/.../gambar.jpg" alt="Gambar Contoh" data-credit="Image by Freepik"/>
Atribut data-credit inilah yang nantinya akan dibaca oleh script dan ditampilkan secara otomatis sebagai keterangan gambar di blog. Kamu bisa mengganti isinya sesuai sumber gambar yang digunakan, misalnya “Foto oleh Unsplash” atau “Desain oleh Freepik”.
3. Tambahkan Script Deteksi Otomatis
Script ini berfungsi untuk membaca atribut data-credit dari gambar di dalam artikel, lalu memunculkan teks kredit pada gambar utama di template tanpa kamu perlu menulis ulang. Tempatkan kode berikut sebelum tag </body> pada template blog kamu:
<script>
document.addEventListener("DOMContentLoaded", function() {
document.querySelectorAll(".thumb-post img").forEach(function(img) {
const imgSrc = img.getAttribute("src");
const editorImgs = document.querySelectorAll(".post-body img");
editorImgs.forEach(function(edImg) {
const credit = edImg.getAttribute("data-credit");
if (credit && edImg.src && imgSrc && edImg.src.includes(imgSrc.split('/').pop().split('=')[0])) {
const span = document.createElement("span");
span.className = "img-credit";
span.textContent = credit;
img.parentNode.appendChild(span);
}
});
});
});
</script>
Kode di atas akan mencari semua gambar yang ditampilkan di postingan, mencocokkan URL-nya dengan gambar utama, dan jika ditemukan atribut data-credit, maka teksnya akan ditambahkan secara otomatis di dalam elemen .thumb-post.
4. Tambahkan CSS Watermark Transparan
Supaya kredit tampil rapi dan elegan, tambahkan kode CSS berikut di bagian <style> atau sesuaikan dengan file CSS yang kamu gunakan untuk gambar artikel blog:
.thumb-post .img-credit {
position: absolute;
bottom: 6px;
right: 8px;
background: rgba(0, 0, 0, 0.45);
color: #fff;
font-size: 11px;
padding: 2px 6px;
border-radius: 3px;
font-style: italic;
opacity: 0.85;
transition: opacity 0.3s ease;
pointer-events: none;
z-index: 2;
}
.thumb-post:hover .img-credit {
opacity: 1;
}
DEMO
Demo tampilan penggunaan kode sumber kredit gambar ini bisa langsung dilihat pada gambar artikel yang digunakan dalam artikel ini. Sumber kredit ada dibagian pojok kanan bawah.
Tampilan ini akan membuat teks sumber gambar tampil sebagai watermark di atas gambar dengan efek transparan. Saat kursor diarahkan ke gambar, teks akan tampak lebih jelas tanpa mengganggu tampilan visual.
Manfaat Metode Otomatis Ini
Dengan cara ini, kamu mendapatkan beberapa keuntungan sekaligus:
- Efisiensi waktu: cukup menulis atribut satu kali di artikel, sistem akan menampilkannya otomatis.
- Konsistensi tampilan: semua kredit gambar akan memiliki posisi dan gaya yang sama di seluruh artikel.
- Tampilan profesional: watermark transparan memberi kesan desain yang rapi dan terintegrasi.
- SEO-friendly: karena teks kredit tetap terbaca oleh mesin pencari, membantu indeksasi dan konteks gambar.
Tips Tambahan agar Lebih Optimal
Jika kamu ingin tampilan watermark berbeda untuk jenis gambar tertentu, kamu bisa menambahkan CSS tambahan. Misalnya, gambar utama artikel bisa memiliki posisi watermark di kanan bawah, sedangkan gambar di dalam isi artikel bisa di tengah bawah. Gunakan class tambahan seperti .featured-image .img-credit untuk mengatur gaya khusus.
Kamu juga bisa memanfaatkan atribut tambahan seperti data-source-link jika ingin membuat teks kredit bisa diklik menuju situs asal. Contohnya:
<img src="..." data-credit="Image by Freepik" data-source-link="https://www.freepik.com"/>
<script>
document.addEventListener("DOMContentLoaded", function() {
document.querySelectorAll(".thumb-post img").forEach(function(img) {
const imgSrc = img.getAttribute("src");
const editorImgs = document.querySelectorAll(".post-body img");
editorImgs.forEach(function(edImg) {
const credit = edImg.getAttribute("data-credit");
const link = edImg.getAttribute("data-source-link");
if (credit && edImg.src && imgSrc && edImg.src.includes(imgSrc.split('/').pop().split('=')[0])) {
const span = document.createElement("span");
span.className = "img-credit";
if (link) {
const a = document.createElement("a");
a.href = link;
a.textContent = credit;
a.target = "_blank";
a.rel = "noopener noreferrer nofollow";
span.appendChild(a);
} else {
span.textContent = credit;
}
img.parentNode.appendChild(span);
}
});
});
});
</script>
Lalu tambahkan sedikit modifikasi di script agar membuat elemen kredit menjadi link. Dengan begitu, kamu bisa memberikan atribusi yang lebih lengkap dan interaktif kepada sumber gambar.
Jadi, menambahkan sumber gambar artikel bukan hanya etika, tapi juga bagian penting dalam membangun blog yang kredibel dan profesional. Dengan menggunakan cara otomatis seperti di atas, kamu bisa menghemat waktu, menjaga tampilan tetap konsisten, dan menghormati karya orang lain. Semua itu dilakukan tanpa perlu mengubah struktur utama template Blogger, cukup dengan menambahkan sedikit atribut dan script cerdas di belakang layar.
Sumber gambar artikel yang ditampilkan otomatis tidak hanya memperindah tampilan, tapi juga meningkatkan kepercayaan pembaca terhadap blogmu. Jadi, mulai sekarang pastikan setiap gambar memiliki kredit yang pantas, dan biarkan sistem otomatis bekerja untukmu dengan rapi dan elegan.
