How To Add Scrolling Text And Images In Blogger

You might have seen flowing text in some websites such ad on news website there are headlines flowing from right to left or may be you have used a recent post widget in which text are bind with links of latest posts and when the flowing text in hovered by mouse it stops and let visitors to reach latest posts.
Similarly you might have seen scrolling welcome messages on some site in this pst you will learn how do they do it. This happens with HTML Marquees which produces scrolling and sliding effects in text. In this post you will learn how to add flowing text or flowing images in blog.

Demo

101Helper tips, tricks, gadgets, widgets and tutorials for blogger




Scrolling Directions:

To control scrolling direction type left,right, up or down for respective direction.

direction="left"  ---> For left
direction="right" ---> For right
direction="up"    ---> For up
direction="down"  ---> For down

How to add flowing/scrolling text or images in blogger?

It is very simple to make your text or image flow. You have to add a small piece of code to make 
text or image flow or scroll. Follow below steps to add this effect to your text or images:

(1). Go to blogger Dashboard.

(2). If you wish to add flowing text as a gadget such as a welcome message then go to layout and 
follow step 3 but if you want to add flowing text or image in your post then go to that post select 
HTML tab on top-left of the editing page and follow step 3.

(3). Copy the below code and customize it as you want.

   For text copy below code:  

1. <!-- Codes by 101Helper.blogspot.com -->
2. <span style="font-family: Verdana, sans-serif;"><marquee behavior="scroll" direction="left">101Helper tips, tricks, gadgets, widgets and tutorials for blogger</marquee>

 For images copy below code: 

1. <!-- Codes by 101Helper.blogspot.com -->
2. <marquee behavior="scroll" direction="left"><img src="http://www.html.am/images/html-codes/marquees/fish-swimming.gif" width="94" height="88" alt="Swimming fish" /></marquee>

(4). If you are using text code the replace 101Helper, tips, tricks, gadgets, widgets and tutorials with your message and if you are using image code then replace swimming fish image link with your image link.

(5). Save the post or gadget and you are done!

If you wish to paste a link in the text then before your message write <a href='your link'> and after that close it by </a> as shown in below:

1. <!-- Codes by 101Helper.blogspot.com -->
2. <span style="font-family: Verdana, sans-serif;"><marquee behavior="scroll" direction="left"><a href='http://101helper.blogspot.com'>101Helper tips,tricks,gadgets,widgets and tutorials for blogger</a></marquee>

You can ads inside the marquee too, ads will start scrolling when the page is loaded. Use below code to add scrolling ads in your blog.

1. <!-- Codes by 101Helper.blogspot.com -->
2. <span style="font-family: Verdana, sans-serif;"><marquee behavior="scroll" direction="left">YOUR AD CODE HERE</marquee>

I hope this post was helpful and easy if you have any problem or suggestion leave your comment, follow and subscribe for new blogging tricks.

Search Tags: flowing text images,scrolling images, scrolling text, html scrolling images and text, scrolling ads, content, scroll up,down,left,right,marquee html