Cara Membuat Watermark Gambar Otomatis Di Postingan Blog - Susah Tidur

Cara Membuat Watermark Gambar Otomatis Di Postingan Blog

Membuat Watermark Gambar Otomatis Di Postingan Blog

Cara Membuat Watermark Gambar Otomatis Di Postingan Blog - SusahTidur - Watermark adalah sebuah tanda air yang biasa menempel pada sebuah file berupa gambar maupun video.

Watermark biasa disangkutkan dengan identitas sang pembuat foto maupun video. Mereka sering menanamkan watermark pada file mereka berupaya untuk memberitahukan bahwa file tersebut milik mereka atau yang membuat itu mereka.

Seperti blog SusahTidur ini, hampir setiap kali saya bikin konten, saya selalu mencari kemudian diedit dipasangi Watermark dulu. Lalu bagaimana cara membuat watermark otomatis pada gambar di blog? tentu saja bisa namun ada tapinya. Watermark di blog itu bisa tapi hanya pada gambar, dan watermark tersebut hanya sebuah tampilan saja tidak paten menempel dalam gambar. Namun lumayan lah untuk mempercantik tampilan blog sobat.

Sobat tidak perlu khawatir tentang kecepatan blog sobat. Menampilkan watermark otomatis pada gambar di blogger ini cukup ringan karena hanya menggunakan CSS dan juga hanya sedikit kok satu baris kalau diuraikan ya jadi banyak haha namun tenang cuma CSS enteng kok. Baik mari simak tutorial membuat watermark otomatis di gambar blog.

Cara Membuat Watermark Gambar Otomatis Di Postingan Blog

  1.  Seperti biasa silahkan sobat masuk ke dashboard sobat
  2. Kemudian masuk ke menu Tema/Template > edit HTML
  3. Masukan kode CSS dibawah ini tepat di ATAS atau SEBELUM  ]]></b:skin> 
    .img-thumbnail{position:relative;}.img-thumbnail::before{content:"SusahTidur";z-index:99;color:#fff;font-size:12px;position:absolute;text-transform:capitalize;right:0;bottom:0;border:1px solid $(header.background.kiri);border-radius:10px 0 0 0;background:$(header.background.kiri);padding:6px;height:10px;line-height:14px;}
    .separator{position:relative;}.separator::before{content:"SusahTidur";z-index:1;color:#fff;font-size:12px;position:absolute;text-transform:capitalize;right:0;bottom:7px;border:1px solid $(header.background.kiri);border-radius:10px 0 0 0;background:$(header.background.kiri);padding:6px;height:10px;line-height:14px;}
  4. Kemudian Save Tema/Template

Perhatikan Kode CSS diatas
1. Warna oren yang saya tandai :   SusahTidur  ganti dengan nama watermark sobat.


2. Untuk merubah warna belakang silahkan ganti  $(header.background.kiri)  ke kode warna yang sobat inginkan, contoh #7bbefa. Untuk pengguna template Viomagz ga perlu ribet-ribet ganti kode warna, karena CSS tersebut sudah saya modifikasi agar mengikuti warna Header Kiri sobat.  


Demo? untuk demo watermark pada gambar blog sudah saya terapkan di blog saya, lihat sudut kanan gambar blog ini nah itulah demonya. Untuk lain-lain silahkan modifikasi CSS nya sesuai selera sobat.

Baik sekiranya cukup dulu tentang tutorial Cara Membuat Watermark Gambar Otomatis Di Postingan Blog. Sekian dan terimakasih telah berkunjung di SusahTidur. 
"Cara Membuat Watermark Gambar Otomatis Di Postingan Blog"
Tampilkan Komentar
Sembunyikan Komentar

Belum ada Komentar untuk "Cara Membuat Watermark Gambar Otomatis Di Postingan Blog"

Posting Komentar

Jangan malu bertanya!

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel