Cara Menampilkan Gambar di Pojok Halaman Blog (Floating Image Fixed Position)

Menambahkan gambar di pojok halaman blog adalah salah satu trik desain sederhana namun efektif untuk mempercantik tampilan website. Gambar ini biasanya berupa animasi (GIF) atau ikon dekoratif yang ditempatkan di sudut halaman seperti kiri atas, kiri bawah, kanan atas, atau kanan bawah.

Teknik ini menggunakan CSS positioning agar gambar tetap berada di posisi tertentu meskipun halaman di-scroll.

---

Manfaat Menambahkan Gambar di Pojok Blog

Dengan menggunakan teknik ini, Anda dapat:

• Membuat blog terlihat lebih menarik dan hidup
• Menambahkan elemen dekoratif tanpa mengganggu konten utama
• Memberikan branding visual sederhana
• Menarik perhatian pengunjung
• Cocok untuk personal blog, website sekolah, atau website sederhana

---

Langkah-Langkah Membuat Gambar di Pojok Halaman Blog

Berikut tutorial lengkap yang bisa Anda ikuti:

---

1. Pilih Gambar atau Icon (GIF)

Cari gambar atau animasi GIF yang sesuai dengan kebutuhan Anda. Anda bisa menggunakan situs penyedia GIF atau ikon gratis.

Setelah menemukan gambar yang diinginkan, salin URL gambar tersebut.

---

2. Masuk ke Dashboard Blog

Login ke akun blog Anda (misalnya Blogspot atau platform lainnya), lalu:

• Masuk ke Dashboard
• Pilih menu Tata Letak (Layout)

---

3. Edit HTML Template

• Klik Edit HTML
• Aktifkan opsi Expand Template Widget (jika ada)

---

4. Tambahkan CSS untuk Posisi Gambar

Cari kode berikut di template Anda:

]]></b:skin>

Kemudian tempelkan kode CSS berikut tepat di atasnya:

#trik_pojok {
  position: fixed;
  bottom: 0px;
  left: 0px;
  clip: inherit;
}

---

📌 Penjelasan posisi:

• left:0px → pojok kiri
• right:0px → pojok kanan
• top:0px → bagian atas
• bottom:0px → bagian bawah

Anda bisa mengubah posisi sesuai kebutuhan.

---

5. Tambahkan Script Gambar

Cari kode berikut di template:

</body>

Lalu tambahkan kode berikut tepat sebelum :

<div id="trik_pojok">
  <a href="https://example.com">
    <img src="https://example.com/gambar.gif" border="0" />
  </a>
</div>

---

6. Ganti URL Sesuai Kebutuhan

Silakan ubah bagian berikut:

• https://example.com → alamat blog atau website Anda
• https://example.com/gambar.gif → URL gambar yang sudah Anda copy

---

7. Cara Mendapatkan URL Gambar

Jika Anda belum tahu cara mendapatkan URL gambar:

• Klik kanan pada gambar
• Pilih Copy Image Address / Copy Link Address
• Atau buka Properties → copy bagian URL (Location)

---

8. Simpan dan Cek Hasil

• Klik Preview (Pratinjau) untuk melihat hasil
• Jika sudah sesuai, klik Save Template (Simpan Template)

---

Kesimpulan

Dengan menggunakan CSS position: fixed, Anda dapat menampilkan gambar di pojok halaman blog secara permanen. Teknik ini sangat berguna untuk mempercantik tampilan blog tanpa mengganggu isi utama.

memungkinkan pengaturan elemen seperti gambar agar tetap berada di posisi tertentu di layar pengguna.