Mohon Maaf, tapi website sedang dalam perbaikan. regrads~admin-reeunnn | find me on Github
Beranda
Blogger

Caption Jadi Watermark di Gambar Posting Blogger

Pelajari cara mudah membuat caption jadi watermark di gambar postingan Blogger agar tampilan blog makin keren dan profesional.
Punya blog di Blogger tapi gambar-gambar kamu belum ada watermark-nya? Tenang aja, di sini aku bakal kasih tau kamu cara gampang biar setiap gambar di postingan kamu punya watermark caption yang keren. Jadi, nggak perlu ribet lagi deh! Yuk, ikutin langkah-langkahnya!
ngenez.com

1. Masuk Dulu ke Blogger

Langkah pertama, pastinya kamu harus login ke akun Blogger, terus buka deh blog yang pengen di edit. Nggak susah kok, tinggal klik-klik aja.

2. Edit Tema Blog Kamu

Nah, kalo udah masuk, sekarang kamu ke bagian "Tema" di menu sebelah kiri. Terus, klik "Edit HTML" biar kamu bisa ngedit kode HTML templatenya. Di sini kita bakal tambahin kode biar watermark-nya muncul di gambar kamu.

3. Tambahin CSS buat Watermark

Cari bagian </head> di kode HTML-nya, terus tambahin kode CSS di bawah ini.
Atau kamu bisa taruh sebelum tag </style>. Sesuaikan ajah ama kebutuhan kamu. 
.tandaair-gambar {
  position: relative;
  transform: translateX(-50%);
  left: 50%;
  display: inline-block;
  text-align: center; /* Untuk memusatkan gambar */
}

.tandaair-gambar .tandaair {
  position: absolute;
  transform: translateX(-50%);
  left: 50%;
  bottom: 20px; /* Teks watermark di tengah atas */
  background: rgba(255, 99, 71, 0.5); /* Transparansi latar belakang watermark */
  color: black;
  padding: 4px;
  font-size: 10px;
  font-weight: bold;
  border-radius: 10px;
  text-align: center justify;
  text-transform: lowercase;
  font-family: monospace;
  max-width: 80%; /* Batas maksimal lebar teks */
  white-space: wrap; /* Mencegah teks membentuk baris baru */
  overflow: hidden; /* Menyembunyikan bagian teks yang melampaui */
  text-overflow: ellipsis; /* Menampilkan '...' jika teks terlalu panjang */
  box-sizing: border-box; /* Memastikan padding tidak memengaruhi lebar */
}

Jika di pasang dibagian <head> atau diatas </head> ,
kodenya kamu harus seperti ini <style>Kode Disini</style>.

Penjelasan:

  • bottom Mengatur posisi bawah watermark, bisa di ganti menjadi top, silahkan sesuaikan dengan keinginan. 
  • background Nilai 0.5 menandakan transparansi di 50%, jika ingin transparan lagi ubah ke 0.1. 
  • color Mengatur warna dari teks.
  • Selebihnya aku anggap kamu udah tahu yah... Males jelasinnya, awokawok.
CSS di atas fungsinya buat styling watermark dan gambar kamu. Dengan kode ini, watermark lo bakal muncul di pojokan gambar. Jadi kelihatan lebih profesional, gitu.

4. Modif HTML Postingan Kamu

Pas nambahin gambar di postingan, kamu harus bungkus tuh gambar pake div yang punya class tandaair-gambar. Terus, tambahin juga div baru buat caption atau watermark-nya. Contohnya kayak gini nih: 
<div class="tandaair-gambar">
  <img src="URL_Gambar" alt="Deskripsi_Gambar_Disini">
  <div class="tandaair">Caption_Keren_kamu_disini!</div>
</div>
Tinggal ganti "URL_Gambar" sama link gambar kamu, dan "Caption_Keren_kamu_disini!" sama teks watermark yang kamu mau dan juga jangan lupa ubah juga Deskripsi_Gambar_Disini.


Penutup

Gitu deh caranya biar gambar-gambar di blog kamu makin keren pake watermark. Jadi, nggak perlu khawatir lagi kalo gambar kamu bakal dipake orang sembarangan. Sekarang kamu bisa tampil beda dan tetap kece di dunia per-bloggeran!
Selamat mencoba, bro! DWYOR!
Seseorang yang nggak tahu mau ngapain lagi... :) Karena udah di titik tergalau karena cinta selalu di tolak. :(