How to Create a Scrolling Text on Blogger with Scrolling Marquee?

Filed Under : , ,

Hi bloggy readers,
In creating an attractive look for our blog, there are lots of things we can do. Such as:

  1. adding a drop shadow effect on every picture we’ve posted in our posts,
  2. making a rounded rectangle effect on the corners of the sidebar and many more.
But did you know that, there is one more attractive effect that we can also put in our blog, and that is called scrolling marquee.

By using this scrolling marquee, we will be able to make a moving or scrolling effect on the texts that have been set. You can make one of your text or even all of them to move around whether from the left to the right side, right to the left, or even make it bounce like a ping pong. So if you are interested to create a moving effect with scrolling marquee to one of your chosen text, here you go:

1. Log in to Blogger
Now Sign in to your Blogger account using your own username along with the password

2. Go to Layout/Design
In the Dashboard page, go to the Layout/Design of the blog you are reffering to

3. Go to Page Element tab
In the Layout/Design page, there are 3 tabs regarding the configuration of your blog interface. Now click at the sub-tab called "Page Element" to begin adding a scrolling marquee effect on your blog.

4. Add a Gadget in every place do you prefer
In this tutorial, i assume that you want to make a moving text on your blog by using this scrolling marquee effect. In Page Element, now pick any place in your blog layout and click "Add a Gadget". After that, choose "HTML/JavaScript" in the option given to you.

5. Choosing what Marquee Effect do you prefer

These are the choices you can pick regarding the style of scrolling marquee you want to apply on the texts.

Scrolling Marquee: From right to left position over and over again

Now you are ready to choose what type of scrolling marquee effect you want to apply on your texts. For example, i want to create a text that will move from the right to the left position. Look at the sentence "What Makes Blog become the greatest way to share our thoughts to the world?" below!

What Makes Blog become the greatest way to share our thoughts to the world?"


As you can see at the sentence "What Makes Blog become.... bla..bla.. bla" above, the text is moving from the right to the left position over and over again. If you are interested with this scrolling marquee effect, now copy the code below and then paste it in the HTML box.
<marquee align="center" direction="left" height="200" scrollamount="2" width="100%">

What Makes Blog become the greatest way to share our thoughts to the world?

</marquee>

Scrolling Marquee: Back and Forth or Bouncing Text Effect


If you like your chosen texts to appear as a back and forth moving text, this scrolling marquee effect might suit you well. Look at example below!

Back and Forth Text Effect


Interested to apply this back and forth scrolling marquee effect on your chosen text? You can simply change the text "Back and Forth Text Effect" inside the scrolling marquee code below and then paste it in the HTML box.
:<marquee scrollamount="4" align="center" direction="left" height="30px" width="100%" behavior="alternate">

Back and Forth Text Effect

</marquee>

Scrolling Marquee: Move and Stop Effect when being pointed by mouse cursor

By using this Move and Stop text effect, your current text will stop moving when your mouse cursor is pointing at the text area. Look at example below and then move your mouse cursor inside the text area.

As you can see in the example above, when the mouse cursor is moved inside the text area, suddenly your current text will stop moving and start moving again if your mouse cursor is moved to other area. If you like this kind of scrolling marquee effect, you can simply copy the code below and change the current text "Element" with another sentence.
<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" align="center" width="100%" height="100px">

Element
Element
Element
 
</marquee>
Okay, i think that's it for now guys. By adding this scrolling marquee effect to your blog, will make your blog more attractive than using a normal and static text.

Okey then, if you have a question regarding this topic, just type your question on the comment section and let me help you with that. And if you feel this article has helped you create a scrolling marquee element/text, feel free to share this article to your Facebook and Twitter friends or family.

I'm Out...

Filed Under : , ,
You might also like to read :
Share This Article to Other People Across the World !
Thanks!
Get the fresh updates from Whatmakesblog.com!
To get updates from this blog, just enter your email address in the below subscription form and then click Subscribe.
Your email address will not be shared to any third party
Delivered by FeedBurner
edit post

6 comments:

Mohd Nazlie said...

i try to use move and stop effect. I have multiple option. The problem is how to create NEW ROW for every single new option.

Mohd Nazlie said...

Awaiting for your Reply. Thanks

Daniel Likin said...

TO Mohd Nazlie,

I am truly sorry for taking so long time to get your question replied. Anyway, to create a new row for the Move and Stop Marquee Effect, here i show you how. On the "Element" word, you can begin adding the link codes. For example, see the example below.

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" align="center" width="100%" height="100px">
<a href="http://www.whatmakesblog.com/">Link1</a>
<a href="http://www.whatmakesblog.com/">Link2</a>
<a href="http://www.whatmakesblog.com/">Link3</a>
<a href="http://www.whatmakesblog.com/">Link4</a>
<a href="http://www.whatmakesblog.com/">Link5</a>
<a href="http://www.whatmakesblog.com/">Link6</a>
</marquee>

As you can see above, The link addresses www.whatmakesblog.com must be modified with your own preferences. Anyway, to add a new link, you can simply copy and paste the code

<a href="http://www.whatmakesblog.com/">Link6</a>

At the end of previous link code or before the code </marquee>.

Thanks for your question.

PRASANTH said...

HEY IT TAKES MORE SPOCE FOR WIDGET HOW TO COMPRESS IT PLS TELl funzone.15@gmail.com

www.rfileszone.tk

MrQatarOn said...

Thanks for all.....
Excellent job :)



http://mrqatarin.blogspot.com/

KUMAWAT SHRIKANT said...

Thanks

Post a Comment

Copyright © 2013 Whatmakesblog.com All Rights Reserved. Reproduction in whole or in part or in any form or medium without written permission is prohibited.
Web Theme Designed by Daniel Likin
Disclaimer | Privacy Policy | Contact Us Google Analytics Alternative