• How To Add Scrolling Text And Images In Blogger | 101Helper

    How To Add Scrolling Text And Images In Blogger

    101Helper blogging tricks

    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
    101Helper blogging tricks

    101Helper blogging tricks
    101Helper blogging tricks
    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


    comments

    No comments :

    Post a Comment