Tutorial Membuat Teks dan Gambar Berjalan ke Atas di Blogger

(Versi Klasik & Versi Modern SEO-Friendly)

Tutorial animasi teks dan gambar.png

Pendahuluan

Efek teks atau gambar berjalan ke atas sering digunakan di Blogger untuk menampilkan:

• Artikel terkait

• Logo partner

• Promosi blog

• Informasi singkat di sidebar

Banyak blogger lama masih memakai tag <marquee>. Walaupun simpel, marquee sudah tidak direkomendasikan karena deprecated dan kurang SEO.
Di artikel ini, kita akan bahas dua metode:

1. Cara kerja script lama (marquee)

2. Cara membuat versi modern, aman AdSense, dan SEO-friendly

---

1. Mengenal Script Teks/Gambar Berjalan (Marquee)

Script HTML + inline CSS + marquee.

Contoh Script Lama (Klasik)

<marquee direction="up" height="100" scrollamount="2"
onmouseover="this.stop()" onmouseout="this.start()">

  <a href="https://melensnews.blogspot.com/">
    <img src="https://blogger.googleusercontent.com/img/.../s200/logomelensnews.png"
    width="200" />
  </a>

</marquee>

Pratinjau: contoh gambar berjalan/ bergerak ke atas

• 

Fungsi Atribut Penting

• direction="up" → bergerak ke atas

• scrollamount="2" → kecepatan gerak

• onmouseover="this.stop()" → berhenti saat hover

• onmouseout="this.start()" → jalan lagi saat mouse keluar

Kekurangan Marquee ❌

• Tidak direkomendasikan Google

• Kurang ramah SEO

• Berpotensi bermasalah di browser modern

• Tidak ideal untuk jangka panjang

---

2. Solusi Modern: CSS Animation (Disarankan)

Metode ini menggantikan marquee sepenuhnya dan jauh lebih profesional.

Kelebihan Versi Modern ✅

• SEO-friendly

• Aman AdSense

• Lebih ringan

• Tampilan modern

• Kontrol animasi lebih fleksibel

---

3. Struktur HTML (Versi Modern)

Pasang di Post / Widget HTML Blogger:

<div class="artikel-terkait">
  <div class="artikel-title">Artikel</div>

  <div class="artikel-scroll">
    <a href="https://melensnews.blogspot.com/" class="artikel-item">
      <img
        src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhab5AQ5ipfinsModVWb2bpfoppufYwGilrXu4TfkKXcgFhwkN3UKEv5M4Ost3u6jxP8hAd54XUq0PeC7OG8ZUIEW1iANWNmbpFXlB4GESgFzJT7UY6uG6yRNIeJ3h7x8DOCY0NBO_pzCVk/s200/logomelensnews.png"
        alt="Melens News"
      />
    </a>
  </div>
</div>

---

4. CSS Animasi (Wajib Dipasang)

Masuk ke:
Tema → Sesuaikan → Tambahkan CSS

.artikel-terkait {
  font-family: Verdana, Geneva, sans-serif;
}

.artikel-title {
  background: #cd2027;
  color: #fff;
  font-size: 16px;
  padding: 6px 0;
  text-align: center;
  border-radius: 4px;
  width: 120px;
  margin-bottom: 6px;
}

.artikel-scroll {
  height: 100px;
  overflow: hidden;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  position: relative;
}

.artikel-item {
  display: flex;
  justify-content: center;
  align-items: center;
  animation: naik 8s linear infinite;
}

.artikel-item img {
  max-width: 200px;
  height: auto;
}

/* Pause saat hover */
.artikel-scroll:hover .artikel-item {
  animation-play-state: paused;
}

@keyframes naik {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(-100%);
  }
}

---

5. Cara Mengatur Kecepatan & Tinggi

• Kecepatan → ubah 8s (semakin kecil = semakin cepat)

• Tinggi area → ubah height: 100px;

• Ukuran gambar → max-width: 200px;

---

6. Tips SEO & AdSense

✔ Gunakan alt pada gambar
✔ Jangan berlebihan animasi
✔ Hindari script usang (marquee)
✔ Gunakan CSS terpisah, bukan inline
✔ Cocok untuk sidebar, bukan konten utama

---

Baca juga

• ↷ Manfaat Website Bagi Bisnis Dan Kelangsungan Usaha
• ↷ Beberapa alasan mengapa daftar adsense ditolak
• ↷ Tiga Tips Sederhana Yang Efektif Untuk Melipat Gandakan Traffic Blog

Penutup

Efek teks atau gambar berjalan ke atas masih relevan asal dibuat dengan cara yang benar.
Dengan CSS animation, tampilan blog jadi:

• Lebih profesional

• Lebih aman

• Lebih disukai mesin pencari

Buat blogger yang ingin naik kelas, meninggalkan marquee adalah langkah cerdas.