Cara Memasang News Ticker di Blog

Cara Memasang News Ticker di Blog - Terdapat banyak cara yang bisa dilakukan untuk mengoptimasi halaman web. Ada yang meningkatkan kualitas tulisan, kualitas SEO, hingga menambahkan fitur baru untuk fungsi tertentu.

Khusus untuk poin terakhir, semua fitur rasanya bisa kita gunakan dengan mudah di blog. Widget tersebut tak jarang dijadikan sebagai patokan kenyamanan membaca oleh pengunjung.

Salah satu widget yang paling banyak digunakan saat ini yaitu news ticker. Penggunaannya tentu tak lepas dari banyaknya portal berita nasional yang menggunakan.

Rekomendasi: Cara Memasang Widget WhatsApp di Blog

Apa itu News Ticker?

News ticker adalah salah satu fitur pendukung yang biasa juga disebut dengan News Letter, Breaking News, dan Teks Berjalan. Teks berjalan tersebut banyak digunakan untuk menyampaikan informasi terbaru atau penting lainnya kepada pembaca.

Beberapa tahun belakangan, memasang news ticker bisa dilakukan dengan mudah menggunakan tag marquee. Namun seiring berkembangnya zaman, W3C selaku pengembang HTML melakukan pembaruan ke HTML 5.

Pada pembaruan terakhir, marquee dianggap sebagai fitur usang dan dianggap tidak valid untuk digunakan. Tapi tenang saja, Anda tetap bisa memasang teks berjalan dengan memanfaatkan animasi CSS yang ada saat ini.

Sumber: The W3C Markup Validation Service

Seperti biasa, yang kita butuhkan hanyalah HTML dan CSS agar performa blog tidak terlalu terbebani. Tanpa basa-basi lagi, berikut adalah tutorial lengkapnya.

Rekomendasi: Cara Memasang Widget Telepon Langsung di Blog

Cara Memasang Teks Berjalan di Blog

• Masuk ke BLOGGER
• Pilih menu TEMA
• Pilih EDIT HTML
• Cari <b:includable id='nextPageLink'/> dan tempel skrip berikut di atasnya:

<b:includable id="newsTicker">
  <div class="tickerContainer">
    <div class="tickerHead">News</div>
      <div class="tickerWrap">
        <div class="tickerMove">
        <div class="tickerItem">Cara Membuat Blog di Blogger</div>
        <div class="tickerItem">Cara Membuat Blog di WordPress</div>
        <div class="tickerItem">Cara Membuat Blog di Wix</div>
        <div class="tickerItem">Cara Membuat Blog di Joomla</div>
      </div>
    </div>
  </div>
</b:includable>

• Cari <b:include cond='data:view.isSingleItem' data='post' name='breadcrumb'/> dan tempel skrip berikut di atasnya:

<b:include name="newsTicker"/>

• Tempel di atas ]]></b:skin>:

.tickerContainer{position:relative;display:block;width:100%;margin:10px 0 30px 0;overflow:hidden}
.tickerHead{position:absolute;background:#3b4252;color:#fff;font-size:14px;padding:.8rem;animation-name:tickerFrames;animation-duration:.8s;animation-iteration-count:infinite;z-index:1}
.tickerWrap{background:#fafafa;width:100%;padding-left:100%}
.tickerMove{display:inline-block;white-space:nowrap;padding-right:100%;animation-name:ticker;animation-duration:60s;animation-timing-function:linear;animation-iteration-count:infinite}
.tickerMove:hover{animation-play-state:paused}
.tickerItem{display:inline-block;font-size:14px;padding:.8rem} 
@keyframes ticker{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(-100%,0,0)}}
@keyframes tickerFrames{0%{color:#fff}50%{color:#3b4252}100%{color:#fff}}
@media screen and (max-width:480px){.tickerContainer{left:-25px;width:calc(100% + 50px);margin-top:-40px}.tickerWrap{background:#eee}.tickerHead,.tickerItem{font-size:14px}}

• Pilih SIMPAN
• Selesai.

Demo

Jika posisi widget tidak pas dengan apa yang diharapkan, silahkan atur margin yang telah ditandai. Anda juga bisa menyimpan fitur ini pada postingan blog dengan menyimpan semua skrip di atas pada mode HTML postingan.

Jangan lupa membungkus CSS dengan <style>...</style> jika ingin ditampilkan di halaman postingan.

Rekomendasi: Cara Membuat Fungsi Auto Refresh di Blog

Penutup

Tutorial kali ini dibuat berdasarkan struktur kode di template Median UI. Mungkin ada perbedaan di template lainnya, silahkan atur berdasarkan pengetahuan koding Anda.

Cukup sekian artikel tentang Cara Memasang News Ticker di Blog ini, Terima kasih.