Cara Membuat dan Memasang Logo Watermark di postingan gambar Otomatis di Blogspot

Selamat malam teman teman blogger, kali ini saya ingin berbagi artikel tentang "Cara Membuat dan Memasang Logo Watermark di postingan gambar Otomatis di Blogspot" teman teman semua. Saya telah menerapkannya di Blog Toko Online Affiliasi saya di URL: Toko Bedoeit Online. Alhasil melelahkan juga saat pengaplikasiannya.

Hampir satu jam lebih teman teman, dikarenakan poisi icon logo watermark yang saya ingingkan belum pas dan ada kode script yang tidak terbaca, serta hal hal lainnya yang membuat lama pemasangan kode ini. Namun, untuk teman teman blogger saya sudah bereskan semuanya tinggal teman teman aplikasikan ke blog tercinta teman teman semua. Berikut dibawah ini Kode HTML nya untuk ditempatkan di Edit Html tamplate sobat semua diletakkannya di atas </body>  ya.. atau di edit tata letak mungkin juga bisa. Namun saya tidak mencobanya di Mode Tata Letak Blogger. 

Mode tampilan desktop

Kode Script Utama:

</> Kode Html

<!-- Script Watermark Gambar/Logo Otomatis - Auto Pas Laptop & HP --> <script type='text/javascript'> //<![CDATA[ document.addEventListener("DOMContentLoaded", function() { // Deteksi apakah pengunjung menggunakan HP (lebar layar kurang dari 768px) var isMobile = window.innerWidth < 768; // Menurunkan batas deteksi lebar gambar menjadi 80 khusus di HP agar tetap terbaca var minImageWidth = isMobile ? 80 : 150; var postImages = document.querySelectorAll(".post-body img, .item img, .product-images img, img"); postImages.forEach(function(img) { if (!img.classList.contains('has-wm') && img.offsetWidth > minImageWidth) { img.classList.add('has-wm'); var wrapper = document.createElement('div'); wrapper.style.position = 'relative'; wrapper.style.display = 'inline-block'; wrapper.style.width = img.style.width || 'auto'; img.parentNode.insertBefore(wrapper, img); wrapper.appendChild(img); var watermark = document.createElement('div'); // PENGATURAN UKURAN LOGO (OTOMATIS MENGECIL DI HP) if (isMobile) { // Setelan khusus layar HP agar logo tidak kebesaran watermark.innerHTML = "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3NIBlfbx6SelQT58xOpFwJPDXN3bzx2vKjeWZC5yzzsF6S-8YQtuYGqombQDFMjHezBbQ7pCueUOF69log8OSBJ7-RseX-f1kAwhxuOxi79uh-Hf4s5oL_RVL2du0J630kjdP6sErQvMTmZZcFtENwLNKrz-hW4hLjp-yWCFKrqH7A_ERYya03tSckOIo/s1600/tb.png' style='width: 100px !important; height: auto !important; max-height: 60px !important; object-fit: contain !important; display: block !important;' />"; } else { // Setelan pas milik Anda untuk tampilan Laptop/PC watermark.innerHTML = "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3NIBlfbx6SelQT58xOpFwJPDXN3bzx2vKjeWZC5yzzsF6S-8YQtuYGqombQDFMjHezBbQ7pCueUOF69log8OSBJ7-RseX-f1kAwhxuOxi79uh-Hf4s5oL_RVL2du0J630kjdP6sErQvMTmZZcFtENwLNKrz-hW4hLjp-yWCFKrqH7A_ERYya03tSckOIo/s1600/tb.png' style='width: 128px !important; height: auto !important; max-width: none !important; min-width: 120px !important; display: block !important;' />"; } // PENGATURAN POSISI (DISESUAIKAN BERDASARKAN JENIS LAYAR) watermark.style.position = 'absolute'; if (isMobile) { // Posisi di HP: Menggunakan persen normal agar tidak melompat keluar gambar watermark.style.top = '1550%'; watermark.style.left = '-20%'; } else { // Posisi di Laptop: Mengikuti angka yang sudah pas menurut Anda sebelumnya watermark.style.top = '800%'; watermark.style.left = '80%'; } watermark.style.transform = 'translate(-50%, -50%)'; // TAMPILAN DAN EFEK TRANSPARAN LOGO watermark.style.opacity = '0.5'; watermark.style.pointerEvents = 'none'; watermark.style.zIndex = '9999'; /* Ditinggikan ke 9999 agar dipaksa muncul di HP */ wrapper.appendChild(watermark); } }); }); //]]> </script>

KESIMPULAN Kode:

A. Setelah menempel kode diatas, silahkan ganti kode:

 if (isMobile) {
                // Setelan khusus layar HP agar logo tidak kebesaran
watermark.innerHTML = "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3NIBlfbx6SelQT58xOpFwJPDXN3bzx2vKjeWZC5yzzsF6S-8YQtuYGqombQDFMjHezBbQ7pCueUOF69log8OSBJ7-RseX-f1kAwhxuOxi79uh-Hf4s5oL_RVL2du0J630kjdP6sErQvMTmZZcFtENwLNKrz-hW4hLjp-yWCFKrqH7A_ERYya03tSckOIo/s1600/tb.png' style='width: 100px !important; height: auto !important; max-height: 60px !important; object-fit: contain !important; display: block !important;' />";
            } else {
                // Setelan pas milik Anda untuk tampilan Laptop/PC
                watermark.innerHTML = "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3NIBlfbx6SelQT58xOpFwJPDXN3bzx2vKjeWZC5yzzsF6S-8YQtuYGqombQDFMjHezBbQ7pCueUOF69log8OSBJ7-RseX-f1kAwhxuOxi79uh-Hf4s5oL_RVL2du0J630kjdP6sErQvMTmZZcFtENwLNKrz-hW4hLjp-yWCFKrqH7A_ERYya03tSckOIo/s1600/tb.png' style='width: 128px !important; height: auto !important; max-width: none !important; min-width: 120px !important; display: block !important;' />";
            } 

dengan Url gambar yang akan menjadi Logo Icon Watermark  teman teman blogger

B.  Rubah Nilai Posisi Logo Watermark sesuai keinginan teman teman blogger pada kode ini:

watermark.style.position = 'absolute';
            if (isMobile) {
                // Posisi di HP: Menggunakan persen normal agar tidak melompat keluar gambar
                watermark.style.top = '1550%'; 
                watermark.style.left = '-20%';
            } else {
                // Posisi di Laptop: Mengikuti angka yang sudah pas menurut Anda sebelumnya
                watermark.style.top = '800%'; 
                watermark.style.left = '80%';
            } 

C. Rubah semua yang saya tandai warna merah saja ya teman teman blogger. Simpan Template.

Selesai teman teman semoga dengan adanya Logo dan Icon Watermark di produk gambar toko online teman teman semua menjadi lebih berwarna dan semakin cantik dan ganteng blognya. Semoga artikel ini berguna dan bermanfaat untuk semua, Salam Ngerapik Blog..!