membuat watermark otomatis pada gambar di blogger

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 gambar di artikel.

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 gambar 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 caranya di bawah ini.

Membuat Watermark Otomatis Pada Gambar Di Blogger

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

.post-body .separator{
    position:relative!important
}
.post-body .separator:before{
    bottom:7px
}
.post-body .separator:before{
    content: 'Wendy Code';
    position: absolute;
    right: 0;
    bottom: 8px;
    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 .post-body harus sama dengan class postbody kalian

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