Stylish Scrolling Breaking News Ticker

Breaking News Ticker what happens

दFriends, you must have seen this ticker on many news websites. Which is a line running in the blog in which you want to give any text or some important information to your visitors or if your blog is on a news niche then you can put this ticker.

If you put this news ticker on your website or blog, it will make your blog look very good. By which all the visitors who come to the blog stay on the blog so that the article gets indexed in Google very quickly.

How to apply breaking news ticker in blog?

Breaking news ticker It is very easy to install, the news ticker looks very stylish and attractive than the code I am going to give you. So let's first know how to use this ticker in the blog:-

Add CSS code to the blog

First, login to your blog on your blogger website and then log in to it Theme go on and arrow By clicking on edit html Click on

Blogger Dashboard>>Theme>>edit html

Now the coding of the blog will be opened then by pressing control+F </b:skin> Search the code and the code given below </b:skin> Paste above.

 
.news-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    font-family: "Roboto", sans-serif;
    box-shadow: 0 4px 8px -4px rgba(0, 0, 0, 0.3);
}

.news-container .title {
    position: absolute;
    background: #df2020;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 24px;
    color: white;
    font-weight: bold;
    z-index: 200;
}

.news-container ul {
    display: flex;
    list-style: none;
    margin: 0;
    animation: scroll 25s infinite linear;
}

.news-container ul li {
    white-space: nowrap;
    padding: 10px 24px;
    color: #494949;
    position: relative;
}

.news-container ul li::after {
    content:"";
    width: 1px;
    height: 100%;
    background: #b8b8b8;
    position: absolute;
    top: 0;
    right: 0;
}

.news-container ul li:last-child::after {
    display: none;
}

@keyframes scroll {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(-1083px);

    }
}

But friends, remember that whenever you edit the coding of your blogger theme, make sure that you have backed it up once.

Now you copy the code given below </head> Paste above the code.

<meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">

Paste the HTML code into the blog

Now you simply enter the code below </body> above the code copy by doing paste Do more save theme By clicking on theme to save Please do it.

 
<div class="news-container">
        <div class="title">
            Breaking News
        </div>

        <ul>
            <li>
                Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam!
            </li>
            
            <li>
                Lorem ipsum dolor sit
            </li>

            <li>
                Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam!
            </li>
        </ul>
    </div>

Make some changes in the code

You can edit this last html code as you like. Instead of whatever lines are given in it, write what you want to show to the visitors. By editing in this way, you can put very beautiful breaking news ticker in your blog.

Final summary

So friends, we hope your blogger blog has been successful by seeing stylish and beautiful scrolling breaking news. If you face any problem in coding then please let us know by commenting and we will definitely reply your comment.

Source by: Aveestb.xyz

Getting Info...

About the Author

He wants to become a bird and fly in the sky. Although there is will power, there is a beautiful mind without wings

Sohel Taj Bhola