Make Trick Hidden Image Full Stylish Ways

Di antara kalian pasti sudah sering mendengar trik melindungi gambar dengan teknik protect image use watermark ways! Menyembunyikan gambar utama dengan ditimpa dengan gambar tipuan :d Untuk blogger malas seperti aku, bisa dengan mudah memakai tools berikut guna membuat caption image full stylish image caption tool.
Dimulai dari memperhatikan sebuah syntax image, lain dari biasanya gue sidik² kok ada dua url ditulis di sana! Ternyata gaya penulisan Internal Style yang digunakan. Dan ini banyak dipakai oleh para blogger aliran blogazine. Seronoookkk :))
Beberapa trick dengan menggunakan technique DHTML pernah Koben share juga syntax for image. Jadi inti postingan sekarang begini

Default syntax coded add image with none layout.<a href="http://link-image/s1600/XXX.jpg"><img style="cursor: pointer; cursor:hand;width: XXXpx; height: XXXpx;" src="http://link-image/s320/XXX.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_12345678910" /></a>Kode /s1600/ bisa kita mainkan dari s1 - s1600, yg berarti nilai nominal tersebut menandakan resolusi gambar yg terlihat.
Sekarang bagaimana menghias gambar agar tampak memakai embel-embel layaknya caption image, namun berfungsi juga melindungi seperti teknik watermark!

Full CSS teknik ini, karena kalau pake script, saya tidak tahu cara bikinnya (nanti kalo ketemu tut'snya di postingkan) :d Adapun persiapan memulai trik ini, sobat harus terlebih dahulu menentukan lebar dan tinggi gambar fiktif? Karena langkah awal ini sangat penting guna menyembunyikan gambar utama ;)
Seperti biasa, kalau yg malas spt gue, kalian hanya tinggal melakukan penulisan syntax img seperti berikut.<img style="background-image:url(http://link-image/s1600/XXX.jpg);width: XXXpx;height: XXXpx;" src="data:image/gif;base64, R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" />Result

Pada bagian style="" sobat bisa kreasikan sesuai selera. Lantas dimana uniknya! Coba sekarang lakukan klik kanan mouse pada gambar, pilih opsi Copy Image Location. Bila dilakukan perintah Save Image As... maka yg akan tersimpan yaitu index.gif
Mungkin sudah mulai terbaca apa maksud Koben oleh sobat-sabit sekalian :) Simpanlah di tempat aman link gambar default, jangan sampai hilang. Itu kuncinya bos ;)data:image/gif;base64, R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==
Pada awal Koben menyuruh menentukan tinggi & lebar gmbr! Ini berfungsi bilamana kita akan menggantikan link gambar default dengan gambar kreasi. Buatlah pada photoshop sebuah bidang persegi dengan width & height sesuai kebutuhan. Misalkan width 300px dan height 250px. Jangan lupa dibuat transparan background bidang tersebut! Buatlah satu kreasi ciri khas di sana, misalnya nama kalian atau nama blog.Sobat melihat ada tulisan keren pada gambar itu? Yeah that's right, itu kreasi bidang yg Koben buat di photoshop :"> Like itThis is markup HTML

<img style="background: url(http://link-image-gambar/s1600/XXX.jpg);margin: 0 auto;display: block" src="http://link-image-kreasi-photoshop/s1600/XXX.png" border="0" width="XXXpx" height="XXXpx" />

Mau contoh lagi...
Cari kode ]]></b:skin> letakan kode CSS sederhana brkt sebelum/diatasnya.overlay {
position: absolute;
margin: 0;
z-index: 1;
width: XXXpx;
height: XXXpx;
}Pemakaian

<img src="http://link-image-kreasi-photoshop/s1600/XXX.png" border="0" class="overlay"/>
<img src="http://link-image-gambar/s1600/XXX.jpg" border="0" width="XXXpx" height="XXXpx"/>

This result

Silahkan dicoba klik kanan mouse dan lakukan order save or copy image location ;))

Jangan lupa memakai atribut alt yah, biar SEO friendly :D Be a creative ;)
Happy coding \m/