Cara Memasang Plugin JQuery Watermark di Blogger

Daftar Isi

Plugin JQuery Watermark adalah solusi efisien untuk menambahkan watermark pada gambar di blog Anda tanpa membebani server. Artikel ini akan memandu Anda melalui langkah-langkah pemasangan plugin ini pada platform Blogger.

Pengantar Plugin JQuery Watermark

Menggunakan Plugin JQuery Watermark memungkinkan Anda untuk mengamankan gambar dengan watermark yang dapat berupa teks atau gambar. Plugin ini berjalan sepenuhnya di sisi klien menggunakan HTML5 dan Javascript, sehingga tidak memerlukan pemrosesan di server.

Cara Memasang Plugin JQuery Watermark di Blogger

Fitur Plugin JQuery Watermark

• Menggunakan gambar atau teks sebagai cap watermark.
• Memungkinkan pemilihan posisi watermark di delapan sudut gambar yang berbeda.
• Menawarkan opsi untuk menyesuaikan ukuran dan format gambar yang di-watermark.
• Menyediakan ekspor gambar ke format base64, memungkinkan penyimpanan ke layanan seperti Imgur tanpa perlu server sendiri.

Langkah-langkah Pemasangan

1. Login ke dashboard Blogger Anda.
2. Navigasikan ke menu 'Tema' dan pilih 'Edit HTML'.
3. Salin dan tempelkan kode berikut tepat di atas tag </body> di editor HTML:

<script type='text/javascript'>/*<![CDATA[*/
    $(function () {
        $('img').each(function () {
            var $this = $(this), defaultConfig, dataConfig;
            defaultConfig = {
                path: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-EgxBOKBgG5YKcZQmfvkv17wqdd-bfyyjyUYOS6NlgSH0Fsow6jJLbIZXcGMBIuRdWJ6LT3wWkkuh4SiaQmd1BM2_QKIrKlnXb1AZUKd9btkKBtOjSeBjgg653b0lumkROaIWHIy3b7M/s200/Logo.png',
                text: 'FYI.MY.ID',
                textWidth: 130,
                textSize: 13,
                textColor: 'white',
                textBg: 'rgba(0, 0, 0, 0.4)',
                gravity: 'sw',
                opacity: 0.7,
                margin: 10,
                outputWidth: 'auto',
                outputHeight: 'auto',
                outputType: 'webp'
            };
            dataConfig = {
                path: $this.data('path'),
                text: $this.data('text'),
                textWidth: $this.data('textWidth'),
                textSize: $this.data('textSize'),
                textColor: $this.data('textColor'),
                textBg: $this.data('textBg'),
                gravity: $this.data('gravity'),
                opacity: $this.data('opacity'),
                margin: $this.data('margin'),
                outputWidth: $this.data('outputWidth'),
                outputHeight: $this.data('outputHeight'),
                outputType: $this.data('outputType')
            };
            if ($this.attr('data-isWm') !== 'false') {
                $this.watermark($.extend({}, defaultConfig, dataConfig));
            }
        });
    });
    //]]></script>
    <script src='https://cdn.staticaly.com/gh/lelinhtinh/watermark/2dd6d88f/dist/jquery.watermark.min.js'></script>
    

4. Setelah menyisipkan kode, simpan perubahan Anda dan pratinjau blog untuk melihat watermark beraksi.

Troubleshooting dan Dukungan

Untuk pengguna yang mengalami kesulitan dalam pemasangan atau konfigurasi, Anda dapat menghubungi saya melalui Facebook untuk bantuan lebih lanjut.

Plugin ini mungkin tidak berfungsi di browser lama yang belum mendukung HTML5. Pastikan bahwa pengunjung situs Anda menggunakan browser yang kompatibel untuk pengalaman terbaik.