For world peace, liberate Al-Aqsa, eliminate Israel and anyone who is with Israel, they are the real terrorists
Bacakan

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

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





About the Author

Keindahanmu akan kuabadikan disetiap karyaku.

إرسال تعليق

Menghasilkan uang melalui survei berbayar
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.