Knowledge is good only if it is shared. As a new blogger, I had learned to change the Web template, and found out the tips, tricks, hacks, and tweaks of altering the Blogger template, customizing CSS, widgets, layout, blog design, inserting JavaScripts, HTML codes, Google AdSense, and other settings the hard way, through many trials and errors. For the purposes of this guide, I had started with the old Blogger “Minima” template. As I made the changes or learned something new, I had documented them. Before changing any template, please remember to save a copy of the current template. After editing the template, preview it, and save it when you are satisfied with the change. Hope this guide will help those who are finding the way around, just like me.

Search Tips for New Bloggers

We have extended our month-long vacation by a couple of days. We shall be posting articles the moment we return. We noticed that Google had updated the Page Ranks. New bloggers who have been waiting anxiously for this can check their blogs' Page Ranks. We have the PR checker link in our SEO Tools - Search Engine Optimization article.

The blog we created recently in Aug 2007, Blogger FAQ and Help, has also got its first Page Rank, a PR4. All our blogs are now ranked:-

Tips for New Bloggers - PR6
Business Fables and Management Lessons - PR4
Famous Motivational and Inspirational Quotes - PR4
Blogger FAQ and Help - PR4

Thanks to everyone for the support!

Jun 18, 2007

Digg This Story

Status Message and Older Post picture link

This tutorial covers 2 aspects. First, we shall customize the template to remove the status message “Showing posts for query link. Show all posts” appearing at the top of the posts when you enter a search word in the Blogger Navigation bar. Secondly, in the previous article, we discussed the ways to remove or hide the Newer Posts, Home, and Newer Posts links at the bottom of every post. We shall now talk about how you can change the text links to some other words or to replace these links with pictures. You will also learn how to switch the positions, to have the Older Posts link on the left and the Newer Posts link on the right.

Status Message

The status message “Showing posts for query link. Show all posts” appears at the top of the Post Body when readers perform a search of the Blog by entering the search word at the Navbar. If there is no post matching that search query, you will see a message “No posts match your query. Show all posts” instead.

Status Message and Older Post picture link

Similarly, if you click a label at the sidebar, the status message “Showing posts with label. Show all posts” will be automatically displayed at the top of the Posts.

Status Message and Older Post picture link

Some people may want to remove this message entirely either because it does not fit into the design of the Blog or that they think it redundant. If you do not want this message displayed, you can follow this guide to edit the template.

As a precautionary measure, before changing any part of the template, it is always good to backup the template. After making any change to the code, you should always preview the template before saving. In the event that you are too quick on the fingers and click Save before you confirm that you want the change, you can reload the previous template that you have backed up.

Login in to your Dashboard and go to Template -> Edit HTML. Check the “Expand Widget Templates” box. Backup your template by copying the template and saving it in an MS Notepad text file. You can also click the “Download Full Template” link that appears right after the words “Before editing your template, you may want to save a copy of it.”



With the “Expand Widget Templates” box still checked, scroll to where you see these lines and delete the line (shown in red). Preview, save and refresh the template. At any time in future if you want to reinstate the message status, simply insert this line back into the code.

<!-- posts -->
<div class='blog-posts'>

<b:include data='top' name='status-message'/>


Older Posts, Home, Newer Posts

These links are shown at the bottom of your Post Body. If you do not want to display these links, follow our earlier guide to Remove Older Post and Posts (Atom) Links.

1. Change the text links

If you want to change the words, for example, “Older Posts” to “Past”, “Home” to “Present”, and “Newer Posts” to “Future”, under Template -> Edit HTML, see that the “Expand Widget Templates” box is checked. Scroll to these lines:-

<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>

</div>



Change the colored portions of the code to this:-

<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'>Future</a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'>Past</a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'>Present</a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'>Present</a>
</b:if>
</b:if>

</div>



This is what you will see:-

Status Message and Older Post picture link

You can of course replace these with other words. For example, you may substitute the Older Posts (in red) with other words like Previous Rants, Yesterday's words, Lost Files. Choose your own words for Home (in blue) and Newer Posts (in green).

2. Replace with picture links

Update:

When we first wrote this article, we had no problems replacing the “Older Posts” and “Newer Posts” text links with image links. Not long after, it seemed that the link was not clickable on the home page. We had to click the bottom right corner of the image for it to work. They functioned well on the other pages though. Lately, it seemed that clicking the Older Posts image link on the home page will give an error code bX-v40b2j. This happened when the link had to check for posts before or after a certain date. Somehow, when we were viewing a posted article, the image links worked since they pointed to a definite post url. We have not found out the cause of this anomaly. In the meantime, the only icon that seemed to work is the Home Page icon. In the code below, ignore and do not change the part shown in red and green as they are images for the Older Posts and Newer Posts. The part shown in blue is for the Home Page icon and you can have that if you'd like. If the problem is resolved, we shall update this article accordingly.

