Scrolling Text - Marquee HTML Code

This HTML term Marquee is used to create a scrolling or sliding text. The text can move across the screen horizontally or vertically at a certain speed determined by you. Note, however, that while it looks nice to have scrolling announcements, advertisements, quotations, or links, having too much animation in your Blog may distract and irritate your readers. We had earlier created a line of scrolling text in the Header of our Quotes Blog to let you have an idea what you can do for your Blog.

For this tutorial, we begin with a short explanation of what the attributes do before giving you examples of how these attributes can be applied.

Marquee Attributes

behavior="scroll" behavior="alternate" behavior="slide"

This defines how the text will move. The default is Scroll. If the behavior is not specified, the text scrolls by moving from one end to another. Where the behavior is Alternate, the text will move back and forth. The Slide seems to have the same effect as Scroll in Firefox browser. In Internet Explorer, the text under Slide may move to one end and stop.

direction="left" direction="right" direction="up" direction="down"

The default is "left", meaning that if no direction is specified, the text will move from right to left.

loop="3"

This sets the number of times the marquee will scroll. For example, in Internet Explorer, if the number is 3, the text will scroll 3 times and stop. This command might be ignored by Firefox and the text continues to scroll. For both browsers, if no value is specified or if this attribute is omitted, the marquee will scroll or loop continuously.

scrollamount="1"

This is the amount of scrolling (in pixels). If the number is 1, the text moves by 1 pixel each time and therefore scrolls at a slow pace. If this attribute is not stated, the default value is 6. The higher the number, the faster the text scrolls.

scrolldelay="100"

This is used to set the interval between each scroll movement in milliseconds. The default value is 85. Here, the higher the value, the slower the text scrolls. A value that is smaller than 60 would be ignored and replaced by the value 60. In Internet Explorer, if you really want the text to zoom at lightning speed, you can set a small delay like 20 and specify the truespeed attribute as true (see below).

truespeed="true" truespeed="false"

This tells the browser whether or not to stick to the scrolldelay values lower than 60 that you have set. The default value is false and the browser will ignore values less than 60. Set it as true if you want the browser to adhere to the low scrolldelay value and have the text scroll very fast.

bgcolor="#XXXXXX"

Should you want a background color for the scrolling text, you can specify the color code into #XXXXXX. You may refer to the HTML Color Code Chart for the color codes.

height="50px" height="80%"

You can specify the height of the marquee box in pixels or percentage value. The default value is the height of the contained text.

width="200px" width="80%"

Similarly, you can set the width of the marquee box in pixels or percentage value. The default width is the width of the frame that the marquee appears in.

vspace="20px" vspace="80%"

In Internet Explorer, you can set the top and bottom margins outside the scrolling text by stating a vspace (vertical space) margin in pixels or percentage value.

hspace="20px" hspace="80%"

You can also set the left and right margins outside the scrolling text by stating a hspace (horizontal space) margin either in pixels or percentage value.

Where to place the marquee code

You can place the scrolling text either in your Header, Footer, Sidebar, or blog post.

To have it above or below the Header or Blog Posts, see that you are able to Add Page Element in the Header and Post Body.

Go to Template -> Page Elements -> Add a Page Element, select HTML/JavaScript to add the marquee code.

If you want the text to be in your Posts, just like what you see in this post, see that you are in the “Edit HTML” mode and not “Compose” mode when you add the marquee code.

Marquee HTML Code

The basic code to add is this:-

Example 1

<marquee bgcolor="#ffffcc">Text scrolls from right to left by default.</marquee>

Text scrolls from right to left by default.

Notice that by default, the text scrolls from right to left, and it loops continuously. You can of course change the background color by specifying the Hexadecimal color code under bgcolor.

Further Examples of the Marquee code, applying the attributes discussed above:-

Example 2

<marquee behavior="alternate" width="80%" bgcolor="#ffffcc">Bouncing text using the alternate behavior.</marquee>

Bouncing text using the alternate behavior.

Here, the text bounces from one side to the other and the width of the text box has been reduced to 80%.

