How to Create a News ticker for blogger website?

Welcome to Bytes Vibe Blogger Tutorial series. In this video we will learn how we can create a News ticker for blogger website. A news ticker is an effective way to highlight the latest posts on our blog. If we add a news ticker to our Blogger site than this can help us to draw attention to our latest content and keep our visitors informed with real time updates.

In this article, we’ll learn how to create a responsive news ticker for Blogger site by using simple HTML, CSS, and JavaScript. This ticker will be Breaking news scrolling headlines Blogger.

By the way, this tutorial was requested from Telegram. If you also have any requests than you can request them through telegram group chat.

How to Add a News Ticker to Blogger Site?

News tickers are a popular feature on many websites. Especially news website, blogs and e commerce sites. Here is how we can add a news ticker on blogger site:

Step 1: Add the HTML Structure

First, we will need to create a container for Blogger widget HTML code for our news ticker.

Log in to Blogger site and Go to theme section.
Click on Edit Html and search for </header>.
Paste the following codes below </header> tag:

<div id="bytesvibe-ticker">
    <span class="latest">Loading...</span>
</div>Code language: HTML, XML (xml)

Now save all the changes in blogger theme that we did to create news sticker.

Step 2: Style the Ticker with CSS

Next, we will need to style the ticker to make it look stylish and responsive.

Again go to theme section and select edit html.
Copy and paste the following css codes above ]]></b:skin> to make news ticker stylish:

#bytesvibe-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;
}Code language: CSS (css)

Step 3: Add the JavaScript for Dynamic Content

Now, let’s make the news ticker dynamic by automatically fetching the latest posts from Blogger feed and updating the content in real time. Add the following JavaScript code right before the closing </body> tag in Blogger template.

<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&amp;max-results=10&amp;callback=displayLatestPosts"></script>
Code language: HTML, XML (xml)

Customize: You can change the number of posts displayed on the news ticker by changing the number “10” in max-results=10.

So this was Breaking news HTML code for Blogger. After we are done with adding the HTML, CSS, and JavaScript to our Blogger template to create a beautiful news ticker, we need to save our changes in theme.

If you want to tweak the appearance of this blogger news ticker than feel free to adjust the CSS. You can change the colors, fonts, or even the speed of the post rotation to fit your blogger style.

Conclusion

News ticker in blogger enhances the user interaction to our site. By using some HTML, CSS, and JavaScript we can make this nice looking news ticker which will automatically update with our latest content.

This not only improves the user experience of our blogger site, but also gives the users a better option of surfing more of our content. Which help us to get more and more Traffic On Website and engagement of user.

Anyway if you need help with anything comment them down below!