You can also replace these texts with icons, cliparts, or other images and pictures. Many people use arrows to point to the previous page or next page. You should first have the pictures that you want to use.

Use photo editing softwares like Google's Picasa to crop and resize to a small picture. Upload the image onto a free image server. You can read about using free hosts like Google Page Creator and Google Groups. We also have 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. Take note of the Image URL.

In the above codes, instead of replacing the red, blue and green portions with text, insert this code instead. Remember to type in the Image URL:-

<img src="Image URL" />


If you want to know more about the attributes for an image tag, you may refer to the article on Hyperlinks and Image Links (II).

We have created and uploaded some sample pictures that you can use. If you like something like this:-

Status Message and Older Post picture link

You can change your template to the following:-

<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><img src="http://www.blogpulp.com/imagehost/images/733257041.jpg" /></a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><img src="http://www.blogpulp.com/imagehost/images/180881814.jpg" /></a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><img src="http://www.blogpulp.com/imagehost/images/139275805.jpg" /></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><img src="http://www.blogpulp.com/imagehost/images/139275805.jpg" /></a>
</b:if>
</b:if>

</div>



3. Switch Position of Older and Newer Posts

You would have noticed that the “Older Posts” link is on the right whereas the “Newer Posts” link is on the left. If we are using arrows to depict the Previous article and the Next article, we may prefer to have the Previous article or Older Posts on the left instead of the right. To switch the positions, we go to these lines in the template and amend the parts (shown in red).

#blog-pager-newer-link {
float: right;
}

#blog-pager-older-link {
float: left;
}


With this change, we now have the Older Posts link on the left and the Newer Posts link on the right.

© Tips for New Bloggers

Found this article useful? Mention us in your post, subscribe to our feed, link to us, or bookmark this site. Thanks for your support!AddThis Social Bookmark Button

Jun 13, 2007

Digg This Story

Post Footer – Customize Template (I)

In this tutorial, we discuss the various ways you can customize the Post Footer and change the Blogger template. The steps will cover how to change the “Posted by author”, “Comments”, “Labels” links in the Post Footer, replacing them with other names or pictures.

This is how a typical Post Footer looks like. It includes the author's name, time of the post, number of comments, number of backlinks, icon for readers to email the post, icon for you to edit your post, as well as Labels.

Post Footer – Customize Templat

Update:

If you are looking to change the text, alter some settings or re-arrange the positions of the Post Footer elements,you can go to Template -> Page Elements and click the “Edit” link on the Blog Posts widget. You will see a screen like this:-

Post Footer – Customize Template

You can read our Arrange and Customize Blog Posts Elements article to learn a little about these options. Even though this is a simple way to make minor adjustments, you will not be able to insert pictures, signatures, change the author's name, etc. To do these other things to the Post Footer, you may want to read the rest of our guides here and customize your Footer.

Before we proceed to alter the template, remember to backup the existing template. Go to Template -> Edit HTML. Check the “Expand Widget Templates” box. Backup your template by copying the template and saving it in an MS Notepad text file. You can also click the “Download Full Template” link that appears right after the words “Before editing your template, you may want to save a copy of it.”

Post Footer – Customize Template

Posted by author

1. Change author's name

The name of the author is the name shown in your Blogger Profile. Should you want to keep this name, but assign a pen name or nickname to your postings, go to Template -> Edit HTML and click the “Expand Widget Templates” box.

Post Footer – Customize Template

Scroll to where you see these lines. For most browsers, you can press Control-F to search for this phrase “data:post.author

<div class='post-footer'>
<p class='post-footer-line post-footer-line-1'>
<span class='post-author'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/> <data:post.author/>
</b:if>
</span>


Replace the part of the code (shown in red) with whatever name you want to call yourself. This is what you will see in your Post Footer:-

Post Footer – Customize Template

2. Remove “Posted by”

What if you do not even want the words “Posted by”? Well, you will have to delete both the codes (shown in blue and in red). Replace them with the words you want to display. The result is this:-

Post Footer – Customize Template

3. “Posted by” below Post title

Some blogs have the “Posted by author” just beneath the Post Title. If you want to do that, cut the entire code in the template and paste it below this line:-

