Membuat Watermark pada Gambar Blogspot dengan CSS

Membuat Watermark pada Gambar Blogspot dengan CSS. Membuat watermark pada gambar bisa dilakukan menggunakan berbagai software photo editor seperti photoshop, foto filter dan lain sebagainya. watermark yang dibuat menggunakan aplikasi edit photo tersebut bersifat permanent. Adapun kali ini kita akan membuat watermark pada gambar yang telah di upload di postingan bloggsot menggunakan CSS yang bersifat tidak permanen. karena watermark yang tampil hanyalah manipulasi sebuah overlay dari kode CSS. contoh seperti gambar berikut :

Watermark CSS di web reload.id

Untuk membuat watermark pada image blogger via CSS sangatlah mudah, cukup menambahkan kode CSS berikut pada template blogger milik kita.

Silahkan copy dan paste code CSS dibawah ini kedalam template blogger :

[css]
.separator::before {
    content: "RELOAD.ID";
    color: #fff;
    font-size: 3em;
    font-weight: bold;
    position: absolute;
    right: 0px;
    bottom: 50%;
    opacity: 0.2;
    line-height: 14px;
    margin: auto;
    left: 0;
    top: 50%;
    padding: 12px;
    max-width: 300px;
    text-shadow: 0px 0px 3px #000;
}[/css]

Copy kode CSS diatas dan paste pada template blogger sobat dibagian sebelum kode ]]> </b:skin> lalu klik save untuk menyimpan perubahann.

Keterangan :
.separator adalah selector class umum pada image blogger/
RELOAD.ID bisa diganti dengan nama website / blog anda

Sangat mudah bukan menerapkan watermark pada image blogger menggunakan CSS ? Watermark biasanya berfungsi sebagai untuk mengantisipasi pencurian konten gambar oleh oknum blogger yang tidak bertanggung jawab. namun, untuk watermark dengan CSS ini tidak bisa karena bersifat tidak permanen. di blog reload.id sendiri pasang watermark css ini hanya untuk demo dari postingan ini :D. kalau masalah orang mau mencuri konten blog kita itu nanti juga ada pertanggungjawabannya.

Cukup sekian postingan kali ini, mudah-mudah sedikit banyaknya bermanfaat. 

Share this post