Example 3

<marquee scrolldelay="150" direction="up" width="300px" height="100px" bgcolor="#ffffcc">Text scrolls upwards. For the text to appear in the next line, add this tag <p></p> after the previous line.</marquee>

Text scrolls upwards.

For the text to appear in the next line, add this tag <p></p> after the previous line.

The scrolldelay has been set at 150. Increase this value if you want a slower speed.

Example 4

<marquee hspace="50%" direction="down" scrollamount="2" height="100px" bgcolor="#ffffcc">Text scrolls downwards. For the text to appear in the next line, add this tag <p></p> after the previous line.</marquee>

Text scrolls downwards.

For the text to appear in the next line, add this tag <p></p> after the previous line.

In this example, we use scrollamount to control the speed. The higher the value, the faster the speed. In Internet Explorer, you will see the left and right margins set under hspace.

Change Font style and Color of text

Notice in the above examples that the text is black. If you want a different color or style for your text, you can set the style of the text before the marquee code. Here are some examples:-

Example 5

<span style="color:#F6358A; font-size:130%; font-style:italic; font-weight:bold;"><marquee direction="right" scrollamount="3" bgcolor="#ffffcc">Text scrolls from left to right.</marquee></span>

Text scrolls from left to right.

What we have done here is to specify a color for the text. You can look up the Color Code Chart for more colors. The font-size is bigger, and the font is in bold and italics.

Example 6

<span style="color:#6AFB92; font-size:xx-large; font-family:fantasy; font-weight:bold;"><marquee direction="right" scrollamount="3" bgcolor="#333333">Text scrolls from left to right.</marquee></span>

Text scrolls from left to right.

You can set the font-family for the text. It can be a generic font like cursive, serif, monospace, fantasy and so on. It can also be a specific font family like times, arial, courier, verdana, etc. You can state the font-size as xx-small, x-small, small, smaller, xx-large, x-large, large, larger, or a percentage value

Add Video Clip to Blog

Update: Blogger released a new Add Video feature which allows you to upload videos into your Blog posts. Should you want to know more about it, or resize or align the video, or put it into the sidebar, you may follow our guide in Customize Video Upload in Blogger.

This is a step-by-step guide on how to add a video or movie clip to your Blog or webpage. There are many sites that offer free video hosting. Most of them automatically generate the relevant HTML code for you to easily insert/embed into your web template or blog post. I shall start with two of the most popular providers – Google Video and YouTube.

Google Video

Create an account with Google Video using your Gmail account. After the formalities, you will see a Video Status page. Click "Upload Video."



If your file is less than 100MB, which is probably the case, use the Web-based uploader.



Insert the video title, description, genre, and language. Under “Access”, you can either choose to have the video made public or unlisted.



The “unlisted” function is rather useful. A public video is listed in the Google Video search directory, and anyone can view it. However, you may have a video which you would rather not share with everyone except your blog readers. If you had created a private blog accessible only by your family and friends, you would all the more want to unlist your video.

In case you are wondering, an “unlisted” video enjoys the same features of a public video. It can be embedded in web pages, emailed, or linked to from other public sites.



After you have uploaded your video, you will see a link that reads “Embed this video on your website or blog.” Click on that and copy (Ctrl-C) this code to paste into your post. Your code should look something like this.

<embed style="width:400px; height:326px;" id="VideoPlayback" align="middle" type="application/x-shockwave-flash" src="http://video.google.com/googleplayer.swf? docId=-6608265653837650172&hl=en" quality="best" bgcolor="#ffffff" scale="noScale" salign="TL" FlashVars="playerMode=embedded"> </embed>

If you would like, you can change the width and the height of the video screen so as to have it fit neatly into your page. I have created an account and uploaded a sample video just to let you see how it will look on your site. The video screen you see below has a width of 300px and height of 245px.



YouTube

You would have heard of this popular video-sharing platform. Although Google has now acquired YouTube, it does not appear to be the end of Google Video. If you do not have an account at YouTube, sign up for a free account. For first-time users, you would need to confirm your email by following the instructions that YouTube sends to your email account. After confirmation, you will be able to upload your videos.



