Monday, July 2, 2018

July 02, 2018

How to add scrolling images and text into blogger blog? marquee tag.

Hello friends,

Today we discuss about how to add scrolling images in blogger.Not only images text too.
May be you have identified some text or images that should move or scrolling across the define section of blog or web pages in a horizontal or vertical direction or bouncing across some area. Would you interest to know how is that happening or Are you looking for how to scrolling images and text in blogger blog or other web sites?  Yep, today we discuss about that.

If you are working with blogger blog, you know that there are limited features in blogger platform than other blogging platforms. But by using HTML codes we can solve that issue.


For scrolling images or text in the blog or web pages we can use ‘<marquee> tag’. That marquee tag used to move or scroll text and images across a section of a blog or web page in a horizontal or vertical direction or bouncing across some area. Before we discuss, you should know that, the ‘<marquee> tag’ is Obsolete and most of time should not be used because of unexpected results in using, limited support from the web browsers or by using the CSS or JavaScript we can create similar effects. But don’t worry still we can use that code to scrolling image or text without any issues. By using marquee tag you can do much more things rather than the scrolling images or text, Also you can create bouncing text/images, slide in images, slow and/or fast scrolling and much more. 

So let see how to scrolling images and text in blogger blog or other web sites by using marquee tag.
<marquee ……… </marquee>, that is the basic marquee tag code. By written more Attributes into that code we can customize our marquee tag as we wish.

Below are some attributes that help to do more customization of our marquee tag.

Behavior
Sets how the text or image is scrolled within the marquee. Most possible values are scroll, slide and alternate. If there are no value is specified, the default value is scroll.

bgcolor
Sets the background color through color name or hexadecimal value of the marquee.

direction
Sets the direction of the scrolling of image or text within the marquee. Possible values are left, right, up and down. If there are no value is specified, the default value is left.

width   
Sets the width in pixels or percentage value of the marquee.


height
Sets the height in pixels or percentage value of the marquee.

hspace
Sets the horizontal margin around the marquee.

loop
Sets the number of times the marquee will scroll. If there is no value is specified the default value is -1, which means the marquee will scroll continuously.

scrollamount
Sets how far to jump as it moves. That sets the amount of scrolling at each interval in pixels. If there are no value is specified, The default value is 6.

scrolldelay
Sets How long the marquee should wait before each jump? That sets the interval between each scroll movement in milliseconds. If there are no value is specified, the default value is 85.
          * Any value smaller than 60 is ignored and the value 60 is used instead, unless truespeed is specified.

truespeed
By default, scrolldelay values lower than 60 are ignored. If truespeed is present, those values are not ignored.

vspace
Sets the vertical margin in pixels or percentage value around the marquee.


below the example of customize marquee code.

<marquee direction="right" width="250" height="200" style="border:solid">Hi There! Your scrolling text here</marquee>
Below are some marquee tag codes with live demo.

Let see how to add scrolling images in blogger or how to add marquee tag into  blogger blog?

        1.   Log into your Blogger blog account -->> Go to Dashboard __>> new post  __>> click on HTML tab to open Html mode
                __>> copy paste your marquee code -->> Publish

                       or

      2.   Log into your Blogger blog account -->> Go to Dashboard __>> Layout __>> Add widget -->> HTML/Java Script
         __>> copy paste your marquee code  __>> Save



Scrolling Text

Scroll from left to right


<marquee direction="right" >Hi There! Your scrolling text here</marquee>
Hi There! Your scrolling text here

 

Scroll alternatively. With attribute behavior that bouncing back and forth.


<marquee behavior="alternate" >Hi There! Your scrolling text here</marquee>

Hi There! Your scrolling text here



Continuous scrolling.


<marquee behavior="scroll" direction="left" >Hi There! Your scrolling text here</marquee>

Hi There! Your scrolling text here

Scrolling upwords


<marquee direction="up" >Hi There! Your scrolling text here</marquee>

Hi There! Your scrolling text here


Scrolling dawnwords.


<marquee direction="down" width="250" height="200" style="border:solid">Hi There! Your scrolling text here</marquee>

Hi There! Your scrolling text here


Scrolling from the top down alternative that bouncing up and dawn.


<marquee direction="up" behavior="alternate" width="250" height="200" style="border:solid">Hi There! Your scrolling text here</marquee>

Hi There! Your scrolling text here


Bouncing text


<marquee direction="down" width="250" height="200" behavior="alternate" style="border:solid">
 <marquee behavior="alternate">
    Hi There! Your scrolling text will bounce
  </marquee>
</marquee>

Hi There! Your scrolling text will bounce


Change the Scrolling speed


<marquee behavior="scroll" direction="left" scrollamount="1">Hi There! Slow scroll speed text here</marquee>
<marquee behavior="scroll" direction="left" scrollamount="10">Hi There! Medium scroll speed text here</marquee>
<marquee behavior="scroll" direction="left" scrollamount="20">Hi There! Fast scroll speed text here</marquee>

Hi There! Slow scroll speed text here Hi There! Medium scroll speed text here Hi There! Fast scroll speed text here


On a Background


<font color="WHITE"><marquee direction="left" style="background:RED">TEXT</marquee></font>
<marquee style="border:RED 3px SOLID">TEXT</marquee>

TEXT TEXT



Scrolling images


Scrolling both images and Texts

<marquee>Your scrolling text here<img src="YOUR-IMAGE-URL-HERE" ></marquee>

Your scrolling text here 

Scrolling left

<marquee behavior="scroll" direction="left" >
<img src=" YOUR-IMAGE-URL-HERE "  >
</marquee>


<marquee direction="left">
<img src=" YOUR-IMAGE-URL-HERE "/>
<img src=" YOUR-IMAGE-URL-HERE "/>
</marquee>



Scrolling up

<marquee direction="up">
<img src=" YOUR-IMAGE-URL-HERE "/>
</marquee>





There are few number of marquee codes. You can customize that codes as you wish.
So. I think now you have a better understand about how to add scrolling images in blogger or other web sites by using marquee tag. You can use that code for images as well as texts.


For more reading THEWONDERSPOT

........................................................................................................................................................................................................................
EMoneySpot  -  Earn with us..........................................................................................>>>
........................................................................................................................................................................................................................

 How to earn money online.......................................................................................>>>

Improve organic SEO rankings while EARN MONEY (0.05/0.10$) per view.......>>>

How to take screenshots in windows 10 : Different Methods?................................>>>

Free Bandwidth Monitoring Tools For windows PC?.............................................>>>

Abnormally high internet bandwidth usage, c-0001.c-msedge.net of window 10....................>>> 

How to Speed up Internet connection on Windows 10..............................................................>>>

How to Disable Automatic Updates in Microsoft Office 2016?.................................................>>>

How to Disable Automatic Updates in Microsoft Office 2016?..................................................>>>

How to Block Windows 10 "Spying"? ........................................................................................>>>

How to start a Blog?.....................................................................................................................>>>

How to Choose the Best Blogging Platform, advantages & disadvantage.................................>>>

How to make your blog SEO friendly?........................................................................................>>>


All in one SEO pack for Blogger blog.........................................................................................>>>

Thank you for reading.
Good Luck.

Don’t forgot to Subscribe us to get latest news letters and give your feedback in below comment section ;-) ;-)

0 comments:

Post a Comment

Thank you for visit us.
Give your feedback. Don't worry. Your email is safe with us.
Subscribe us to get latest news letters.

amazon

 
Copyright © The WonderSpot All Right Reserved
Powered by Blogger