✔ Menciptakan Watermark Otomatis Pada Image Artikel Di Blogger

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

Watermark ialah sebuah tanda yang kita buat manual pada sebuah gambar maupun video. Watermark ini dipakai untuk melindungi gambar kita dari orang yang sembarangan mengambil hingga 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 biar gambar yang ia upload tidak sembarangan diambil orang. 

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

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

Karena rasanya mustahil sebuah bahasa CSS dapat menciptakan watermark kita melekat secara otomatis pada sebuah gambar. Untuk itulah saya akali saja dengan menciptakan "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 goresan pena di pojok kiri bawah image yang saya upload. Itulah yang saya maksud sebagai watermark. 

Namun perlu diketahui, logo atau goresan pena itu tidak melekat di dalam gambar, melainkan hanya menumpuk saja diatasanya. Kaprikornus sejujurnya, gambar akan tetap sama ibarat biasanya jikalau kita d0wnl0ad kembali. 

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

Awalnya saya mencari tutorial text overlay di w3school, dan terpikir untuk menciptakan 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 menciptakan 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 isyarat berikut ini. Saya akan buat 2 versi, untuk blog non amp dan valid amp.

NON-AMP

 
 /* Post body img start */ 
 
  .post-body img{border:1px solid #ddd;border-radius:2%;padding:5px;max-width:100%}
 
 .post-body img:hover{opacity:1;-webkit-animation:flash 1.5s;animation:flash 1.5s}@-webkit-keyframes flash{0%{opacity:.4}100%{opacity:1}}@keyframes flash{0%{opacity:.4}100%{opacity:1}}
 
 .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;
 
   }
 
 /* Post body img end */
 

VALID AMP

 
 
 /* Post body amp-img start */
 
  .post-body amp-img{border:1px solid #ddd;border-radius:2%;padding:5px;max-width:100%}.post-body amp-img:hover{opacity:1;-webkit-animation:flash 1.5s;animation:flash 1.5s}@-webkit-keyframes flash{0%{opacity:.4}100%{opacity:1}}@keyframes flash{0%{opacity:.4}100%{opacity:1}}
 
 .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 isyarat CSS tersebut atas ]]></b:skin>
• Untuk blogger valid amp, silahkan paste isyarat tersebut di amp-custom.
• Ganti TEXT ANDA sesuai dengan yang diinginkan. 

3. Setelah semuanya simpulan dipasang, silahkan klik SAVE.

Apakah sudah Selesai?

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

Semoga bermanfaat :)

Sumber http://ampidn.blogspot.com

Share this post

Berlangganan update artikel terbaru via email: