Membuat &quot;Watermark&quot; Otomatis pada Image Artikel di Blogger

Cara Membuat 'Watermark' Otomatis pada Image Artikel di Blog dengan CSS After dan Overlay (VALID AMP BLOGGER)

Watermark adalah sebuah tanda yang kita buat manual pada sebuah gambar maupun video. Watermark ini digunakan untuk melindungi gambar kita dari orang yang sembarangan mengambil sampai mengakui bahwa itu adalah gambar miliknya. (sumber: diazaki)

Biasanya, watermark pada gambar ditandai dengan logo ataupun nama perusahaan pemegang hak cipta gambar tersebut. Banyak blogger yang sering memasang watermark agar gambar yang ia upload tidak sembarangan diambil orang.

Kalau saya, sejujurnya agak malas untuk mengedit gambar di photoshop terlebih dahulu, kemudian memasang watermark pada foto yang akan saya upload. Karena rasa malah itulah, makanya saya jarang me-watermark gambar.

Tapi, saya mencoba hal baru untuk mengatasi rasa malas mengedit watermark di photoshop. Yaitu coba mengaplikasikannya lewat bahasa CSS. Apakah bisa? Tentu saja tidak.

Karena rasanya tidak mungkin sebuah bahasa CSS bisa membuat watermark kita menempel secara otomatis pada sebuah gambar. Untuk itulah saya akali saja dengan membuat "Watermark-Watermark-an" ala saya.

Seperti apa "watermark-watermark-an ala AMP Blogger" yang saya maksud?

Nah, kalau anda melihat setiap gambar atau image yang saya upload pada blog ini, maka akan melihat sebuah tulisan di pojok kiri bawah image yang saya upload. Itulah yang saya maksud sebagai watermark.

Namun perlu diketahui, logo atau tulisan itu tidak menempel di dalam gambar, melainkan hanya menumpuk saja diatasanya. Jadi sejujurnya, gambar akan tetap sama seperti biasanya jika kita download kembali.

Lalu, Apa CSS yang saya gunakan untuk membuat "WATERMARK" tersebut?

Awalnya saya mencari tutorial text overlay di w3school, dan terpikir untuk membuat watermark pada setiap gambar yang saya upload. Karena blog ini menggunakan template valid AMP blogger, maka saya mengubah sedikit kodenya.

Bagaimana caranya?

Okay, saya akan jelaskan secara rinci bagaimana cara membuat watermark otomatis di gambar artikel blog. Langsung saja ikuti step by stepnya.

1. Seperti biasa, masuk ke Themes - Edit HTML pada dashboard blogger.

2. Copy kode berikut ini. Saya akan buat 2 versi, untuk blog non amp dan valid amp.

NON-AMP

/* Post body img start */

.post-body img:after {
    content: "TEXT ANDA";
    position: absolute;
    bottom: 8px;
    left: 16px;
    font-size: 10px;
    background-color: white;
    color: black;
    text-align: center;
    border-style: solid;
    border-width: 1px;
    margin: 2px;
    padding: 0px 5px 0px 5px;
    opacity: 0.5;
    text-transform: uppercase;
}

VALID AMP

/* Post body amp-img start */

.post-body amp-img:after {
    content: "TEXT ANDA";
    position: absolute;
    bottom: 8px;
    left: 16px;
    font-size: 10px;
    background-color: white;
    color: black;
    text-align: center;
    border-style: solid;
    border-width: 1px;
    margin: 2px;
    padding: 0px 5px 0px 5px;
    opacity: 0.5;
    text-transform: uppercase;
}

/* Post body amp-img end */

Note:

Untuk blog non-amp, paste kode CSS tersebut atas ]]></b:skin>
Untuk blogger valid amp, silahkan paste kode tersebut di amp-custom.
Ganti TEXT ANDA sesuai dengan yang diinginkan.

3. Setelah semuanya selesai dipasang, silahkan klik SAVE.

Apakah sudah Selesai?

Pada dasarnya sudah. Namun, saya ada sedikit saran untuk kalian yang memakai blog AMP. Agar gambar terlihat lebih rapih, silahkan gunakan kode kode layout fixed-height khusus yang telah saya tulis di artikel: Agar Image di Blog AMP rapih tanpa setting dimensi gambar.

Semoga bermanfaat :)