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
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