In YouTube, you assign tags to your video to enable it to be easily found by viewers through their search function. At the second step, select “public” viewing.



When you are at the screen shown below, you will see towards the bottom an option for you to “allow external sites to embed and play the video.” Check that box. Copy (Ctrl-C) the generated HTML code and insert it into your post.



Should you want your video to be a permanent feature of your site layout, you can create a video widget. For instance, if you would like to have a video in your sidebar, login to your Dashboard, go to Template-> Page Elements. Add a “Page Element” and select “HTML/JavaScript”. Paste the generated HTML code and save. (Note: Whenever you create any new page element, it will always appear at the top of all the other elements. If you want it near the bottom, simply drag and drop it to the desired location.)

Your HTML code will look like this.

<object width="425" height="350"> <param name="movie" value="http://www.youtube.com/ v/QjA5faZF1A8"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/QjA5faZF1A8" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"></embed></object>

Again, you can change the width and the height of the video screen if you'd like. For the purpose of this guide, I have used one of my favorite YouTube videos, a hugely popular clip of an electric guitar version of Pachelbel's Canon in D. The video screen has been reduced to a width of 300px and height of 245px.



Other video host sites

The other video hosts you might want to check out are:-

1. Yahoo Videos which is increasingly popular. Its interface resembles Google Video and you should find it easy to use.

2. Live Video, a new YouTube clone but with innovative features such as Digg-like voting by its users, customizable profile pages, and backgrounds to go with your videos.

3. Grouper which incorporates a desktop software for you to edit your videos before uploading them to the site.

4. Metacafe, iFilm, Motionbox, and Dailymotion are also popular video hosts which you can consider using.

If you need more information, enter search words like “free video share” to look at what these or other sites have to offer

Add Digg button to Blogger or Blogspot

Automatic Count and Vote Button

This is a step-by-step guide to automatically place a real-time Digg count and vote button to every single blog post. Digg is a social content website where your readers or you can submit content to. If you have a good story, members will 'digg' the post and write comments. As a blog owner, you may want to make it easy for and encourage your readers to submit and digg your articles.

Before you do that though, you would want to take note of the following:-

1. Your blog should be set to save Post Pages. Post Pages are archived blog posts published to their own web page. Each post will have a unique URL, which is required by Digg for the individual posts to be submitted. To verify or enable it, login to your Blogger Dashboard. Under Settings-> Archiving, set the “Enable Post Pages?” to “Yes” and save the settings.

2. This template hack will put a Digg button to every post. You are therefore not able to choose which post you want to include or exclude a button. If you would prefer to have a Digg button added only to some posts, read the later part of this article on “Button for selective posts.”

3. The code reads the URL of the individual blog page and this shall be the URL used for submission of the story to Digg.

Under “Template”, click the “Edit HTML” tab. Block copy the entire HTML code for your site and save it in a text file. This is one of the two necessary steps whenever you want to change the template. The second step is of course to “Preview” the new changes, and save the changes only when you are satisfied. The backup you have saved in a text file will come in handy when you accidentally click to save the changes without previewing them. With a backup, you can easily restore the template to the prior state if need be.



Click the box next to “Expand Widget Templates”. Scroll about two-thirds down the template to look for the code that reads:-

<p><data:post.body/></p>

If you want the button to show at the top right corner of your post, replace the above code with this.

<div style='float:left; margin-left:10px;'> <script type='text/javascript'> digg_url=&quot;<data:post.url/>&quot;; </script> <script src='http://digg.com/tools/diggthis.js' type='text/javascript'/> </div> <p><data:post.body/></p>

This is what you get:-



If you would like the button to appear at the end of your post, replace with this following code instead.

<p><data:post.body/></p> <div style='float:right; margin-left:10px;'> <script type='text/javascript'> digg_url=&quot;<data:post.url/>&quot;; </script> <script src='http://digg.com/tools/diggthis.js' type='text/javascript'/> </div>

