How to add Fixed Information Scroller on Blog Footer

The fixed information scroller are kind of most popular information, which displays post title scroller on the footer or latest information or random information that assigned to display at the bottom of the blog or website and it normally scrolls from the right side to the left-hand side. You also can add this function on your blog with the code that offered by Blog Supporter.

How to add Fixed Information Scroller on blogger

Live Demo

Step 1: Login you blogger account

Step 2: On dashboard just click "Template" >> "Edit HTML"

Step 3: Click anywhere in the html code area and then press Ctrl + F key or Command + F for (Mac) to search for ]]></b:skin> tag.

Step 4: Copy below CSS code and paste above it then click "Save Template" button

/*-----Fixed Information---------------------*/
#fixed-info {
background: rgba(222,237,242,.8);
position: fixed; left:0;
right:0;
bottom: 0; height: 30px;
z-index: 9999;
border-top: 1px solid #90D4DD;
}
#fixed-info span{
font: normal 14px "Hanuman";
float: left;
padding: 5px 10px 0; color: #fff;
background: rgba(255,0,0,.8);
height: inherit;
border-radius: 0 50px 50px 0;
} #fixed-info a { margin: 0 20px; font-size: 12px}
#fixed-info a:before { content: ‘+ '; }
#fixed-info marquee {
position:fixed;
left:110px;
right:10px;
bottom:3px;
z-index: 10000;
}

Step 5: Go to "Layout" and then add a new HTML/Javascript text box by click on Add a Gadget link then find out HTML/JavaScribe and click on [+]

Step 6: Now copy below code and paste in HTML/Javascript text area then click Save button. 

<div id="container">
<div id="fixed-info">
<span>Fixed Information</span>
<marquee style="white-space:nowrap;" scrollamount="5" onmouseover="this.setAttribute('scrollamount', 0, 0);" onmouseout="this.setAttribute('scrollamount',2, 0);">
<a href="Add URL Here">Add Title Here</a>
<a href="Add URL Here">Add Title Here</a>
<a href="Add URL Here">Add Title Here</a>
<a href="Add URL Here">Add Title Here</a>
<a href="Add URL Here">Add Title Here</a>
</marquee>
<div class="clr">
</div></div></div>

You have to add your URL instead of "Add URL Here" and You article title instead of " Add Title Here". The another thing, if you would like to get faster speed or lower just increase or decrease a number which highlight in yellow "5".