Cara Membuat Watermark Gambar Secara Otomatis di Blogger

www.azid45.web.id - Cara Membuat Watermark Gambar Secara Otomatis di Blogger. Assalamualaikum. Wr. Wb, pada kesempatan kali ini saya akan share membuat watermark otomatis pada blog dengan menggunakan CSS. Sebenarnya cara ini sudah pernah saya share pada blog saya yang lainnya hanya saja blog saya sudah dihapus oleh google karena sering share template.

Pada saat itu blog saya yang satunya memang fokus pada tutorial blogger, template AMP dan d0wnlo4d template premium hasil cloningan saya sendiri. Blog saya ini tidaklah berumur panjang kurang lebih baru berumur  4-5 bulanan sudah terhapus oleh google karena dilaporkan oleh orang lain (bukan developer template).

Template yang sering dilaporkan oleh orang tersebut ke DMCA Google tidak lain adalah template premium yang sudah terkenal seperti viomgaz, kompiflexible, dan igniplex. Blog yang dihapus tidaklah milik saya sendiri akan tetapi masih banyak blog dihapus oleh google dengan penyebab yang sama seperti Rian SEO, Devtamplate, BloggerNTT, dan lain sebagainya.

Hal tersebut merupakan masa kelam saya, yang sudah saya rubah agar tidak terulang kembali untuk share template premium secara gratis meskipun itu hasil cloning sendiri. Dari pengelaman ini alangkah baiknya anda sebagai seorang blogger jangan sampai share template premium dan menjual ulang template tersebut dengan harga yang lebih murah. Bahwasannya hal tersebut sudah melanggar TOS. Penyebabnya sebagai orang yang beragama setidaknya anda mendapatkan rezeki yang kurang berkah

Jadi ngelantur, baiklah kembali ketopik awal. Mengapa menggunakan watermark blog secara otomatis? dampaknya bagaimana? kekurangannya apa jika menggunakan teknik ini?. Sebelum menuju ke tutorial anda bisa menyimak jawabannya berikut ini:

Alasan Menggunakan Watermark Gambar Otomatis Pada Blog

Secara pengalaman pribadi saya menerapkan watermark gambar secara otomatis tidak lain adalah karena lebih simple tampa edit ulang gambar. Selain itu jika saya menggunakan watermark secara manual berarti saya harus edit gambar begitu banyak postingan yang saya sudah upload sebelumnya.

Watermark sendiri memiliki fungsi untuk legalitas sebuah kepemilikan. Dengan menggunakan watermark setidaknya ada satu hal yang tidak bisa di klaim oleh orang lain yaitu karena gambar yang kita gunakan sudah terdapat watermark. Dengan begitu orang yang mencuri artikel kita beserta gambarnya setidaknya akan ketahuan oleh kita bahkan orang lain juga.

Terus apa alasan anda untuk membuat watermark secara otomatis ini?. Namun perlu anda ketahui bahwasannya watermark otomatis memiliki kekurangan. Bagaimana kekurangannya? simak berikut ini

Kekurangan Menggunakan Watermark Gambar Otomatis Pada Blog

Dari segi kemudahan menggunakan watermark secara otomatis adalah solusi utama bagi kita yang ingin memberikan legalitas gambar di blog kita. Namun disadari atau tidak, sejatinya watermark otomatis menurut saya masih memiliki kekurangan.

Kekurangan dari menggunakan watermark otomatis salah satunya adalah saat gambar kita di download oleh orang lain maka watermark yang sudah kita pasang secara otomatis tersebut akan hilang. Hal ini akan menghilangkan legalitas kita sebagai pemilik gambar dan orang lain akan leluasa untuk mendownload gambar yang lainnya pula pada blog kita.

Mengapa demikian?, sejatinya menggunakan watermark otomatis adalah sebuah kamuflase di blog kita dengan menggunakan teknik kode CSS. Dengan sedikit sentuhan editing CSS before pada setiap selector yang ada pada gambar maka gambar akan memiliki watermark secara otomatis. Sehingga secara nyata gambar tersebut sebenarnya hanyalah gambar biasa tanpa "watermark".

Namun janganlah khawatir disebabkan menggunakan watermark secara otomatis pada blog juga memiliki dampak positifnya. Bagaimana dampak positif tersebut? mari simak penjelasannya berikut ini:

Dampak Menggunakan Watermark Gambar Otomatsi Pada Blog

Selain memiliki kekurangan dalam penggunaan watermark gambar secara otomatis ternyata masih ada dampak positifnya salah satunya adalah pengunjung akan ragu untuk "download gambar" kita dan bisa jadi malas untuk mendownloadnya. Pasti anda tahu maksud saya dan bisa jadi anda pernah mengalaminya bukan?.

Secara umum jika anda melihat sebuah tutorial pada blogger dan anda ingin memposting ulang pada blog anda namun ternyata gambar yang ada pada blog tersebut terdapat watermarknya mungkin anda tidak akan mengambil gambar tersebut dan menggantinya dengan gambar yang lain bukan. Bahkan bisa jadi anda akan mencari gambar yang serupa di google bukan?.