The result will be this:-



If you want to have the button at the top left corner of your post, change the alignment.

<div style='float:left; margin-right:10px;'> <script type='text/javascript'> digg_url=&quot;<data:post.url/>&quot;; </script> <script src='http://digg.com/tools/diggthis.js' type='text/javascript'/> </div> <p><data:post.body/></p>

The outcome is this:-



Digg has another compact button. If you insert this code:-

<div style='float:right; margin-left:10px;'> <script type='text/javascript'> digg_url=&quot;<data:post.url/>&quot;; digg_skin=&quot;compact&quot;; </script> <script src='http://digg.com/tools/diggthis.js' type='text/javascript'/> </div> <p><data:post.body/></p>

You will see a compact Digg count button like this:-



You can also change the background color of the button to blend with your site. For example, a code like this:-

<div style='float:right; margin-left:10px;'> <script type='text/javascript'> digg_url=&quot;<data:post.url/>&quot;; digg_bgcolor=&quot;#BDEDFF&quot;; digg_skin=&quot;compact&quot;; </script> <script src='http://digg.com/tools/diggthis.js' type='text/javascript'/> </div> <p><data:post.body/></p>

will give you this:-



You can insert the color code of your choice into the red portion. For a list of color values to insert, you may refer to the Hexadecimal HTML color code list.

Automatic Count Button in Blog Footer

[Update] This segment is added in response to user's request to have the Digg button in the Blog footer, i.e., after the labels. If you scroll through your template, you will see this chunk of code which gives the labels in your Blog footer.

<p class='post-footer-line post-footer-line-2'> <span class='post-labels'> <b:if cond='data:post.labels'> <data:postLabelsLabel/> <b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if> </b:loop> </b:if> </span> </p>

If you want a Digg button to appear just after the labels, add the appropriate Digg button code right after the above code. For example, if you want the compact Digg button, add this code below the labels code:-

<div style='float:right; margin-left:10px;'> <script type='text/javascript'> digg_url=&quot;<data:post.url/>&quot;; digg_skin=&quot;compact&quot;; </script> <script src='http://digg.com/tools/diggthis.js' type='text/javascript'/> </div>

The resulting layout is this:-



Move the Digg button code above the labels if you'd like. Experiment a little. Just remember to preview the template and not to save it unless you are satisfied.

Digg Button in Blog Footer

If you do not want to see an Automatic Count button, you can also place a link button into the template. This button will appear at the bottom right corner of every post and readers can click it to submit that post to Digg.

Scroll to this part of the template and insert the lines (in red):-

<div class='post-body'> <p><data:post.body/></p> <div style='clear: both;'/> <!-- clear for photos floats --> </div> <div style="float:right; margin-left:10px;"> <a expr:href='"http://digg.com/submit?phase=2&amp;url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img border="0" alt="Digg this" src="http://digg.com/img/badges/91x17-digg-button.gif"/></a></div>

With the code, this is what you will see at the end of every post.



You can change the position of this button. Go through what we discussed earlier in this article to understand where to place the code if you should want the button to be at the top of the article.

The button 91x17-digg-button.gif is simply an example. As the following section explains, there are many buttons you can use. To change the button to another design, replace the image URL with that of the new button.

Button for selective posts

The methods of manually adding a Digg button to selective posts are rather tedious and complicated. The problem is that Blogger does not allow you to simply insert a JavaScript into a blog post. Since this blog is targeted at the majority of us who are not computer experts, I shall suggest a method that I think is simple enough for us.

First, go to the Digg tools site to select a Digg button that you like. You will see a wide selection of Digg buttons.







Take note of the image URL. For example, the image URL of this button is

http://digg.com/img/badges/91x17-digg-button.gif

Write a post and publish it. Next, refresh the page and click on the title of your post. This will bring you to the post page. Take note of the new URL of your story. Insert it into the orange portion of this HTML code. If you want a different image, insert the image URL into the blue portion of the code.

<a href="http://digg.com/submit?phase=2&url=URLofyourstory" target="_blank"><img border="0" alt="Digg my article" src="http://digg.com/img/badges/91x17-digg-button.gif"/></a>

Now, go back to your article and Edit it. Choose the “Edit HTML” mode and not “Compose” mode. Copy the above code and paste it into whichever part of your blog article. “Preview” it, and if you are happy with it, “Publish” it.

Add Music to Blogspot blog

This article is updated to address the difference in the way the code is interpreted by the different browsers, namely Internet Explorer and Mozilla Firefox. We have also included a sample music file which you can use to test the effects of adding the sound file to your Blog.

“Music, the greatest good that mortals know,
And all of heaven we have below.” ... Joseph Addison

Depending on the subject matter of your blog, having music played in the background may either enhance the pleasure of reading or annoy your visitor. Imagine the agony of surfing the web in discreet, only to catch the attention of your office colleagues or parents when the music automatically blasts off in the background. Not to mention, a big music file may cause a slower page download. Nevertheless, the solution, as shall be explained later, is simple - have an option for the reader to play or stop the music.

To begin, you will need to have a music file uploaded onto a server. You can read about using free hosts like Google Page Creator and Google Groups. We have also a rather comprehensive list of free Image Hosts and File Hosting Services in our article on Manage Blogger Image Storage Space. Check out those sites and choose one that is fast, reliable and enables hotlinking to the uploaded files. Upon uploading, note down the URL of the file.

Alternatively, there are several sites that offer free download of their music files. You can enter search words like “free music download” or search for a popular artist name in the Google search box. Most of the sites that offer free download will lead you to the file location stored in their servers. Copy the URL of the music file that you have chosen.

Enter your search termsSubmit search form

If you would like to hear how the music works on your Blog, you can also use this music file which we have uploaded onto Google Pages - http://ownlblog.googlepages.com/BalladePourAdeline.mid - whenever you are prompted to enter the “URL of music file”. This file is for testing purposes only. Please do not link permanently to this file as it may be changed or deleted in due course.

Next, you would have to decide how you want the music to be played.

Link for reader to click

This is a text link. Your visitor can click the link if he wants to hear the music.

<a href="URL of music file">Click to hear music file</a>

Remember to enter the URL of music file into the above code. This code can be inserted into your Blog post. If you want to put it in your sidebar, you can go to Template -> Page Elements -> Add a Page Element, select HTML/JavaScript and insert the code. Whatever words you type into the “Click to hear music file” will appear as the text link.

Music with a console

A music player console with controls of the volume, on and off buttons, would give your visitors a choice on how he wants the music played. With the code stated below, the music will not play unless the visitor clicks the play button.

You can either insert the music console into your Blog post or your sidebar. If you want it in the sidebar, go to Template -> Page Elements -> Add a Page Element, select HTML/JavaScript.

The code to insert is this:-

<embed autostart="false" height="40" loop="true" playcount="2" src="URL of music file" width="300"/></embed>

For instance, using the following code:-

<embed autostart="false" height="40" loop="true" src="http://ownlblog.googlepages.com/BalladePourAdeline.mid" width="300"/></embed>

this is what you see:-



It will look different in IE and Firefox, depending on the installed plugins.

Note the following attributes and how they work on different browsers:-

1. Insert your URL of music file into the code.

2. The width of the example you see above is "300". If you want it to be embedded neatly into your sidebar, the width should not be greater than the sidebar width. For example, if your sidebar width is 150px, the width of your console should be about 140px.

3. The height would depend on your preference and space constraints.

4. The autostart attribute has two options. If you choose "true", the music will automatically play when your page is loaded. As I have mentioned earlier, this is not a good option unless you are absolutely sure all your visitors would not mind the music. The better option is to state it as "false". If the visitor wishes to hear the music, he can click the play button to start the music.

Note, however, that while it works fine in Internet Explorer, it may not be so in Mozilla Firefox. The default setting for IE is "false" which means the music will not play automatically. The default setting for Firefox is "true", and when we experimented with .wma and .wav files, they automatically played even when we set the autostart to "false". If you are working on the Mac, the default setting for both browsers is "false".

5. The loop attribute indicates whether the music should stop once that particular tune ends. The common attributes are "false" or "true". If the attribute is "false", the music ends after it is played once. If it is "true", the music will automatically loop and continue playing until the visitor clicks the stop button or leaves your site. For short music pieces, you may want it to repeat and choose "true".

For certain versions of Netscape browsers, another attribute that might work is loop="n" where n is a number. If n is 2 for example, the music will play twice and stop. The similar attribute in Internet Explorer is playcount.

6. You can specify the number of times the music is to be played. In the above example, where playcount="2", the same piece of music is played twice before it stops. If you want the music to be played once, you can delete playcount altogether. Note that this only works in Internet Explorer.

Background music to play automatically

For the music to play the moment your page is loaded, the code will have to appear in the HTML document of your site. Note that in so doing, there are no controls for the visitor to choose whether or not to listen to the music, nor options to turn it off. Login to your Dashboard and under “Template”, click “Edit HTML”. Somewhere near the top, after the word <Head>, insert this code:-

<embed autostart="true" height="0" loop="true" src="URL of music file" width="0"/></embed>

Remember to insert the URL of music file into the code. There is no image of a console and readers cannot choose to turn off the music. Use this option with discretion.

Troubleshooting

The sound files can be in any format provided that your browser has the necessary plugin to play that file. Many people have problems playing MP3 files because their Firefox browsers do not have the necessary plugins. To check what your Firefox browser can support, enter this command into your browser:-

about:plugins

It will list all the installed plugins and the media files that can be played. If you need additional Mozilla Firefox add-ons, you can visit their Add-ons Page.


Further reading:

2 Column Blogger Template: Chocolate

Get Template Code

Visit My blog for other template list

Shrek the Third

Shrek the Third

» Download XML «

Shrek the Third has Shrek and Fiona watching over their kingdom of Far Far Away, now that King Harold is a frog, yet Shrek feels that he never cares about his friends. When King Harold falls ill and is dying, Shrek and Fiona determine that if they can find a suitable heir to the throne of Far Far Away and bring him back, they can leave their current lifestyles behind and return to their swamp. The most promising candidate for the position of king is Fiona's cousin, Arthur (Artie) who proves to be much more of a problem than Shrek, Donkey, and Puss had bargained for...

At World's End, Pirates of the Caribbean 3 template

» Download XML «

After Will Turner, Elizabeth Swann, and Captain Barbossa rescue Captain Jack Sparrow from the clutches of the Kraken, they must face their foes, Davy Jones and Lord Cutler Beckett. Beckett, now with control of Jones' heart, forms a dark alliance with him in order to rule the seas and wipe out the last of the Pirates. Now, Jack, Barbossa, Will, Elizabeth, Tia Delma, and crew must call the Pirate Lords from the four corners of the globe, including the infamous Sao Feng, to a gathering that will make their final stand against Beckett, Jones, Norrington, the Flying Dutchman, and the entire East India Trading Company...

The movie trailer HD is included in the header of this XML template.

Harry Potter and the Deathly Hallows

» Download XML «

Harry Potter and the Deathly Hallows is the seventh and final book in the Harry Potter series of novels by J. K. Rowling. The book title was announced on December 21, 2006 via a special Christmas-themed hangman puzzle on Rowling's website and confirmed shortly afterwards by the book's publishers. Rowling has stated that the final volume relates so closely to the previous book in the series, Harry Potter and the Half-Blood Prince, "almost as though they are two halves of the same novel." It features the adventures of the series' protagonist Harry Potter as he attempts to bring an end to his nemesis, Lord Voldemort...

How to install a Blogger XML template

Make sure you have backed up your template before installing a new one.

(You can also install a HTML template).

1.


You have to choose a XML Template



2.


Save the XML file on your hard disk.



3.


Go to your Blogger Control Panel - Edit HTML



4.


Browse the XML file you have saved and upload it.



5.
Finished!