Memuat berita terbaru...
Beranda
Blog Tips
Blogger

Cara Membuat Sticky News Bar di Blogger

Tutorial membuat Sticky News Bar di Blogger yang menampilkan judul posting terbaru berjalan otomatis, responsif, ringan, dan ramah SEO.
TipsTechPraktis

Cara Membuat Sticky News Bar di Blogger (Ticker Berita Terbaru)

Ingin menampilkan berita terbaru dari blog dalam bentuk bar berjalan (ticker) di bagian atas postingan atau sidebar? Dengan sedikit kode HTML, CSS, dan JavaScript, kamu bisa menambahkan Sticky News Bar yang otomatis menampilkan judul postingan terbaru dari feed Blogger.

Tampilan Hasil

  • Dot kuning berkedip sebagai indikator update.
  • Judul posting terbaru yang bergerak horizontal seperti news ticker.
  • Desain responsif, enak dibaca di desktop maupun mobile.

Langkah Pemasangan Sticky News Bar

  1. Masuk ke dashboard Blogger, pilih menu Tema lalu klik Edit HTML.
  2. Tambahkan kode CSS untuk styling sticky news bar tepat sebelum tag </head>.
  3. Tambahkan kode HTML sticky news bar di atas </body> atau di dalam <header> sesuai template.
  4. Simpan tema, lalu cek blog kamu untuk memastikan sticky news bar sudah tampil.

Langkah-Langkah

1. Tambahkan HTML

Letakkan kode berikut di tempat yang ingin kamu tampilkan ticker (misalnya di atas postingan atau di sidebar):

<div id="ttp-news-sticky" aria-label="Berita terbaru">
  <div class="ttp-news-content">
    <span class="ttp-news-title">
      <span class="ttp-news-dot"></span>
      <svg class="line" viewBox="0 0 24 24">
        <path d="M14.5 10.6499H9.5" stroke-miterlimit="10"></path>
        <path d="M16.8199 2H7.17995C5.04995 2 3.31995 3.74 3.31995 5.86V19.95C3.31995 21.75 4.60995 22.51 6.18995 21.64L11.0699 18.93C11.5899 18.64 12.4299 18.64 12.9399 18.93L17.8199 21.64C19.3999 22.52 20.6899 21.76 20.6899 19.95V5.86C20.6799 3.74 18.9499 2 16.8199 2Z"></path>
      </svg>
    </span>
    <div class="ttp-news-items" id="ttp-latest-posts">
      <span data-text="Memuat berita terbaru...">Memuat berita terbaru...</span>
    </div>
  </div>
</div>

2. Tambahkan CSS

Tempelkan CSS ini di Theme → Edit HTML → sebelum </head>:

<style>
#ttp-news-sticky {
  background: linear-gradient(135deg, #f5f5f5, #e0e0e0);
  color: #000;
  font-size: 15px;
  width: 100%;
  box-sizing: border-box;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  margin: 6px auto;
  overflow: hidden;
}
#ttp-news-sticky .ttp-news-content {
  max-width: 1000px;
  margin: 0 auto;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
#ttp-news-sticky .ttp-news-dot {
  width: 10px;
  height: 10px;
  background: #ffcc00;
  border-radius: 50%;
  display: inline-block;
  margin-right: 6px;
  animation: blink 1.5s infinite;
}
@keyframes blink {
  0%, 50%, 100% { opacity: 1; }
  25%, 75% { opacity: 0; }
}
#ttp-news-sticky .ttp-news-title {
  font-weight: bold;
  white-space: nowrap;
  display: flex;
  align-items: center;
}
#ttp-news-sticky .ttp-news-items {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
  line-height: 1.5;
}
#ttp-news-sticky .ttp-news-items span {
  display: inline-block;
  padding-right: 40px;
  animation: ttp-slide 60s linear infinite;
}
#ttp-news-sticky .ttp-news-items span::after {
  content: attr(data-text);
  padding-left: 50px;
}
#ttp-news-sticky .ttp-news-items a {
  color: #000;
  text-decoration: none;
  margin-right: 25px;
}
@keyframes ttp-slide {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}
/* Mobile */
@media (max-width: 600px) {
  #ttp-news-sticky {
    font-size: 13px;
    border-radius: 0;
  }
  #ttp-news-sticky .ttp-news-content {
    padding: 6px 8px;
  }
}
</style>

3. Tambahkan JavaScript

Letakkan script ini sebelum </body> di template:

<script>
(function(){
      fetch('https://YOURBLOG.blogspot.com/feeds/posts/default?alt=json&max-results=20')
    .then(response => response.json())
    .then(data => {
      let entries = data.feed.entry;
      if (!entries) return;
      let newsItems = entries.map(post => {
        let title = post.title.$t;
        let link = post.link.find(l => l.rel === "alternate").href;
        return `<a href="${link}">${title}</a>`;
      }).join(" - ");
      document.getElementById("ttp-latest-posts").innerHTML =
        `<span data-text="${newsItems}">${newsItems}</span>`;
    })
    .catch(err => {
      document.getElementById("ttp-latest-posts").innerHTML =
        `<span data-text="Gagal memuat berita">Gagal memuat berita</span>`;
    });
})();
</script>

Catatan: Jangan lupa ganti YOURBLOG.blogspot.com dengan alamat blog kamu sendiri.

Baca Juga :

Hasil

Setelah semua kode dipasang, blog kamu akan menampilkan Sticky News Bar yang otomatis mengambil judul posting terbaru, berjalan seperti ticker berita, dan tetap nyaman dibaca di layar kecil.


Faq Post

Apa itu Sticky News Bar di Blogger?

Sticky News Bar adalah widget berjalan di blog yang menampilkan judul posting terbaru secara otomatis dari feed Blogger.

Apakah widget ini aman untuk SEO?

Ya, widget ini hanya mengambil judul posting melalui feed JSON Blogger dan tidak merusak struktur SEO blog.

Bagaimana cara memasangnya?

Kamu cukup menyalin kode HTML, CSS, dan JavaScript yang sudah disediakan lalu menempelkannya di template Blogger.

Apakah tampilannya bisa disesuaikan?

Tentu saja, kamu bisa mengganti warna, font, animasi, maupun letaknya sesuai kebutuhan desain blog kamu.

Posting Komentar