Wednesday, August 29, 2007

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

Hexadecimal HTML Color Codes and Names

div class='post-body'>

Changing background and border colors will add a special identity to your site.

Under the Template tab, you see “Fonts and Colors”. Clicking that, you will be able to change the colors, font types, and font size. However the available colors on the screen are limited. If you cannot find the color you want, you may want to copy the appropriate hex codes of the colors below, and paste them into the “color hex code” box and press Enter. Try out different combinations, and change them as and when you like.

HTML Color Code Chart



COLOR NAMECODECOLOR
Black#000000 
Grey0#150517 
Grey18#250517 
Grey21#2B1B17 
Grey23#302217 
Grey24#302226 
Grey25#342826 
Grey26#34282C 
Grey27#382D2C 
Grey28#3b3131 
Grey29#3E3535 
Grey30#413839 
Grey31#41383C 
Grey32#463E3F 
Grey34#4A4344 
Grey35#4C4646 
Grey36#4E4848 
Grey37#504A4B 
Grey38#544E4F 
Grey39#565051 
Grey40#595454 
Grey41#5C5858 
Grey42#5F5A59 
Grey43#625D5D 
Grey44#646060 
Grey45#666362 
Grey46#696565 
Grey47#6D6968 
Grey48#6E6A6B 
Grey49#726E6D 
Grey50#747170 
Grey#736F6E 
Slate Grey4#616D7E 
Slate Grey#657383 
Light Steel Blue4#646D7E 
Light Slate Grey#6D7B8D 
Cadet Blue4#4C787E 
Dark Slate Grey4#4C7D7E 
Thistle4#806D7E 
Medium Slate Blue#5E5A80 
Medium Purple4#4E387E 
Midnight Blue#151B54 
Dark Slate Blue#2B3856 
Dark Slate Grey#25383C 
Dim Grey#463E41 
Cornflower Blue#151B8D 
Royal Blue4#15317E 
Slate Blue4#342D7E 
Royal Blue#2B60DE 
Royal Blue1#306EFF 
Royal Blue2#2B65EC 
Royal Blue3#2554C7 
Deep Sky Blue#3BB9FF 
Deep Sky Blue2#38ACEC 
Slate Blue#357EC7 
Deep Sky Blue3#3090C7 
Deep Sky Blue4#25587E 
Dodger Blue#1589FF 
Dodger Blue2#157DEC 
Dodger Blue3#1569C7 
Dodger Blue4#153E7E 
Steel Blue4#2B547E 
Steel Blue#4863A0 
Slate Blue2#6960EC 
Violet#8D38C9 
Medium Purple3#7A5DC7 
Medium Purple#8467D7 
Medium Purple2#9172EC 
Medium Purple1#9E7BFF 
Light Steel Blue#728FCE 
Steel Blue3#488AC7 
Steel Blue2#56A5EC 
Steel Blue1#5CB3FF 
Sky Blue3#659EC7 
Sky Blue4#41627E 
Slate Blue#737CA1 
Slate Grey3#98AFC7 
Violet Red#F6358A 
Violet Red2#E4317F 
Deep Pink#F52887 
Deep Pink2#E4287C 
Deep Pink3#C12267 
Deep Pink4#7D053F 
Medium Violet Red#CA226B 
Violet Red3#C12869 
Firebrick#800517 
Violet Red4#7D0541 
Maroon4#7D0552 
Maroon#810541 
Maroon3#C12283 
Maroon2#E3319D 
Maroon1#F535AA 
Magenta#FF00FF 
Magenta1#F433FF 
Magenta2#E238EC 
Magenta3#C031C7 
Medium Orchid#B048B5 
Medium Orchid1#D462FF 
Medium Orchid2#C45AEC 
Medium Orchid3#A74AC7 
Medium Orchid4#6A287E 
Purple#8E35EF 
Purple1#893BFF 
Purple2#7F38EC 
Purple3#6C2DC7 
Purple4#461B7E 
Dark Orchid4#571B7E 
Dark Orchid#7D1B7E 
Dark Violet#842DCE 
Dark Orchid3#8B31C7 
Dark Orchid2#A23BEC 
Dark Orchid1#B041FF 
Plum4#7E587E 
Pale Violet Red#D16587 
Pale Violet Red1#F778A1 
Pale Violet Red2#E56E94 
Pale Violet Red3#C25A7C 
Pale Violet Red4#7E354D 
Plum#B93B8F 
Plum1#F9B7FF 
Plum2#E6A9EC 
Plum3#C38EC7 
Thistle#D2B9D3 
Thistle3#C6AEC7 
Lavendar Blush2#EBDDE2 
Lavendar Blush3#C8BBBE 
Thistle2#E9CFEC 
Thistle1#FCDFFF 
Lavendar#E3E4FA 
Lavendar Blush#FDEEF4 
Light Steel Blue1#C6DEFF 
Light Blue#ADDFFF 
Light Blue1#BDEDFF 
Light Cyan#E0FFFF 
Slate Grey1#C2DFFF 
Slate Grey2#B4CFEC 
Light Steel Blue2#B7CEEC 
Turquoise1#52F3FF 
Cyan#00FFFF 
Cyan1#57FEFF 
Cyan2#50EBEC 
Turquoise2#4EE2EC 
Medium Turquoise#48CCCD 
Turquoise#43C6DB 
Dark Slate Grey1#9AFEFF 
Dark Slate Grey2#8EEBEC 
Dark Slate Grey3#78C7C7 
Cyan3#46C7C7 
Turquoise3#43BFC7 
Cadet Blue3#77BFC7 
Pale Turquoise3#92C7C7 
Light Blue2#AFDCEC 
Dark Turquoise#3B9C9C 
Cyan4#307D7E 
Light Sea Green#3EA99F 
Light Sky Blue#82CAFA 
Light Sky Blue2#A0CFEC 
Light Sky Blue3#87AFC7 
Sky Blue#82CAFF 
Sky Blue2#B0E2FF 
Light Sky Blue4#566D7E 
Sky Blue#6698FF 
Light Slate Blue#736AFF 
Light Cyan2#CFECEC 
Light Cyan3#AFC7C7 
Light Cyan4#717D7D 
Light Blue3#95B9C7 
Light Blue4#5E767E 
Pale Turquoise4#5E7D7E 
Dark Sea Green4#617C58 
Medium Aquamarine#348781 
Medium Sea Green#306754 
Sea Green#4E8975 
Dark Green#254117 
Sea Green4#387C44 
Forest Green#4E9258 
Medium Forest Green#347235 
Spring Green4#347C2C 
Dark Olive Green4#667C26 
Chartreuse4#437C17 
Green4#347C17 
Medium Spring Green#348017 
Spring Green#4AA02C 
Lime Green#41A317 
Spring Green#4AA02C 
Dark Sea Green#8BB381 
Dark Sea Green3#99C68E 
Green3#4CC417 
Chartreuse3#6CC417 
Yellow Green#52D017 
Spring Green3#4CC552 
Sea Green3#54C571 
Spring Green2#57E964 
Spring Green1#5EFB6E 
Sea Green2#64E986 
Sea Green1#6AFB92 
Dark Sea Green2#B5EAAA 
Dark Sea Green1#C3FDB8 
Green#00FF00 
Lawn Green#87F717 
Green1#5FFB17 
Green2#59E817 
Chartreuse2#7FE817 
Chartreuse#8AFB17 
Green Yellow#B1FB17 
Dark Olive Green1#CCFB5D 
Dark Olive Green2#BCE954 
Dark Olive Green3#A0C544 
Yellow#FFFF00 
Yellow1#FFFC17 
Khaki1#FFF380 
Khaki2#EDE275 
Goldenrod#EDDA74 
Gold2#EAC117 
Gold1#FDD017 
Goldenrod1#FBB917 
Goldenrod2#E9AB17 
Gold#D4A017 
Gold3#C7A317 
Goldenrod3#C68E17 
Dark Goldenrod#AF7817 
Khaki#ADA96E 
Khaki3#C9BE62 
Khaki4#827839 
Dark Goldenrod1#FBB117 
Dark Goldenrod2#E8A317 
Dark Goldenrod3#C58917 
Sienna1#F87431 
Sienna2#E66C2C 
Dark Orange#F88017 
Dark Orange1#F87217 
Dark Orange2#E56717 
Dark Orange3#C35617 
Sienna3#C35817 
Sienna#8A4117 
Sienna4#7E3517 
Indian Red4#7E2217 
Dark Orange3#7E3117 
Salmon4#7E3817 
Dark Goldenrod4#7F5217 
Gold4#806517 
Goldenrod4#805817 
Light Salmon4#7F462C 
Chocolate#C85A17 
Coral3#C34A2C 
Coral2#E55B3C 
Coral#F76541 
Dark Salmon#E18B6B 
Salmon1#F88158 
Salmon2#E67451 
Salmon3#C36241 
Light Salmon3#C47451 
Light Salmon2#E78A61 
Light Salmon#F9966B 
Sandy Brown#EE9A4D 
Hot Pink#F660AB 
Hot Pink1#F665AB 
Hot Pink2#E45E9D 
Hot Pink3#C25283 
Hot Pink4#7D2252 
Light Coral#E77471 
Indian Red1#F75D59 
Indian Red2#E55451 
Indian Red3#C24641 
Red#FF0000 
Red1#F62217 
Red2#E41B17 
Firebrick1#F62817 
Firebrick2#E42217 
Firebrick3#C11B17 
Pink#FAAFBE 
Rosy Brown1#FBBBB9 
Rosy Brown2#E8ADAA 
Pink2#E7A1B0 
Light Pink#FAAFBA 
Light Pink1#F9A7B0 
Light Pink2#E799A3 
Pink3#C48793 
Rosy Brown3#C5908E 
Rosy Brown#B38481 
Light Pink3#C48189 
Rosy Brown4#7F5A58 
Light Pink4#7F4E52 
Pink4#7F525D 
Lavendar Blush4#817679 
Light Goldenrod4#817339 
Lemon Chiffon4#827B60 
Lemon Chiffon3#C9C299 
Light Goldenrod3#C8B560 
Light Golden2#ECD672 
Light Goldenrod#ECD872 
Light Goldenrod1#FFE87C 
Lemon Chiffon2#ECE5B6 
Lemon Chiffon#FFF8C6 
Light Goldenrod Yellow#FAF8CC 


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."

Add video clip to Blog

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

Add video clip to Blog

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

Add video clip to Blog

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.

Add video clip to Blog

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.

Add video clip to Blog

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.

Add video clip to Blog

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.

Add Digg button to Blogger or Blogspot

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:-

Add Digg button to Blogger or Blogspot

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:-

Add Digg button to Blogger or Blogspot

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:-

Add Digg button to Blogger or Blogspot

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:-

Add Digg button to Blogger or Blogspot

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:-

Add Digg button to Blogger or Blogspot

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:-

Add Digg button to Blogger or Blogspot

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.

Add Digg button to Blogger or Blogspot

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.

Digg Digg Digg Digg Digg Digg

Digg Digg Digg Digg

Digg

Take note of the image URL. For example, the image URL of this button Digg 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.


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: