Hallo sahabat blogger pada kesempatan kali ini saya akan berbagi tutorial cara membuat watermark secara otomatis di gambar blogger hanya menggunakan css.
Watermark yang akan saya bagikan ini adalah watermark yang akan otomatis ada di setiap gambar di dalam artikel maupun postingan dan di semua posisi blog seperti di homepage dan lain sebagainya, watermark ini hanya menggunakan css dan sudah tentu tidak akan mengganggu kecepatan blog kalian.
Tapi kalian perlu ingat karena watermark ini hanya menggunakan css jadi tidaklah permanen, jika gambar kalian ada yang mendownload maka watermark ini akan hilang begitu juga jika gambar kalian di temukan di browser maka watermark ini tidak akan ikut terbawa.
Jadi jika kalian menggunakan watermark ini gambar kalian tidak 100% terlindungi, watermark ini hanya mempercantik tampilan gambar yang ada di blog kalian saja. Jika kalian ingin yang permanen saya sarankan kalian menggunakan photo editor atau aplikasi lainnya yang bisa kalian edit semau kalian.
Saya tekankan lagi kode css yang saya gunakan untuk membuat watermark pada gmabar di blog ini tidak semua template cocok karena setiap template bisa saja memiliki nama class yang berbeda, maka dari itu jika kalian menggunakan template dengan nama classnya yang berbeda kalian bisa rubah kode watermark ini dan samakan dengan classnya dengan template kalian.
Baik sebelum ke tutorial saya akan jelaskan dulu apa itu watermark
Watermark adalah suatu tanda kepemilikan atau hak cipta yang bertujuan untuk melindungi hasil dari karya kita seperti gambar, logo, tulisan, dan lain sebagainya yang tidak bisa di sebarluaskan atau digunakan kembali tanpa seijin yang punya.
Cara Membuat Watermark Secara Otomatis di Gambar Blogger
- Silahkan masuk ke blog kalian lalu pilih tema dan edit html
- Salin kode di bawah ini dan letakan di atas kode ]]></b:skin>
.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:'Telat Ngoding';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
Buat yang saya tandai dengan warna kuning yang bertuliskan telat ngoding silahkan di rubah dengan selera kalian.