Menampilkan Komentar Gambar di Blogger dengan JavaScript

Untuk menampilkan komentar berisi link gambar di Blogger dapat dilakukan dengan manipulasi element di JavaScipt (tanpa jQuery). Kurang lebih penampakannya seperti pada thumbnail/hero postingan ini.

Hari ini saya cukup kaget setelah mendapat balasan komentar dari salah satu Blogger sepuh di Indonesia. Kang Ismet. Bahwa ternyata tampilan logo di footer agak berantakan di browser atau device lain.

Namun, yang ternyata lebih mengganggu pikiran saya adalah, isi komentar berupa link gambar yang panjang itu. 

Sedikit merepotkan untuk sekadar mendapatkan informasi dari sebuah gambar. Saya harus copy terlebih dahulu url gambar tersebut. Adapun sebelum tahapan meng-copy link gambar itu, terdapat aktifitas yang disebut dengan menyeleksi teks. Bila beruntung, saya dapat menyeleksinya dengan sekali geseran mouse. Dari awal huruf link sampai akhir, dengan penuh kewaspadaan. Terus mem-paste-nya ke tab baru di browser.

Untungnya link gambar yang dibagikan hanya satu saja. Coba bayangkan bila link gambarnya banyak, dengan panjang linknya yang bukan maen seperti itu. Tentu akan makin merepotkan.

Untuk itulah saya lakukan sedikit modifikasi lagi pada fitur komentar di blog ini. Dengan menambahkan "button" yang dengan hanya diklik, maka dia akan menampilkan link gambar pada komentar. Tanpa perlu copy-paste link dan keluar dari halaman blog untuk membuka tab baru di browser.

Untuk demonya, bisa cek langsung di komentar postingan ini: https://www.bungfrangki.com/2024/07/blogger-conditional-tags-url-contains.html

Cara Menampilkan Komentar Berisi Link Gambar di Blogspot dengan JavaScript

Cara 1 (tanpa tombol, gambar langsung tampil) 

const imgElements = document.querySelectorAll('i[rel="img"],i[rel="image"]');

imgElements.forEach((element) => {

    const imgUrl = element.textContent;

    const imgTag = document.createElement('img');

    imgTag.src = imgUrl;

    element.innerHTML = '';

    element.appendChild(imgTag);

    element.setAttribute('alt', '');

});

Cara 2 (pakai tombol)

const imgElements = document.querySelectorAll('i[rel="img"],i[rel="image"]

');

imgElements.forEach((element) => {

    const button = document.createElement('button');

    button.textContent = 'Show Image';

    button.classList.add('ShowImageComment');

    element.appendChild(button);

    button.addEventListener('click', () => {

        const imgUrl = element.textContent;

        const imgTag = document.createElement('img');

        imgTag.src = imgUrl;

        element.innerHTML = '';

        element.appendChild(imgTag);

        element.style.display = 'block';

        imgTag.setAttribute('alt', '');

    });

});

Catatan:
Agar script ini bisa berhasil, pastikan document.querySelectorAll sudah di sesuaikan di blog masing-masing. Pada tutorial ini, document.querySelectorAll yang digunakan adalah i[rel="img"] dan i[rel="image"]

Demikian, semoga bermanfaat.