Halo sobat jagoan. Watermark sangat penting untuk meminimalisir kegiatan plagiat. Khususnya untuk mencegah duplikasi pada gambar. Terkadang pemberian watermark sangat perlu dilakukan untuk mengklaim hak cipta dari sebuah gambar yang kalian punya. Namun terkadang beberapa orang sangat malas sekali untuk menambahkan atribut penanda gambar ini. Dikarenakan beberapa faktor seperti harus membuka aplikasi editor gambar kemudian menyimpan nya lagi. Tentu hal ini akan menambah ribet dan ruwet sementara pekerjaan kita bertambah.
Nah didalam tutorial kali ini kita akan mencoba mencari cara bagaimana agar postingan gambar yang kita miliki kemudian memiliki watermark otomatis. Karena dipasang script nya langsung melalui blogger. Secara otomatis gambar yang kita punya langsung memiliki watermark dengan sendirinya. Tetapi kelemahannya saat gambar disave watermark tidak langsung terikut pada gambar. Tetapi hal ini tetap mengamankan gambar dari kegiatan screenshot komputer.Jadi bagi mereka yang tidak mengetahui cara save gambar. Cara ini minimal bisa mengalabui para tukang plagiat di berbagai belahan dunia hehehe.
Untuk melihat previewnya silahkan lihat pada link dibawah :
Oke sobat cara ini sangat aman dan sangat mudah sekali kita hanya perlu memasangnya lewat script menggunakan CSS dan ini tidak memberatkan beban blog yang kita punya. Dan wajib kalian coba minimal untuk menambah keren blog yang kita punya, Dan script ini juga membantu kita untuk menambahkan beberapa watermark yang ada pada banyak gambar. Secara banyak dan sekaligus otomatis. Oke untuk tidak memperpanjang waktu maka langsung saja kita masuk kedalam tutorial dan langkahnya berikut ini :
Cara Memberikan watermark pada gambar menggunakan CSS
Secara default gambar memiliki class separator image yang telah diberikan blogger secara otomatis. Disinilah tugas kita untuk meletakan css separator before untuk memberikan watermark image didalamnya. Seperti biasa trik ini dikhususkan bagi para blogger yang menggunakan template untuk nonAMP. Kalau kalian menggunakan template AMP insyaallah akan saya bahas minggu depan.
Untuk membuatnya kita perlu langsung memasangnya didalam blogger. Silahkan ikuti caranya berikut ini :
Silahkan login ke blogger
langsung masuk kemenu TEMA>>EDIT HTML
silahkan copy paste kode dibawah ini dan letakan tepat dibawah kode ]] ></b:skin> atau antara kode <style></style>. Jadinya seperti dibawah ini :
.separator{position:relative;overflow:hidden;border:none}.separator::before{content:"JK-ONE";color:#fff;font-size:32px;font-weight:bold;font-family:'Russo One', sans-serif;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);background-color:#3a3a3a;padding:20px;opacity:.8;line-height:16px;border-radius: 20px;white-space:nowrap}Oke jadinya seperti digambar ini sobat:
Catatan :
Ganti kode content:”JK-ONE”; dengan nama yang kalian inginkan.ganti kode family:’Russo One’, sans-serif; dengan jenis font yang kalian inginkan. Ganti kode opacity:.8 menjadi opacity:.1 untuk nilai yang lebih kecil untuk mendapatkan hasil yang lebih transparan.
Oke sekarang jangan lupa SAVE dan kalian bisa melihat hasilnya
Oke sobat demikianlah tutorial admin jagoankode semoga dapat membantu kalian semua dan semoga bermanfaat bagi teman teman sekalian. Terima kasih 😀
PREVIEW WATERMARK
Kalian bisa menyetel posisi watermark mau berada disebelah kanan kiri bawah kanan atas atupun di kiri atas. Dengan mengganti posisi top:50% menjadi right:0px dan bottom:8px. Silahkan bereksperimen 😀
