Cara Membuat Efek Watermark Shake Bounce pada Gambar Artikel

Selamat datang di Wahyu Development, disini saya akan membagikan tutorial tentang membuat gambar watermark dan gambar bergetar saat disentuh mouse. Fungsi watermark sebagai penanda pada gambar dan digunakan untuk melindungi gambar dari orang yang mengcopy paste gambar anda. Ok langsung saja.

Cara Pertama

Pertama anda harus login ke akun blogger anda, kemudian buka menu Tema --> Edit HTML. Pada halaman Edit HTML cari code ]]></b:skin> gunakan CTRL+F untuk memudahkan dalam pencarian, jika sudah menemukan code ]]></b:skin> paste script berikut tepat sebelum code ]]></b:skin>

.watermark{position:relative}
.watermark::after{content:"Wahyu Development";color:black;font-size:14px;position:absolute;right:186px;bottom:32px;border:1px solid #000;background-color:#fff;padding:4px;opacity:.4;height:14px;line-height:14px}
.shake:hover{animation:shakeOf .82s cubic-bezier(.36,.07,.19,.97) both;transform:translate3d(0,0,0);backface-visibility:hidden;perspective:1000px}
.bounce{margin:10px 0}
.bounce:hover{animation:bounceOn .82s cubic-bezier(.36,.07,.19,.97) both;transform:translate3d(0,0,0);backface-visibility:hidden;perspective:1000em}
@keyframes shakeOf{10%,90%{transform:translate3d(-1px,0,0)}20%,80%{transform:translate3d(2px,0,0)}30%,50%,70%{transform:translate3d(-4px,0,0)}40%,60%{transform:translate3d(4px,0,0)}}
@-webkit-keyframes shakeOf{10%,90%{transform:translate3d(-1px,0,0)}20%,80%{transform:translate3d(2px,0,0)}30%,50%,70%{transform:translate3d(-4px,0,0)}40%,60%{transform:translate3d(4px,0,0)}}
@keyframes bounceOn{10%,90%{transform:translate3d(0,-1px,0)}20%,80%{transform:translate3d(0,2px,0)}30%,50%,70%{transform:translate3d(0,-4px,0)}40%,60%{transform:translate3d(0,4px,0)}}
@webkit-keyframes bounceOn{10%,90%{transform:translate3d(0,-1px,0)}20%,80%{transform:translate3d(0,2px,0)}30%,50%,70%{transform:translate3d(0,-4px,0)}40%,60%{transform:translate3d(0,4px,0)}}

Selanjutnya, agar memudahkan anda untuk memberikan Watermark di semua gambar secara otomatis silahkan anda cari code <data:post.body/>, gunakan CTRL+F untuk mencarinya.

Code tersebut pada umumnya terdapat 3 pada template, pilihlah yang terakhir dan ubah code <data:post.body/> menjadi <div class='watermark'><data:post.body/></div>. Maka akan terlihat seperti ini.

Class yang tertera diatas menunjukan tampilan watermark, jika anda ingin menambahkan shake atau bounce anda cukup menambahkan seperti ini.

Jika sudah silahkan Save Tema dan lihat hasilnya pada artikel anda, semua gambar akan terdapat watermark dan atau anda menambahkan class Shake atau Bounce maka gambar akan bergerak.

[Catatan] Cara ini dilakukan untuk website yang hanya memiliki satu gambar utama saja, jika artikel anda terdapat banyak gambar anda perlu menambahkan cara berikut ini pada artikel anda.

Cara Kedua

Untuk cara yang kedua dilakukan secara manual, silahkan anda buka artikel anda dan masuk menggunakan mode HTML.

Pada gambar diatas terdapat code <div class="separator" style="clear: both; text-align: center;">, code tersebut akan selalu tampil jika artikel anda terdapat banyak gambar, silahkan anda tambahkan teks watermark atau shake ataupun bounce sehingga menjadi seperti ini <div class="separator watermark" style="clear: both; text-align: center;">.

[Catatan] Jika watermark cara kedua ini terlihat terlalu tinggi silahkan anda kembali ke Edit HTML, pada bagian bottom CSS watermark tersebut, ubahlah nilainya agar sesuai.

Jika sudah silahkan update artikel anda, maka anda dapat melihat hasilnya. Itulah tutorial untuk membuat efek pada gambar, berikan komentar anda tentang ini dan semoga bermanfaat . . .

Wahyu Development

Situs download software lengkap dan mudah - Tutorial lengkap tentang website, sosial media, dan komputer - Sumber referensi tugas sekolah dan informasi lainnya

Share this post

Related Post