Cara Menambahkan Efek Blur Pada Gambar di Blogger

Cara Menambahkan Efek Blur Pada Gambar di Blogger

Perkenalan

Halo Semuanya, Jumpa Lagi dengan Saya, Seonxnnn :v dipostingan Kalian ini saya Akan Memberikan Tutorial Bagaimana Cara Menambahkan Efek Blur Pada Gambar di Blogger.

Tanpa Basa Basi Langsung Saja Kita Gassken, Untuk Tutorial Cara Pasangnya Kalian Bisa Liat disini, Karna Saya Malas Buat Post dengan template text yang itu itu saja.

Untuk Demo Kalian Bisa Cek Link DIbawah

Live Demo

Penting!
Sebelum Memulai Nya Ada Baiknya Kalian Memback-up Template Kalian Terlebih dahulu.

Source Code

 <!-- Contoh gambar utama -->
    <div class="main-image">
        <img src="https://blogger.googleusercontent.com/img/a/AVvXsEiqqmtvMFLPuKajS-22C0X7xt4ugrMSzbfsYfOWXfdHgSEcHtUWmY1V9sQtE9YnlbAHzyT5jmipDgijbIrGOlwXwbQsd1sEIdndOxh3x4G_doa2JNXxRTAGWQqn3AyydUvpwh6d-Kq0jPKS-rDAV7vWJYUrjy4khOZ8rvQKgYE1a-TZQWDQBxbAC9c2A34K=w600-h300-p-k-no-nu-rw-e30" alt="Main Image">
        <!-- Layer buram akan ditambahkan di sini oleh JavaScript -->
    </div>

  <title>18+ Image Blur</title>
    <style>
        .blur-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-size: cover;
            filter: blur(10px);
            z-index: 1;
        }
        .main-image {
            position: relative;
            display: inline-block;
        }
    </style>

 <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Fungsi untuk menambahkan layer buram
            function addBlurOverlay(imageContainer) {
                const overlay = document.createElement('div');
                overlay.className = 'blur-overlay';
                overlay.style.backgroundImage = `url(${imageContainer.querySelector('img').src})`;
                imageContainer.appendChild(overlay);
            }

            // Cek setiap posting untuk tag "18plus"
            document.querySelectorAll('.post').forEach(post => {
                if (post.textContent.includes('[18plus]')) {
                    post.querySelectorAll('.main-image').forEach(addBlurOverlay);
                }
            });
        });
    </script>

Kesimpulan

Diatas adalah Cara Menambahkan Efek Blur Pada Gambar di Blogger., Jika Ingin Request Silahkan Berikan Komentar atau menuju Halaman Request:v. Sampai Jumpa di potingan Berikutnya :p