<div class='post-header-line-1'/>

<span class='post-author'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/> <data:post.author/>
</b:if>
</span>


This is what you will get:-

Post Footer – Customize Template

4. Image instead of Name

You can also place an image instead of having a name. However, this image should be small. Crop or resize the image using photo editing tools. There are free ones like Google's Picasa which you can use. Upload the image onto free hosts like Google Page Creator and Google Groups. We also have 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. Take note of the Image URL.

In the above codes, instead of replacing the blue and/or red parts with a name, insert this code instead:-

<a href="URL of your Blog"><img src="Image URL" /></a>


Remember to key in the URL of your Blog as well as the Image URL. This gives you an image link so that when people click the picture, they will be brought to your Blog's main page. If you do not want a link, you only need to insert this code:-

<img src="Image URL" />


The final code will look like this:-

<div class='post-footer'>
<p class='post-footer-line post-footer-line-1'>
<span class='post-author'>
<b:if cond='data:top.showAuthor'>
<a href="URL of your Blog"><img src="Image URL" /></a>
</b:if>
</span>


5. Image AND Name

Let us now combine the above to have BOTH your image and name in the Footer. For example, you may want to have something like this:-

Post Footer – Customize Template

The code will be changed to this. Change the text. The image code can be either before or after the text.

<div class='post-footer'>
<p class='post-footer-line post-footer-line-1'>
<span class='post-author'>
<b:if cond='data:top.showAuthor'>
Author<img src="Image URL"/>
</b:if>
</span>


Timestamp

If you do not want the time stamp at all, scroll down the template and delete these lines:-

<span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<a class='timestamp-link' expr:href='data:post.url' title='permanent link'><data:post.timestamp/></a>
</b:if>
</b:if>
</span>


This article continues at Post Footer – Customize Template (II).

© Tips for New Bloggers

Found this article useful? Mention us in your post, subscribe to our feed, link to us, or bookmark this site. Thanks for your support!AddThis Social Bookmark Button

Digg This Story

Post Footer – Customize Template (II)

We continue from where we left off in Post Footer – Customize Template (I). In the first part, we went through how you can change and customize the appearance of the “Posted by author” link and replace it with another name or picture. You could also remove the timestamp if you want. In this part, we continue with customization of the “Comments”, “Labels” and other icons shown in the Blogger Post Footer.

Comments

1. Settings

If you simply want to enable or disable Comments, login into your Dashboard and under Settings -> Comments, you will see the options for “Comments”. You can either “Show” or “Hide”. You can choose “Hide” so as not to show the Comment link, without deleting existing comments.

2. Change the word “Comments”

Should you want to retain the Comment link but change the word “Comments” to something else, scroll to this part of the template:-

<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/> <b:else/><data:post.numComments/> <data:top.commentLabelPlural/> </b:if></a>
</b:if>
</b:if>
</span>


In my spiderman example, I wanted to use the phrase “Friendly Neighbors”. Where the blue code is, I replaced it with the phrase “Friendly Neighbor”, the singular form when there is only 1 comment. At the red part of the code, I replaced it with the plural form “Friendly Neighbors” when there are 2 comments or more. The resulting code is:-

<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 Friendly Neighbor<b:else/><data:post.numComments/> Friendly Neighbors</b:if></a>
</b:if>
</b:if>
</span>


And this is what you will see:-

Post Footer – Customize Template

Links to Post

If you do not want this in your Post Footer, go to Dashboard, under Settings -> Comments, you can choose to “Show” or “Hide” the “Backlinks”. If you select “Hide”, the backlinks to your Post and the words “Links to this Post” will not be displayed.

Email Post icon

In your Dashboard, under Settings -> Basic, you can see a query “Show Email Post links?” If you choose “Yes”, you will see the little envelope image for viewers to click to email the Post to other people. Should you choose “No”, that image will not be displayed.

Labels

1. Change “Labels” name

To suit the theme of your Blog, you may want to change the word “Labels” to something else, like “Subjects”, “Topics”, “Categories”, “Genre”, etc. Scroll to this part of the template:-

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


Substitute the part of the code (shown in red) with the word that you want to use. The result is this:-

Post Footer – Customize Template

2. Image instead of name

In Part I of this article, we went into details on how you can use an image to replace the author's name. If you want to have a picture to replace the word “Labels”, the procedure is the same. Instead of the name to replace the part of the above code (shown in red), insert the image code. The resulting code would appear like this:-

