Cara Membuat Watermark Blog Otomatis Dengan JQuery - Hallo sahabat ndelet.com, Pada Artikel yang anda baca kali ini dengan judul Cara Membuat Watermark Blog Otomatis Dengan JQuery, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel blog, Artikel lain-lain, Artikel Tutorial Blog, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Cara Membuat Watermark Blog Otomatis Dengan JQuery
link : Cara Membuat Watermark Blog Otomatis Dengan JQuery

Cara Membuat Watermark Blog Otomatis Dengan JQuery

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

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, ...

Fitur Plugin JQuery Watermark

Kelebihan Fitur

• 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

Tutorial ini saya dapatkan saat 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 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://1.bp.blogspot.com/-w_RlhV3t5Dc/Xldjl5QRHEI/AAAAAAAACKg/1d_atyUG-roFCLD2_Hzlf_I406_9kRFiACEwYBhgL/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://1.bp.blogspot.com/-w_RlhV3t5Dc/Xldjl5QRHEI/AAAAAAAACKg/1d_atyUG-roFCLD2_Hzlf_I406_9kRFiACEwYBhgL/s1600/fav2.png dengan link logo blog kalian masing masing.
Ganti Text TriBlog dengan nama blog kalian.

Mudah kan tutorial Cara Membuat Watermark Blog Otomatis Dengan JQuery.
Yuk praktekan tutorial diatas agar blog kamu lebih keren dan tentunya gambar original kamu sudah otomatis memiliki watermark.
Salam blogging.

Demikianlah Artikel

Sekianlah artikel kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel dengan alamat link