Membuat widget news ticker di blogger

Hello sobat ICloudzer kali ini admin bakalan menjabarkan mengenai bagaimana caranya membuat news ticker di blogger

Info: Jika kamu sudah penasaran dengan pembahasan kita kali ini yuk langsung aja kita bahas bersama sama

Widget News Ticker

Apa itu news ticker? News ticker atau Widget news ticker adalah sebuah elemen atau komponen kecil yang biasanya di tempatkan di situs web atau aplikasi untuk menampilkan berita terbaru atau informasi terkini dalam format yang bergerak atau bergulir secara otomatis. Widget ini biasanya menampilkan judul berita atau informasi singkat dengan tautan yang dapat mengarahkan pengguna ke artikel lengkap atau sumber asli. Widget news ticker sering digunakan untuk memberikan informasi terbaru kepada pengunjung situs web dengan cara yang menarik dan mudah diperhatikan.

Contoh Tampilan

Baiklah sobat dari pada penasaran dengan tampilan dari news ticker di blogger tersebut, silahkan periksa menggunakan tombol di bawah ini okay

Periksa

Info: Widget news ticker ini bisa di kembangkan lagi tampilannya namun kamu harus memahami penggunaan kode CSS dan HTML nya okay

Cara pembuatan

Nah sekarang saatnya admin bakalan menjabarkan mengenai cara membuat widget news ticker di blogger, silahkan baca dan ikuti setiap arahan yang bakal admin jelaskan di bawah ini

Kode CSS

Langkah pertama yang bisa kamu lakukan adalah menyalin kode CSS di bawah ini kemudian taruh di atas kode ]]></b:skin> atau menggunakan tag kode <style>kodenya css disini</style> kemudian letakkan di atas kode </head>

#rahTicker{width:100%;height:auto;margin:0;display:flex;justify-content:flex-start;position:relative;border:1px solid;border-radius:10px;padding:10px}#rahTicker >*{margin:0 5px}.rahTicker-i svg{animation:indicator 3s 3s infinite}.rahTicker-t .roll{display:inline-flex;align-items:center}.rahTicker-t a{color:inherit;text-decoration:none;font-weight:normal;opacity:0;position:absolute;transform:translateY(-15px);transition:all 500ms ease;pointer-events:none;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.rahTicker-t a.active{opacity:1;transform:translateY(0);pointer-events:auto}.drK #rahTicker{background:#2d2d30}.drK .rahTicker-t a{color:#fffdfc}@media screen and (max-width: 640px){#rahTicker{width:calc(100% + 40px)!important;left:-20px!important;right:-20px!important}}

Kode Javascript

Langkah selanjutnya silahkan kamu salin kode javascript di bawah ini, kemudian taruh di bawah kode <body>, atau menempatkannya bersamaan dengan kode HTML juga bisa, berikut ini kode Javascript nya

<script>/*<![CDATA[*/
var lazytcr=!1;window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&!1===lazytcr||0!=document.body.scrollTop&&!1===lazytcr)&&(function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="/feeds/posts/default?alt=json-in-script&max-results=10&callback=displayLatestPosts";var t=document.getElementsByTagName("head")[0];t.parentNode.insertBefore(e,t)}(),lazytcr=!0)},!0);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>"}t+="</div>",document.querySelector('.rahTicker-t').innerHTML=t;const s=document.querySelectorAll('.rahTicker-t .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>

Kode HTML

Langkah terakhir, silahkan salin dan gunakan kode HTML di bawah ini kemudian taruh di mana kamu ingin menampilkan widget news ticker tersebut di dalam blog kamu

<div id="rahTicker">
<div class="rahTicker-i">
<svg viewBox='0 0 16 16'><path d='M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z' fill-rule='evenodd'/><path class='svgC' d='M4.285 9.567a.5.5 0 0 1 .683.183A3.498 3.498 0 0 0 8 11.5a3.498 3.498 0 0 0 3.032-1.75.5.5 0 1 1 .866.5A4.498 4.498 0 0 1 8 12.5a4.498 4.498 0 0 1-3.898-2.25.5.5 0 0 1 .183-.683z'/><path class='svgC' d='M7 6.5C7 7.328 6.552 8 6 8s-1-.672-1-1.5S5.448 5 6 5s1 .672 1 1.5zm4 0c0 .828-.448 1.5-1 1.5s-1-.672-1-1.5S9.448 5 10 5s1 .672 1 1.5z'/></svg>
</div>
<div class="rahTicker-t"></div>
</div>

Info: Jika bingung silahkan cari kode <data:post.body/> kemudian taruh kode HTML tersebut di atasnya

#Blogger

About the Author

Keindahanmu akan kuabadikan disetiap karyaku.

Laporkan Penyalahgunaan

Mengenai Saya

Label

Perbedaan AC Inverter dan Non Inverter Oleh Service AC Depok

Download Template Plus UI + mode Translate v3

Membuat sitemap via html di blogger

ICloudice.com

Auto Theme Changer

Auto Themer