How to Add Footer Bottom News Ticker in Blogger

 

Hi to all, in this article I am going to tell you all about how to add footer bottom news ticker in blogger website easily in just few minutes by using HTML and CSS.

By adding this news ticker you can increase the visitor attraction and also you can add latest updates in your websites, for your website visitors.

Add the below provided codes in any websites and this will not effect your website page speed and SEO, so you can use this codes in any blogger website templates.

Read the below provided steps carefully and completely to get clear understanding about how to add footer bottom news ticker in blogger without any error or issues.

Steps to Add Footer Bottom News Ticker in Blogger

---

Step-1: First of all you all need to login to your blogger website dashboard by using your login credentials.

Step-2: Go to blogger dashboard -> Click on theme section -> Click on arrow icon -> Click on backup -> Click on download theme.

Step-3: Go to blogger dashboard -> Click on theme section -> Click on arrow icon -> Click on Edit HTML -> Blogger theme editor section.

Step-4: Now copy below provided HTML code and paste the copied HTML code below </footer> tag.

 
<div class='News-footer'>
 <div class='news'>
   <span id='news-head'><b>News</b></span>
   </div>
<p class='N-text'>
<marquee direction='left'>
 <a class='t-link' href='#'>• Coronavirus pandemic is going to get worse and worse and worse: WHO chieft</a>
 <span>• ‘Everyone is lying’: Trump undercuts public health officials in fresh attacks</span>
 <span>• Tesla’s Elon Musk Nears $2.4 Billion Haul as Stock Keeps Soaring</span>
 <span>• SpaceX test-fires rocket for South Korean military satellite launch this week</span>
  </marquee>
</p>
</div> 

Step-5: Now again copy below provided CSS code and paste the copied CSS code just below the above HTML code.

<style>
.News-footer{ position: fixed; bottom: 0 ; margin:0; width: 100%; background-color: blue; display: inline-flex; overflow: hidden; white-space: nowrap; z-index:99; } 
.N-text { padding-top: 10px; vertical-align: middle; font-size: 25px; color: yellow; margin: 0; width:100%; animation: marquee 10s linear infinite; display: inline-block; padding-right: 10px; } .news{ height:auto; background-color:red; padding: 13px 30px 10px 30px; font-size:20px; color: white; z-index:9; display: block; } 
.news:after { content:''; top:0; transform:translateX(100%); width:100%; height:220px; position: absolute; z-index:99; animation: slide 5s infinite; background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(128,186,232,0) 99%, rgba(125,185,232,0) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,0.8)), color-stop(99%,rgba(128,186,232,0)), color-stop(100%,rgba(125,185,232,0))); background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 50%,rgba(128,186,232,0) 99%,rgba(125,185,232,0) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 50%,rgba(128,186,232,0) 99%,rgba(125,185,232,0) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 50%,rgba(128,186,232,0) 99%,rgba(125,185,232,0) 100%); /* IE10+ */ background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 50%,rgba(128,186,232,0) 99%,rgba(125,185,232,0) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#007db9e8',GradientType=1 ); /* IE6-9 */ } #news-head:before{position: absolute; content: ''; top:19px;left: 9px; display: inline-block;height: 10px; width: 10px;background: #fff;animation:at-blink .4s infinite;} @keyframes at-blink{from{opacity:0}to{opacity:1}} @keyframes slide { 0% {transform:translateX(-100%);} 100% {transform:translateX(100%);} } .t-link{color:inherit!important;list-style:none;}
</style>

Step-6: After adding the two codes, modify your own content in HTML code.

Step-7: After modifying the HTML code, Click on save button.

Step-8: You have successfully added footer bottom news ticker in your blogger website.

Note

---

If you get any error while saving the code in blogger theme editor, then you need to restore your backup code again and need to repeat the same process as mentioned in above steps carefully.

If you want to change the style and colors of the news ticker, then you need to change the CSS code and for changing color you need to replace with color codes, and for color codes you can use google color picker.

Conclusion

---

I hope that you have understood about how to add footer bottom news ticker in blogger easily in just few minutes, by using HTML and CSS.