Cara Menciptakan Watermark Blog Otomatis Dengan Jquery

-Dalam dunia blogging niscaya ada web yang memberi watermark terhadap gambar yang ada, khususnya blog tutorial. Dulu aku pernah menciptakan artikel tutorial Cara Membuat Watermark Gambar Otomatis Di Postingan Blog. Kali ini tutorial menciptakan watermark blog dengan JQuery.

Plugin JQuery Watermark membantu Anda menyegel kumpulan gambar, ibarat 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, lembaga gratis tanpa server administrasi ibarat Blogspot, Forumotion, ...

Fitur Plugin JQuery Watermark

Kelebihan Fitur

• Menggunakan gambar atau teks untuk mencap.
• Memungkinkan Anda menentukan posisi yang akan dicap di 8 sudut gambar.
• Opsi ukuran dan format sehabis gambar yang dicap.
• Ekspor gambar ke tipe base64, jadi alih-alih eksklusif ke foto usang atau server unggah memungkinkan, misalnya, Imgur.

Kekurangan Plugin JQuery Watermark

Tidak berfungsi di browser usang yang tidak mendukung HTML5.

Cara Memasang Plugin JQuery Watermark di Blogger

Tutorial ini aku dapatkan ketika sedang mencari tutorial serupa dari web For Your Infromation  milik Template Creator Lang. Yuk simak langkah-langkah dibawah ini;

1. Login dulu ke Blogger.
2. Pada ketika di Dashboard Blogger pilih sajian 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/AVvXsEiqtY7oAlJvjwHAabe_E0y5EM_ZeivWg1MFa3_EhkZFfB1iJlYVuwD16bLRFklvWIfGt-SjZttTN64zx7qVIJ_dbY6UGpCkj1gr-yg7WqkGWs4VC7R8duFQ6ogZ0HhJmGSGNiFUM3pmao4/s1600/fav2.png',       text: 'TriBlog',       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>

Ubah link https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqtY7oAlJvjwHAabe_E0y5EM_ZeivWg1MFa3_EhkZFfB1iJlYVuwD16bLRFklvWIfGt-SjZttTN64zx7qVIJ_dbY6UGpCkj1gr-yg7WqkGWs4VC7R8duFQ6ogZ0HhJmGSGNiFUM3pmao4/s1600/fav2.png dengan link logo blog kalian masing masing.
Ganti Text TriBlog dengan nama blog kalian.

Praktis kan tutorial Cara Membuat Watermark Blog Otomatis Dengan JQuery.
Yuk praktekan tutorial diatas biar blog kau lebih keren dan tentunya gambar original kau sudah otomatis mempunyai watermark.
Salam blogging.
Sumber https://gawarii.blogspot.com/

Berbagi :