Itulah dampak positifnya, setidaknya anda tidak akan repot-repot membuat watermark secara manual. Cukup dengan menggunakan CSS saja pengunjung blog anda akan terkelabuhi dengan tampilan watermark yang ada pada gambar anda. Terus bagaimana cara untuk membuat watermark gambar secara otomatis?, untuk menjawab hal ini anda bisa menyimak tutorial dibawah ini

Tutorial Membuat Watermark Gambar Otomatis Pada Blog

Secara umum anda bisa menggunakan kode CSS berikut ini dengan meletakkannya diatas kode </head>

<style>
img::before{content:"Kolom Ilmu";color:#fff;font-size:12px;font-weight:bold;position:absolute;right:0;bottom:7px;border:1px solid #3a3a3a;border-top-left-radius: 10px;;background-color:#3a3a3a;padding:4px;opacity:.8;height:14px;line-height:14px}
</style>

"perhatikan kode tersebut!, anda bisa mengganti kata kolom ilmu dengan nama blog anda, code color #3a3a3a untuk warna background anda bisa menggantinya dengan background yang anda kehendaki dengan mengubah kode color tersebut dan color #fff untuk warna tulisannya, anda juga bisa menggantinya."

Namun perlu anda ketahui tidak semua template bisa menggunakan kode CSS tersebut. Kadang kala perlu tambahan sentuhan selector bahkan mengganti selector img dengan kode selector yang lainnya agar kode tersebut berfungsi.

Dari eksperimen yang saya lakukan adalah terlebih dahulu anda harus menambahkan setiap selector yang anda butuhkan dengan property position:relative. Saya sendiri menggunakan template kompiflexible. Pada template umum setiap gambar kadang kala ada selector .separator (umum dan otomatis ada kecuali anda menghapusnya).

Pada template yang saya gunakan, saya memberikan watermark gambar otomatis pada futured post, thumbnail gambar di home page dan gambar di post body sehingga kode yang harus saya buat adalah sebagai berikut:

.separator,.image,.posts-thumb{position:relative}
.separator::before,.image::before,.posts-thumb::before{content:"Kolom Ilmu";color:#fff;font-size:12px;font-weight:bold;position:absolute;right:0;bottom:7px;border:1px solid #3a3a3a;border-top-left-radius: 10px;;background-color:#3a3a3a;padding:4px;opacity:.8;height:14px;line-height:14px}

"Selector .separator untuk menampilkan watermark pada postingan. Selector .image untuk menampilkan watermark pada futured post. Selector .posts-thumb untuk menampilkan watermark pada thumbnail gambar di home page".

Jika anda menggunakan template kompiflexible anad cukup copas saja kode CSS tersebut dan anda bisa menghapusnya dari salah satu selector yang ada sesuai dengan apa yang anda butuhkan.

Karena secara umum blogger sekarang menggunakan template viomgaz maka saja juga akan menjabarkan eksperiment saya menggunakan watermark di template viomagz. Kedua eksperimen ini setidaknya akan membantu anda yang tidak menggunakan kedua template tersebut. Semoga anda paham penjalasan saya ini. Amin.

Baiklah langsung saja. Simak gambar berikut ini terlebih dahulu.

Pada gambar diatas adalah screenshot hasil inpect saya terhadap template viomagz dengan menambahkan watermark secara otomatis. Disana saya menambahkan watermark pada thumbnail home page. Dari inpect tersebut untuk menambahkan watermark gambar saya harus menambahkan before pada selector .img-thumbnail sehingga saya harus menambahkan kode CSS berikut ini

.img-thumbnail{position:relative}
.img-thumbanil::before{content:"Kolom Ilmu";color:#fff;font-size:12px;font-weight:bold;position:absolute;right:0;bottom:7px;border:1px solid #3a3a3a;border-top-left-radius: 10px;;background-color:#3a3a3a;padding:4px;opacity:.8;height:14px;line-height:14px}

Bagaimana mudah bukan?.

Kalau untuk gambar postingan anda bisa menggunakan selector .separator atau terserah anda seperti buat saja selecetor CSS .watermark maka hasil kode CSS akan menjadi seperti berikuti ini

.watermark{position:relative}
.watermark::before{content:"Kolom Ilmu";color:#fff;font-size:12px;font-weight:bold;position:absolute;right:0;bottom:7px;border:1px solid #3a3a3a;border-top-left-radius: 10px;;background-color:#3a3a3a;padding:4px;opacity:.8;height:14px;line-height:14px}

Untuk eksekusi penggunaannya kurang lebih seperti ini.

<div class="watermark">
<img alt="ini tulisan title gambar" title="ini tulisan title gambar" src="link gambar"/>
</div>

Intinya jika anda mengupload setiap gambar pastikan tambahkan kode <div class="watermark"> pada pembuka img dan </div> pada penutup img.

"ingat! secara umum pada setiap gambar sudah terdapat selector .separator jadi gunakan kode CSS dengan selector .separator sangat diutamakan. Adapun untuk Blog AMP anda bisa menggunakan selector .post-body amp-img:after"

Bagaimana mudah bukan?. Demikianlah tutorial terkait membuat watermark gambar otomatis. Semoga dengan eksperimen ini setidaknya anda yang belum paham kode CSS akan sedikit paham terkait kode CSS dan yang sudah paham akan lebih paham lagi. Amin.