bergabung di grup telegram kami

membuat watermark otomatis pada gambar di blogger

membuat watermark otomatis pada gambar di blogger
cara membuat watermark otomatis pada gambar di blogger menggunakan CSS

Hallo semua pada kesempatan kali ini saya akan membagikan cara membuat watermark otomatis pada gambar di blogger menggunakan CSS.

tutorial ini di reguest oleh Ezra Rahmaditya buat kalian yang mau reguest tutorial silakan bisa komentar ke salah satu artikel blog ini maupun halaman forum atau kalian bisa join ke grup whatsapp yang baru saya buat 2 hari yang lalu.

watermark adalah tanda hak cipta bisa berupa tulisan maupun logo bertujuan untuk melindungi karya kita agar tidak dapat di gunakan kembali atau di sebarluaskan tanpa izin.

watermark yang akan saya bagikan di sini menggunakan css, dan akan otomatis menambahkan watermark pada setiap gamabar di blog mau itu di hompage halaman post dan related post.

namun perlu di ingat watermark ini hanya menggunakan css yang artinya tidaklah permanent, jika gambar kalian di dwonload maka watermarknya tidak akan ikut atau tidak ada, begitu juga jika gambar kalian di temukan di browser maka gambar kalian tidak ada watermarknya.

jadi tidaklah 100% gambar kalian bisa di lindungi dengan watermark ini, lebih tepatnya ini hanya untuk memepercantik tampilan saja, jika mau melindungi gamabar kalian saya lebih menyarankan menggunakan foto editor agar permanent.

dan perlu di ingat kemungkinan tidak semua template bisa cocok dengan css ini, karena setiap template bisa saja memiliki nama class thumbnail yang berbeda, maka itu pemahaman css dasar di perlukan di sini karena kalian harus bisa menyesuaikan class nya dengan template yang kalian gunakan, ok buat kalian yang ingin membuatnya mari simak carany di bawah ini.

Membuat Watermark Otomatis Pada Gambar Di Blogger

silakan masuk ke blogger > tema > edit html salin css di bawah ini dan letakkan di atas kode ]]></b:skin> jika sudah jangan lupa untuk klik simpan selesai

.postEntry .separator{position:relative}
.relatedPosts .itemThumbnail div{z-index:2}
.onPost .postEntry .separator:before{bottom:7px}
.postThumbnail a:before, .postEntry .separator:before,.relatedPosts .itemThumbnail > *:after{content:'Wendy Code';position:absolute;right:0;bottom:0;display:flex;font-size:10px;font-weight:bold;color:#fff;z-index:2;border-top-left-radius:10px;background-color:#3a3a3a;padding:5px 7px;opacity:.7}

catatan :
bagian yang saya tandai Wendy Code silakan di ubah dengan nama blog kalian, dan jika kalian bukan menggunakan template median-ui 1.5 perlu menyesuaikan class pada css

ok jadi sekian cara membuat watermark otomatis pada gambar di blogger semoga bermanfaat dan terima kasih telah berkunjung.

Baca juga :

15 komentar



image quote pre code
  1. Terima kasih mas, request saya terpenuhi.. Sukses selalu.
    1. sama2 ya mas
  2. How to change this font in median ui theme bro could you make the video tutorial bro
  3. not working
    1. you have to adjust the class in the thumbnail template you are using, so that basic css knowledge is needed here, unless you are using median ui version 1.5 template there is no need to change any
  4. I am using Imagz v1.2 + landing page
    1. if you use a different template other than median ui 1.5 you must be able to customize the class on your thumbnail template, then you must understand basic css
  5. Saya mlh tertarik dengan sticky content table yg berkedip oranye. Bgmn cara buatnya bang?
  6. Kang, utk median ui v1.6 kode css kyknya dh berbeda
    1. iya pasti berbedah maka itu perlu di sesuaikan lagi, ini saya buat juga untuk semua template tapi harus d sesuaikan class nya, karena dulu saya buat nya masih pakai template median ui 1.5 atau 1.4 agak lupa jg
  7. Lapor, watermarknya jdi double kang, klau ada isi komentar
    1. harusnya tidak ada masalah dengan komentar, coba cek komentar mu ada nyisipkan css tidak tanpa tag pre
  8. Bro help me to do this in fletro 6.1
  9. kalau yang menggunakan template plus ui gmna cara nya bang?
    1. Semua template bisa, tinggal sesuaikan class pada template masing2 saja, karna nama class tiap template berbedah dan bebas di namai sesuka pembuat jadi saya tidak akan tau nama class template yang kamu gunakan
© 2020 - Wendy Code