<p class='post-footer-line post-footer-line-2'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
<a href="URL of your Blog"><img src="Image URL" /></a>
<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>


Further reading:-

Remove Older Post and Posts (Atom) Links

© Tips for New Bloggers

Found this article useful? Mention us in your post, subscribe to our feed, link to us, or bookmark this site. Thanks for your support!AddThis Social Bookmark Button

Jun 8, 2007

Digg This Story

Submit RSS Feeds and Pings

In this article, we list all the Feed Directories to which you can submit your feeds for Free. We shall also list the Ping services that you can use to ping whenever you update your Blog. This should help increase awareness of your new articles and attract more readers to your Blog. As the list is ever-growing, you might want to consider bookmarking this page as we shall update the list whenever we come across other useful services.

This article is a follow up on our earlier articles Submit Blog to Blog Directories, Submit Sitemap to Google, and Submit Sitemap to Yahoo. Get more visitors to your Blog by submitting your site to these Blog Directories and submit your Blogger Sitemap to MSN and Ask.com as well as these various Search Engines for maximum exposure.

Even if you are not familiar with feeds, you would have probably seen this icon Tips for New Bloggers in your web browsers. When you come across a page with contents that are viewable in web feed formats, you will be able to click the icon in your browsers to subscribe to the feed of that page. These feeds may either be a full text or summary of the content. The content can be read on a feed reader or aggregator which checks the sites regularly for new content. The terms RSS and Atom are feed formats.

To ensure that your Blog is able to syndicate the feed content of your Posts, login to your Dashboard and go to Settings -> Site Feed. Make sure that you have set “Allow Blog Feed” to Short or Full. Save the settings.

Next, key this URL into your browser, substituting YOUR-BLOG-URL with the URL of your blog beginning with http://

YOUR-BLOG-URL/feeds/posts/default?alt=rss


Do you see your Blog feed? Next, test with this URL

YOUR-BLOG-URL/feeds/posts/default


You should be able to see the contents of your Posts, either in summary form or full, depending on your Settings. These are your Blog Feed URLs. You can submit any of them to the Feed Directories that we list below. If you have syndicated your feed to other services like Feedburner, you can submit that Feed URL too.

To confirm whether your URL is correct, you may also enter it into this RSS Feed Validator.

Submit Blog Feed to Feed Directories

1. General

2RSS

4Guys from Rolla - For resource RSS feeds.

ASP Index - For resource RSS feeds.

Blo.gs

BlogDigger

Bloglines

Blogz

Bloogz

BulkFeeds [Update: Site inaccessible]

Chordata - Register to submit RSS feed in relevant category.

Daypop - For news sites.

DayTimeNews

DevASP

Feed24

FeedAge - Register to submit RSS feed.

FeedBase

FeedBomb - Select a category to submit RSS feed.

FeedBlitz - Register to submit RSS feed.

FeedBurner - Register to submit RSS feed.

FeedCat - Register to submit feed in relevant category.

Feed-Directory

FeedDirectory

FeedFury

Feedmap

Feedooyoo - Submit RSS feeds and keywords.

FeedPlex

Feeds2Read

Feeds4All

FeedFarm – For news related RSS feeds.

Findory

FindRSS [Update: site inaccessible]

FreeRSS

FreshPodcasts - For podcasts.

GeneCast - Register to submit your news feeds.

GoldenFeed [Update: error message when adding feed]

IceRocket

JordoMedia

Memigo [Update: site inaccessible]

MoreOver

NewzAlert.com - Register to submit RSS feed.

nFeeds

Octora

Odeo - Register to submit RSS feed.

Plazoo

Postami

ReadABlog [Update: error message when adding feed]

RedTram

RocketInfo

Rojo - Register to submit RSS feed.

RSSFeed - Register to submit RSS feed.

RSSFeeds

RSSKnip - Add RSS feed at the bottom. [Update: not accepting new feeds]

RSSMad - RSS feed submission at bottom right.

RSSMicro

RSSMotron

RSSNetwork [Update: error message when adding feed]

Rubhub [Update: site inaccessible]

Search4RSS

Sourceforge - For news feeds.

Syndic8

Technorati

TheFeedDirectory [Update: unable to add feed]

Videocast - For videocast or vodcast.

WeBlogALot

2. Specific

Auto Feeds - For automotive feeds only.

Nooked - For corporate feeds only.

Educational Feeds - For educational podcasts and RSS feeds.

Finance Investing Feeds - For finance or investment related RSS feeds.

Government Feeds - Only for feeds from local and federal government agencies.

