Cara Memasang Plugin JQuery Watermark di Blogger

8/19/2023
Beranda
FYI
Pemrograman
Teknologi
Cara Memasang Plugin JQuery Watermark di Blogger

Plugin JQuery Watermark membantu Anda menyegel kumpulan gambar, seperti alat prangko.

Karena plugin ini ditulis dalam HTML5 dan Javascript, sehingga akan beroperasi tanpa server untuk pemrosesan gambar, batas bandwidth tidak lagi menjadi hal yang perlu Anda khawatirkan.

Penggunaan yang sesuai untuk server web bandwidth rendah, atau layanan pembuatan web, forum gratis tanpa server manajemen seperti Blogspot, Forumotion, ...

Cara Memasang Plugin JQuery Watermark di Blogger

Fitur Plugin JQuery Watermark

  • Menggunakan gambar atau teks untuk mencap.

  • Memungkinkan Anda memilih posisi yang akan dicap di 8 sudut gambar.

  • Opsi ukuran dan format setelah gambar yang dicap.

  • Ekspor gambar ke tipe base64, jadi alih-alih langsung ke foto lama atau server unggah memungkinkan, misalnya, Imgur.

Kekurangan Plugin JQuery Watermark

  • Tidak berfungsi di browser lama yang tidak mendukung HTML5.

Cara Memasang Plugin JQuery Watermark di Blogger

1. Login dulu ke Blogger.

2. Pada saat di Dashboard Blogger pilih menu Tema dan Edit HTML.

3. Setelah itu copy code dibawah ini diatas </body>
<script type='text/javascript'>
/*<![CDATA[*/
$(function () {
  $('img').each(function () {
    var $this = $(this),defaultConfig,dataConfig;
    defaultConfig = {
      path: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisgb11gO0Nq-FPLDoCCwaFoZMEXil3LwW3dH8NoiCpe1uIcyO17SU_go9YzX0zfz2sr9g4Xbm23LqaIAMO-2ve4pwAWaVTPTsHePSkSlIp3TepPR3cnn2I9aZpf0SbriEkauYWEDtuBqA/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.Selesai, tinggal kalian atur atur saja beberapa bagian.

untuk yang belum mengerti/cara penggunaannya, kalian bisa mengkontak fb saya di : Klik disini
Postingan Lama
Postingan Lebih Baru