Pemblokir Iklan Terdeteksi

Matikan adBlock anda untuk dapat mengakses situs ini.

translate to english

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 :

Mau donasi lewat mana?

Paypal
Bank Mandiri - An.wendy yulianto / Rek - 1150006900577
Traktir kreator minum kopi dengan cara memberi sedikit donasi. klik icon panah di atas