Medical Feeds - For medical care or health related RSS feeds.

National Lib for Health - For medical and health RSS feeds.

Political Feeds - For political podcasts and RSS feeds.

Realty Feeds - For home related RSS feeds in the appropriate category.

Religious Podcasts - For podcasts relating to religion, sermon or spiritual beliefs.

Science Port - For scientific news feeds.

Security Protection Feeds - For security or protection related RSS feeds.

Sports Feeds - For sports related podcasts and RSS feeds.

3. Regional

1470 - Japanese RSS feeds.

31engine - Japanese RSS feeds.

Bakeinu - Japanese RSS feeds.

Bitacoras - Spanish blogs.

Bitacoles - Spanish RSS feeds.

Blogblogs - Brazilian blogs.

Blogbot - Danish RSS feeds.

Blogg - German RSS feeds.

BlogPeople - Japanese RSS feeds.

Blog-search - Japanese blogs.

Blogstyle - Japanese RSS feeds.

Feeds.com.br - Portuguese RSS feeds.

RSS Israel - Israeli RSS feeds.

RSS Nachrichten - German RSS feeds.

RSS Verzeichnis - German RSS feeds.

Technorati.jp - Japanese version of Technorati.

Veneblogs - Venezuela blogs.

Weblogues - French RSS feeds.

Submit Blog Pings

Now that your Blog appears in several Blog and Feed directories, you would want to keep these directories and search engines notified of your latest blog updates. By pinging some of the services, they will be able to crawl or visit your site to index the latest blog contents. You can ping them when you have created a new post or updated an old post. Fortunately for us, there are a number of useful services that make it easy for us to submit the pings to the tracking sites.

First essential step. Go to Settings -> Publishing and under “Send Pings”, select “Yes”. Whenever your blog is updated, Blogger will ping certain services that track blog changes.

Rather than pinging individual tracking sites, we have been using services which help us update different sites and search engines that include Verisign's Weblogs.com, Yahoo!'s blo.gs, Technorati, Newsgator, Feedburner, Moreover, Bulkfeeds and Syndic8. All we need to do is to enter the Blog URL and Blog Title and they will send the pings to all the sites we select.

Ping Services

Google Blog Search Ping Service - We thought we should mention this. For new bloggers who do not find their sites when they key them into the NavBar search box, ping this site.

Pingoat - A very comprehensive list of sites that you can choose to ping. The service is also very fast and it is done within seconds.

Ping-O-Matic - Less comprehensive list.

Blog Flux Ping Service - A list of sites as comprehensive as Pingoat's but the ping takes a much longer time and is not often successful.

Feeds Pings - A short list but has pretty relevant sites.

There are other services which volunteer to send the pings on your behalf. Some of them are services provided to members only. You may also ping individual sites like Technorati. However, we think that the above services would have sufficiently covered many of the popular tracking sites.

Of course, we shall update this list every now and then and you may want to click the Bookmark button below to visit this page whenever you have updated your articles.

© Tips for New Bloggers

Found this article useful? Mention us in your post, subscribe to our feed, link to us, or bookmark this site. Thanks for your support!AddThis Social Bookmark Button

Jun 5, 2007

Digg This Story

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. Also, animated tags like this are not W3C-compliant. Microsoft came up with the marquee tag and while most browsers support it, W3 did not accept it. We shall be discussing this in later articles on CSS3 and JavaScript alternatives.

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: rgb(255,0,0)">#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-weight:bold;"><marquee direction="right" scrollamount="3" bgcolor="#333333">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.

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.

Update:

Pause/Stop and Start a Scroll

Readers have asked whether the scrolling text can be paused when a visitor moves his mouse cursor over the text. This is useful when he wants to read the text or click a link with the text. To start and start a marquee, the additional arguments used are the "onmouseover" and "onmouseout" events to add a simple JavaScript. It will pause the scrolling text when the mouse is over it and resume the scroll when the mouse leaves the text.

Example 7

<marquee bgcolor="#ffffcc" onmouseover="this.stop()" onmouseout="this.start()">Text scroll pauses when the mouse hovers over it and starts again when the mouse is moved out of the text.</marquee>


Text scroll pauses when the mouse hovers over it and starts again when the mouse is moved out of the text.

Scrolling Link List

If you are interested in having a Scrolling Link List, we have explained how you can do it in our article on Numbered List and Bulleted List.

© Tips for New Bloggers

Found this article useful? Mention us in your post, subscribe to our feed, link to us, or bookmark this site. Thanks for your support!AddThis Social Bookmark Button