Cara Membuat Breaking News Ticker di Blog

Widget Breaking News Ticker adalah sebuah fitur yang menampilkan informasi terbaru pada blog dalam bentuk teks berjalan di bagian atas atau bawah layar. Fitur ini dapat memberikan nilai tambah bagi blog, terutama yang berfokus pada niche berita. Dengan fitur ini, blog dapat menampilkan informasi terbaru dengan cepat, sehingga dapat menarik minat pengunjung, serta meningkatkan daya tarik dan profesionalisme.

Bagaimana cara membuat Widget Breaking News Ticker ini? Apa saja yang dibutuhkan? Dan apa saja langkah-langkahnya? Silahkan simak tutorial lengkapnya di bawah ini.

Cara Membuat Breaking News Ticker

Berikut merupakan tutorial dan langkah - langkan untuk cara membuat breaking news berjalan di blog :

Cara Memasang Kode Breaking News Ticker di Blog

Berikut merupakan tutorial penerapan kode pada template :

1. Login ke Blogger.
2. Masuk ke dalam Tema.
3. Klik Edit HTML.
4. Scroll kebawah sampai menemukan kode ]]></b:skin> atau </style>.
5. Pastekan kode CSS ini di atas ]]></b:skin> atau </style> pada template kamu.

   #kaurka-ticker{max-width:100%;color:#444444;font-size:.9rem;background-color:#ffffff;border-radius:6px;box-shadow:0 20px 30px -20px rgba(5,5,5,0.24);overflow:hidden;line-height:1.7em}span.latest{background-color:#9175ff;color:#ffffff;display:block;padding:.5rem 1rem}span.latest:before{content:'NEW';margin-right:10px;background-color:#ffffff;color:#9175ff;padding:.2rem .5rem;border-radius:4px;font-weight:bold;display:inherit;align-items:center}span.latest{display:flex;max-height:25px;overflow:hidden}span.latest .roll{position:relative;width:calc(100% - 60px)}span.latest a{color:#fff;text-decoration:none;font-weight:normal;opacity:0;position:absolute;bottom:0;left:0;transform:translateY(-8px);transition:all 500ms ease;pointer-events:none;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}span.latest a.active{opacity:1;transform:translateY(0);pointer-events:auto}

6. Selanjutnya carilah kode </body> dan letakkan kode javascript ini tepat di atasnya.

   <script>/*<![CDATA[*/
   function displayLatestPosts(e){for(var t='<div class="roll">',l=0;l<e.feed.entry.length;l++){for(var r=e.feed.entry[l].title.$t,a="",n=0;n<e.feed.entry[l].link.length;n++)if("alternate"===e.feed.entry[l].link[n].rel){a=e.feed.entry[l].link[n].href;break}t+='<a href="'+a+'">'+r+"</a><br>"}t+="</div>",document.querySelector(".latest").innerHTML=t;const s=document.querySelectorAll(".latest .roll a");let i=-1,c=s.length;const d=()=>{s.forEach((e=>{e.classList.remove("active")}))};i=0,d(),s[i].classList.add("active");setInterval((()=>{i>=c-1?i=0:i+=1,d(),s[i].classList.add("active")}),5e3)}
   /*]]>*/</script>
   
   <script src="/feeds/posts/default?alt=json-in-script&max-results=10&callback=displayLatestPosts"></script>

   Kamu bisa mengubah berapa jumlah tampilan post pada news ticker dengan mengganti angka "10" pada max-results=10

7. Untuk menampilkan News Ticker, kamu perlu kode html di bawah ini. Silahkan letakkan kode ini di bawah </header> atau, bisa kamu letakkan di dalam widget html pada menu "Tata Letak".

   <div id="kaurka-ticker">
     <span class="latest">Loading...</span>
   </div>

8. Setelah semua step berhasil di terapkan, silahkan tekan Save template, dan lihatlah! blog kamu sudah tampil news ticker.

Pertanyaan

Apakah kode ini bisa untuk semua website?
Sebenarnya, kode ini bisa untuk semua website. Namun, pada bagian Javascript kamu harus merubahnya, apabila yang kamu gunakan bukan blogger.

Apakah kode ini berat dan dapat menurunkan performa blog?
Kode ini menggunakan HTML, CSS, dan Javascript Murni untuk mengambil feed blog kamu secara otomatis, sehingga tidak berat untuk blog. Untuk performa, ada kemungkinan akan tetap turun, walaupun cuma sedikit.

Referensi:
Mohamed Yousef