Logo

In our previous articles, we discussed the code for making the text and image links in your Posts open in new windows or tabs when clicked. However, to have the links in a Link List and Labels that are normally in the sidebar widgets open in new browser windows or tabs, you would need to change the HTML code in your template. Here, we shall talk about the hack that you can put into your template.

Text Links and Image Links

To recapitulate what we mentioned in our guides at Hyperlinks and Image Links (I) and Hyperlinks and Image Links (II), a typical hypertext or text link code looks like this:-

<a href="URL" target="_blank" title="TITLE">Text</a>

The HTML code of a picture or image link looks like this:-

<a href="URL" target="_blank" title="TITLE"><img src="Image URL" border="0" width="80" height="15" alt="Description"></a>

The part of the code that tells the browser to open the link in a new browser window or new tab is the target attribute (in blue). If you want the readers to view the link in the same browser window, simply remove target="_blank" from the code.

Link List and Link Widget

The Link List that you create in your sidebar, using Template -> Page Elements -> Add a Page Element, will open links in the same window. Sometimes, these may not be what you want. For instance, we have configured our template such that the links for “My Blogs” open in new windows but the links in “Articles” open in the same window.

(By the way, many people have asked whether the Articles list is an archive hack. The answer is no. The list you see is created using a Link List. We think that it is better than Archive because it allows us flexibility in displaying and grouping the Articles regardless of date of post.)

To have the Link List open in new windows when clicked, we first 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.”



Scroll to these lines and add the code in red.

<b:widget id='LinkList1' locked='false' title='Links' type='LinkList'> <b:includable id='main'> <b:if cond='data:title'> <h2><data:title/></h2></b:if> <div class='widget-content'> <ul> <b:loop values='data:links' var='link'> <li><a expr:href='data:link.target' target='_blank'><data:link.name/></a></li> </b:loop>

Please Note:

You have to locate the correct Link List. Check against the Title if you have inserted a title for the List. If you have several Link Lists in your Blog, they will be numbered LinkList1, LinkList2, and so on. In case you did not insert titles into your Link Lists and you are not sure which Link widget is the right one, look at what is before or after the codes, and compare against what you see on your Blog. They are usually arranged in the order that they appear in your Blog.

Save and refresh your page to see the change.

Label List and Label Widget

If you have created a list of Labels through Template -> Page Elements -> Add a Page Element, you can also have your Labels open in new browser windows or tabs.

Scroll to these lines and add the code in red.

<b:widget id='Label1' locked='false' title='Labels' type='Label'> <b:includable id='main'> <b:if cond='data:title'> <h2><data:title/></h2> </b:if> <div class='widget-content'> <ul> <b:loop values='data:labels' var='label'> <li> <b:if cond='data:blog.url == data:label.url'> <data:label.name/> <b:else/> <a expr:href='data:label.url' target='_blank'><data:label.name/></a> </b:if> (<data:label.count/>) </li> </b:loop>

Add an identity to your Blog by customizing the text links in your post and sidebars with nice rollover effects, colors and highlights. Learn how to remove the underline under the links. For the purpose of this article, we have changed our template such that you will see a different text color when your cursor is over the links, and a highlighted background color when the cursor is over the post title. We have also changed our other Blog to let you see a further example of a combination of color and font change for the hover links. In this article, we shall discuss the common effects that you can create for your Blog.

Overview of Link Styles

Blogger templates use Cascading Style Sheets (“CSS”) to define how the pages should be displayed. There are four basic stylesheet entities for links:-

a:link { } a:visited { } a:hover { } a:active { }

a:link defines the style for links such that they stand out from the rest of the normal text.

a:visited defines the style for links that have been clicked or visited.

a:hover defines the style readers see when their cursor or mouse moves over the links.

a:active defines the style to an activated element.

The common rollover effects and styles that can be inserted into the { } are:-

color: #XXXXXX;

Changes the color of the text. By far the most common and effective style. For a list of color codes to be inserted in the XXXXXX, you may refer to the Hexadecimal HTML Color Codes and Names.

text-decoration: none; text-decoration: underline; text-decoration: overline; text-decoration: line-through; text-decoration: blink;

Set to “none” to remove the underline under the links. Set to “overline” if you want a line above the text or set to “underline” for a line below the text.

font-weight: normal; font-weight: bold; font-weight: bolder; font-weight: lighter;

By default, the font is “normal”, so there is really no need to set it as that unless all your text is in a bold font and you want your hover links to be in the normal font.

font-style: normal; font-style: italic;

A common style used is “italic” for the hover links.

font-family: Verdana,Arial;

The “Verdana,Arial” font is just an example. You can insert the font family names or generic family names that you want as the typeface for the links.

font-size: 85%; font-size: 10px; font-size: xx-small; font-size: x-small; font-size: small; font-size: medium; font-size: large; font-size: x-large; font-size: xx-large; font-size: smaller; font-size: larger;

For percentages and fixed font size, you can specify the values accordingly.

background-color: #XXXXXX;

With this, the background of the text link will be highlighted. For a list of color codes to be inserted in the XXXXXX, you may refer to the Hexadecimal HTML Color Codes and Names.

text-transform: uppercase; text-transform: lowercase;

This changes the letters of the link either to uppercase or lowercase.

border-style: none; border-style: hidden; border-style: dotted; border-style: dashed; border-style: solid; border-style: double; border-style: groove; border-style: ridge; border-style: inset; border-style: outset;

This gives you a border around the link.

border-color: #XXXXXX;

If you have a border, you may want to specify the color of the border. For a list of color codes to be inserted in the XXXXXX, you may refer to the Hexadecimal HTML Color Codes and Names.

Change Link Styles in Template

Under Template -> Edit HTML, you will be able to find the first 3 stylesheet entities or lines that look like these:-

a:link { color:$linkcolor; text-decoration:none; } a:visited { color:$visitedlinkcolor; text-decoration:none; } a:hover { color:$titlecolor; text-decoration:underline; }

Changing these 3 will do significant wonders to the appearance of your Blog. In the Minima template, you can adjust the colors of the links, visited links, and hover links through Template -> Fonts and Colors. You can manually insert the color values too. Look at these examples and see the effects to understand what you can do to your Blog.

Example 1:

a:link { color: #0066CC; } a:visited { color: #cc0000; } a:hover { color: #2D8930; }

Click this link for an example on how the link changes to red color when visited and green when mouseover.

Example 2:

a:link { color: #0066CC; } a:visited { color: #cc0000; } a:hover { color: #2D8930; font-size: 120%; }

Click this link to see an example of how in addition to the green, the link is also bigger in font when you hover your mouse over it.

Example 3:

a:link { color: #0066CC; } a:visited { color: #cc0000; } a:hover { color: #2D8930; background: #ffff66; }

Click this link to view an example of a yellow background when you place your cursor over the link.

Example 4:

a:link { color: #0066CC; } a:visited { color: #cc0000; } a:hover { color: #2D8930; font-family: monospace; }

Click this link for an example of a different typeface or font when you place your mouse over the link.

Example 5:

a:link { color: #0066CC; text-decoration: none; } a:visited { color: #cc0000; text-decoration: underline; } a:hover { color: #2D8930; text-decoration: blink; }

Click this link and notice that the link blinks when you mouseover and it has an underline when you have visited the link.

Example 6:

a:link { color: #0066CC; } a:visited { color: #cc0000; } a:hover { color: #2D8930; border-style: inset; border-color: #D462FF; }

Click this link for an example of a violet border around the link when you hover over it.

Example 7:

You can now combine some of these rollover effects into the link styles. For example, if you want the link to have a different font family, bold and bigger font, highlighted background, and it blinks when you hover the mouse over it, you can put all the styles under a:hover as follows:-

a:link { color: #0066CC; } a:visited { color: #cc0000; } a:hover { color: #2D8930; font-family: monospace; font-weight: bold; font-size: 120%; background: #ffff66; text-decoration: blink; }

Click this link to see an example of a combination of styles - a different font family, bold and bigger font, highlighted background, and it blinks when you hover the mouse over it.

Experiment with the combinations but avoid having too many styles. Be careful when using the font-size, font-family or font-weight as these may adjust the format of the text around the link. Note also that not all the effects are supported by every browser. For instance, Blink works in Firefox but not in IE.

Change Post Title Style

Under Settings -> Archiving, if you have set the “Enable Post Pages” to “Yes”, you will have a unique web page for each Post and the Title will link to that page.

If you want to set a hover style for the Post Title, look for this line and add the styles and effects after that:-

.post h3 a:hover {

Further reading:-

For specific text link and image link codes, you may read the guide at Hyperlinks and Image Links (I).

If you want to remove link underlines or have the underlines only in the Blog Posts or Sidebar areas, look up our guide at Remove Underline Below Text Links.

We continue from where we left off in Hyperlinks and Image Links (I). We have looked at how we can create text links and discussed the HTML code and common attributes. In this part of the article, we shall focus on adding Images and Image Links into your Blog. We will talk about the “title” and “alt” tags in image links which supposedly help in search engine optimization (SEO). We shall end off with the code you can put on your Blog to allow your readers to link to you from their Blogs.

Image Tag

I assume you have a ready picture, image, photo, or banner. Edit it and resize it using an image editing software. Other than Google's Picasa, there are other free image editing software offered on the net that you can try. As explained in Hyperlinks and Image Links (I), the image has to be uploaded onto an image server which allows direct link to the image. Copy the image URL.

The HTML code for a picture or image is this:-

<img src="Image URL" border="0" width="80" height="15" alt="Description" />

A couple of things to note:-

1. Unlike the anchor tag, the <img> (image) tag has no closing tag.

2. In the code, src means “source” and this is where you will insert the Image URL of the picture that you wish to display on your Blog.

3. Depending on your Blog's configuration, any picture you upload may automatically have a border surrounding it. In the above example, the border is removed. If you want a border, you can change the “0” to “1” pixel or any other value.

4. When your Blog page is downloaded, the browser normally allocates a space for the images contained in your page. Sometimes, the allocated space may be bigger than the image size and when the images are finally downloaded, the contents are adjusted to cater to the images. This adjustment may sometimes be the cause of a slower download. To resolve this, it is usually preferable to insert the width and height of the image (in pixels) to let the browser reserve the exact space for the image.

5. The width and height settings can also be used to resize the image, although the better way to resize any image is to use an image editing software to adjust the image to the size that you want before uploading it.

6. The alt attribute displays the alternative text that readers will see if the images are not successfully downloaded. Some people may disable image downloads to improve the speed of internet access. For the blind readers, this alternate text is what will be read out to them by their computers. Also, search engine spiders are said to read this alternate text and it is all the more advisable to include it for SEO purposes. As a matter of practice, it is good to enter a short Description into the code.

Alignment of image

There are times when you want an image to appear on the left or right of your header or body. You can do this by inserting the alignment tags. In the following example, the image will float to the right:-

<img src="Image URL" border="0" width="80" height="15" alt="Description" align="right" />

Margin around image

The image can appear in the midst of some text and you may want to set a margin or a space around the image where the text will not intrude. The attribute “hspace” sets the horizontal space and the “vspace” sets the vertical space between the image and the surrounding text. Adding on to the above example, the final code after inserting the margin settings (in pixels) will look like this:-

<img src="Image URL" border="0" width="80" height="15" alt="Description" hspace="20" vspace="20" align="right" />

Image Links

We have discussed the image tag and its common attributes. We shall now look at how to turn the image into a hyperlink, so that when people click on the image, they will be brought to a webpage, image, sound file, video file, or document. You can also have a clickable image in your Header that will bring your readers to your Home page. The details are in the article Add Picture Banner Link to Blogger Header.

If you have followed Part I of this article and understood how text links are created, image links are formed in similar manner, except that instead of Text, we insert the image tag.

To recall, the HTML code for a text link is this:-

<a href="URL" target="_blank" title="TITLE">Text</a>

The HTML code for an image hyperlink is this:-

<a href="URL" target="_blank" title="TITLE"><img src="Image URL" border="0" width="80" height="15" alt="Description" /></a>

See the similarities? I shall briefly explain what these attributes mean and why they matter. If you wish to have a clearer idea, please refer to Hyperlinks and Image Links (I).

1. The URL is the location that you want your readers to go to when they click the image. This could point to a webpage, file or document. To test whether the URL is correct, copy the URL, paste it into your web browser and press Enter. You should be able to see the webpage, image, or document, listen to the sound file or view the video file.

2. By inserting the target="_blank" attribute, the link will open in a new browser window or tab. If you want the link to open in the same window or tab, delete it. Should you have difficulty understanding this attribute, I have an example below for you to try out.

3. The TITLE is what you see as a pop-up when you hover your mouse over the link. Similar to the “alt” attribute discussed above, this is supposedly read by search engines and will enhance your SEO. It is good practice to insert the TITLE and the Description.

4. As for the image tag code, this has been fully explained above and I shall not elaborate further. Remember that the hyperlink code has to be closed with the </a> tag as shown in the example.

Putting it together, this code:-

<a href="http://fairy-tales-fables-business.blogspot.com/" target="_blank" title="Business Fables and Management Lessons"><img src= "http://i154.photobucket.com/albums/s255/ownlblog/fablesbanner80x15.gif" border="0" width="80" height="15" alt="Business Fables and Management Lessons" /></a>

Will give you this:-



Hover your mouse over it and you will see the pop-up Title. If you click this link, it will open in a new window or tab because of the target attribute. At this link, you will notice the image that has been inserted as a background to the Header. If you would like to have your own image in your Header, you may read this article.

How to insert image link HTML code

You can insert the HTML code in your posts. See that you are in the “Edit HTML” mode and not “Compose” mode when you insert the image link code.



If you want the image link to appear on your sidebar, you can go to Template ->Page Elements -> Add a Page Element and choose “HTML/JavaScript”. Copy the above hyperlink code, paste and save. The blog directory links that you see on the left sidebar of this Blog are done using this method.

“Link to Your Blog” HTML code

Would you like visitors to be able to create a link from their blogs to yours? Putting a code for visitors to copy and paste, akin to what you see on the left sidebar of this Blog requires additional HTML tags. Briefly explained, whatever HTML code you insert into your Blog post or template will be interpreted as a code rather than just lines of text. To tell Blogger not to act on this code, you will need to put the code in a text box or a form field. This is what you can use:-

<textarea rows="4" cols="25" name="NAME" readonly="true">LINK CODE</textarea>

The rows attribute defines how tall the text input box will be and the cols attribute defines how wide, based on the number of characters. You can change the values depending on how much space you want to allocate for the text. The name attribute is more for scripting purposes and you can insert any NAME that you want. Readonly attribute locks the field and while people can block and copy the text, they cannot change it. The LINK CODE in this case is the entire hyperlink code that will link to your Blog. This hyperlink can be either a text link or an image link.

If this still sounds confusing, don't fret. What I did on my left sidebar is to go to Template ->Page Elements -> Add a Page Element and choose “HTML/JavaScript”. You can use the code I have for this Blog but change the relevant particulars to yours:-

Link to Us <p></p> <textarea rows="3" cols="18" name="Link to Us" readonly="readonly"><a href="http://tips-for-new-bloggers.blogspot.com/" target="_blank" title="Tips for New Bloggers"><img border="0" alt="Tips for New Bloggers" src="http://i154.photobucket.com/albums/s255/ownlblog/tipsbanner80x15.gif" width="80" height="15" /></a></textarea>

We have a more detailed discussion of the textarea code in our Add Text Box and Textarea article.

Further reading:

If you have a Link List or Labels in your sidebar, and would like to make the links open in new windows or tabs, please refer to the guide at Links, Labels open in New Window.

In this article, we shall address the common queries on how to configure links such that they open in a new window when clicked, the HTML code for visitors to link to your blog, the various hyperlink HTML tags and attributes, etc.

A hypertext link or text link is a piece of text which when clicked will bring you to a section of a webpage, another webpage or an electronic document. If it is an icon or image that can be clicked, it is called a hypergraphic link or image link. For simplicity, both can be referred to as hyperlinks or links.

Text Links

To create a hypertext or text link, the HTML code is this:-

<a href="URL" target="_blank" title="TITLE">Text</a>

Allow me to explain:-

1. In HTML, the <a> (anchor) tag is used to create an anchor to link from. It should always be closed with the </a> tag.

2. HREF is an acronym for Hypertext REFerence and specifies the page to link to or the place that you want your readers to be taken to. This place that we are talking about can be a webpage, image, sound file, video file, or document. Replace URL in the above code with the location of the webpage, file or document. If it is anything other than a webpage, you will have to upload it onto a server and obtain the URL of that uploaded file.

3. You can read about using free hosts like Google Page Creator and Google Groups to upload your files. 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. After uploading the file, take note of the URL of the file and insert that into the above code.

4. The target attribute tells the browser to open the link in a new browser window or new tab. If you want the readers to view the link in the same browser window, remove target="_blank" from the code.

5. The title attribute can be used for any page element, e.g. links, tables and images. Give your link a TITLE. In most browsers, when you hover your mouse over the link, the title will pop up. It is useful to insert this title as it is believed that search engine spiders read these words.

6. Text shown between the open and close of the anchor tag is what readers will see as the hyperlink. You can insert any character or words into the Text. In normal blog settings, these will either be underlined, or have a different color from the main text so that people can tell that they are clickable links.

To see how it is put together, this code:-

<a href="http://quotes-motivational-inspirational.blogspot.com/" target="_blank" title="Quotes for Blogs">Famous Motivational and Inspirational Quotes</a>

will give you this line:-

Famous Motivational and Inspirational Quotes

Hover your mouse over the link to see the title. Clicking it will open the page in a new browser window or new tab. If you are interested to do something like the scrolling text in the header of this Famous Quotes blog, you may refer to the article Scrolling Text - Marquee HTML Code.

Link to Section

If you have a long article, you may want to allow people to 'jump' to specific sections of the page so that they need not scroll a lot to locate the section they want. It can be done by using the anchor tag with name attributes.

This is best explained through an example. I have inserted this tag in the later part of this article:-

<a name="demo">Email Links</a>

The name within the code need not be called “demo”. You can call it anything you want - “top”, “bottom”, “label”, whatever.

Next, I create a hyperlink for you to click to go straight to that section.

The HTML code for the hyperlink is this:-

<a href="URL#demo">Click here to go to Email Links</a>

You can type whatever text you want within the above anchor tag. The URL is the URL of your post. To obtain this URL, you will have to save your post and refresh your page. With the URL, go back to yur post to edit it by inserting the URL of your post. Using the above code, this is what you will see and if you click it, you will jump to that section.

Click here to go to Email Links

To give you another example, I shall now use the simple “top” and “bottom” tags which you can use for your Blog. Before you click anything, here are the HTML codes:-

<a name="top"><a href="URL#bottom">Click here to go to bottom</a>

<a name="bottom"><a href="URL#top">Click here to go to top</a>

You can now click this to go to the bottom of this page and click that link again to come back to this segment.

Click here to go to bottom

Email Links

If you would like to have a link for people to click and send you an email, you can use the following code:-

<a href="mailto:EMAIL ADDRESS">Email Author</a>

Your EMAIL ADDRESS will have to be inserted into the code. This will open up the reader's Outlook Express or other default email software with your email address automatically inserted as the addressee. However, if the reader is using Gmail, Yahoo mail, Hotmail or other web-based email, he will have to log in to his account and type in your email address.

How to insert text link HTML code

You can insert the HTML code either in your posts or through a Page Element. The quick method of inserting a hyperlink is through the Blogger inbuilt tool. Look for an icon that looks like this shown in the picture below. Block the text that you want to create a link from and click that icon. Type in the URL that you want to link to and it is done.



If you want this link to open in a new window and have a title, manually type in the title and target attributes. Check that you are in the “Edit HTML” mode and not “Compose” mode when you insert the attributes.



Should you want the link to appear on your sidebar, you can go to Template ->Page Elements -> Add a Page Element and choose “HTML/JavaScript”. Copy the above hyperlink code, paste and save. The blog directory links that you see on the left sidebar of this Blog are done using this method.

If you have a number of links that you want to put on your sidebar, you may also choose “Link List” when you “Add a Page Element”. Note however that you will not be able to insert the other attributes. I shall cover in a separate article the tweaks that can be done to the template to change the attributes to the link list.

This article continues at Hyperlinks and Image Links (II)

Further reading:

If you have a Link List or Labels in your sidebar, and would like to make the links open in new windows or tabs, please refer to the guide at Links, Labels open in New Window. To have numbered or bulleted links, you may check out the article Numbered List and Bulleted List.


Click here to go to top

We wrote earlier about creating Recent Comments and Recent Posts Widgets using Blogger's “Feed” page element. It was a simple method that even non-techie Bloggers can understand and use. In the middle of last month, Blogger did a major change to the GData API and many bloggers suddenly saw broken entries in their feed widgets. Although Blogger has tweaked the Feed widget to make this work again, the widget looks odd as we shall explain below. For those who can't wait to have the Recent Comments widget up and running, we shall explain here how you can have a Recent Comments widget using JavaScript instead.

Change in Blogger Feeds

All along, for posts and comments without titles, Blogger used the first line of the post or comment as titles in the feeds. In a typical “Feed” page element, the titles are important as these are displayed as links in an unordered list format.

Blogger did a supposed bug fix and the “title” element was no longer a post snippet for posts with no title. This affected the comments feed, since comments never had a separate title field but were appended to the posts. According to Google's Pete Hopkins, the rationale was “to balance making the Atom feed a correct representation of the post - for Atom Publishing Protocol clients - and making the feed work the best in various feed readers.”

There was a lot of unhappiness among users and developers. Other than broken comment feed widgets, it affected Firefox live bookmarks as well.

Enable Comments Feed

First, we have to ensure that Comment Feeds are enabled. Once you are logged in, go to Settings -> Site Feed and switch to “Advanced Mode”. You should set the “Blog Comment Feed” and “Per-Post Comment Feeds” to either “Short” or “Full”. Do not choose “None”. Save the Settings.



Feed Page Element method

If you had followed our earlier article to insert the Comment Feed URL into the “Feed” page element, this is what you will see:-



Do you notice the gaps in between? These are the hard returns in the comments and they are not removed in the widget, unlike previously. It doesn't look as sleek now. Compare this to what we have below.

Recent Comments Widget JavaScript

The way to work around this would be to go back to using JavaScripts. We have been slow to recommend JavaScripts because there are simply too many malicious scripts out there. Most will upload their scripts onto their external sites and provide you a code for insertion into your template. The code can look like this:-

<script src="http://externalsite.com/filename.js"> </script>

When the page loads, the browser will visit that external site to read the script contained in the .js file. Because of the security risks in running unknown scripts, many users have configured their browsers to disable scripts and the scripts will not be read. Your readers may hence not be able to view the contents in the widget. Before inserting any of these scripts into your blog, ensure that they are from trustworthy sites. Even then, as we had pointed out in our article on Internet Security and Blogger Virus, there is nothing preventing the site owners from altering the script after sufficient people have linked to it.

We went through several of the Recent Comments scripts and they are mostly workable. Some allow you to fully customize the widget styles and provide user-friendly interface for easy selection of the options. It is difficult to know who wrote the first set of original script as almost all of them claimed to be the authors, even though some scripts looked rather identical.

What we did was to take a couple of them, and change and modify that to our unique script. Our simple Recent Comments widget will look like this.



We are not going to upload the script onto our site and have you link to it. Instead, we shall let you have the full JavaScript code that we have used so that you know what goes into it. Login and go to Template -> Page Elements -> Add a Page Element in the sidebar and select “HTML/JavaScript”. Copy and paste the code below.

Update: <noscript> tag added. Readers like us who have disabled JavaScript in our browsers will see a statement instead of a blank space.

<ul><script style="text/javascript"> function showrecentcomments(json) { for (var i = 0; i < 5; i++) { var entry = json.feed.entry[i]; var ctlink; if (i == json.feed.entry.length) break; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') { ctlink = entry.link[k].href; break; } } ctlink = ctlink.replace("#", "#comment-"); var ptlink = ctlink.split("#"); ptlink = ptlink[0]; var txtlink = ptlink.split("/"); txtlink = txtlink[5]; txtlink = txtlink.split(".html"); txtlink = txtlink[0]; var pttitle = txtlink.replace(/-/g," "); pttitle = pttitle.link(ptlink); if ("content" in entry) { var comment = entry.content.$t;} else if ("summary" in entry) { var comment = entry.summary.$t;} else var comment = ""; var re = /<\S[^>]*>/g; comment = comment.replace(re, ""); document.write('<li>'); document.write('<a href="' + ctlink + '">' + entry.author[0].name.$t + '</a>'); document.write(' on ' + pttitle); document.write('<br/>'); if (comment.length < 100) { document.write(comment); } else { comment = comment.substring(0, 100); var quoteEnd = comment.lastIndexOf(" "); comment = comment.substring(0, quoteEnd); document.write(comment + '...<a href="' + ctlink + '">(more)</a>'); } } document.write('</li>'); document.write('<div style="font-size:75%;text-align:center"><a href="http://tips-for-new-bloggers.blogspot.com/">Widgets by Tips for New Bloggers</a></div>'); } </script> <script src="http://tips-for-new-bloggers.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"> </script></ul> <noscript>You need to enable JavaScript to read this.</noscript>

Change these options:

1. If you want more than 5 recent comments to appear in the widget, change the value in blue.

2. The comment length is capped at 100 characters. Adjust the value in green if you want to change that.

3. You must change the part in red to your own Blog URL.

After changing the values, save the page element and refresh your Blog. You should have a Recent Comments widget showing the latest comments posted on the Blog.

Recent Comments Widget

Adding a Recent Comments widget into your sidebar is a way of acknowledging the readers' feedback and giving their comments a prominent place in the main page of your Blog. It also makes it easier for them to check for replies to their questions and for other readers to follow up on topics which they may find interesting. This widget is especially useful if you have numerous comments to your Blog posts. As part of our writeup, we shall also explain how you can remove the “nofollow” tag in the Comments section of the template so as to allow the links in these comments to be visited by search engine spiders.

While we can use JavaScripts to call for the comments, we would rather not do so because the widget will not be displayed in many browsers that disable the running of JavaScripts. We shall therefore suggest using the feed widget method to display these recent comments.

Update: For those who want to use the JavaScript method, refer to our article Recent Comments Feed Widget.

First, we have to ensure that Comment Feeds are enabled. Once you are logged in, go to Settings -> Site Feed and switch to “Advanced Mode”. You should set the “Blog Comment Feed” and “Per-Post Comment Feeds” to either “Short” or “Full”. Do not choose “None”. Save the Settings.



Go back to Template -> Page Elements -> Add a Page Element in your sidebar and select “Feed”. You will be prompted to enter a Feed URL. The Feed URL we entered is this:-

http://tips-for-new-bloggers.blogspot.com/feeds/comments/default

This is the Atom Feed for the Blog comments. You can alternatively insert the RSS Feed for Blog Comments as follows:-

http://tips-for-new-bloggers.blogspot.com/feeds/comments/default?alt=rss

Change the portion (in red) to the URL of your own blog. Once you have entered that, this is what you see on the screen.



Insert a Title. The maximum number of links shown in a feed widget is 5. This is a limitation in using this method. But we think it is acceptable and having too many recent comment links may clutter the sidebar. You can decide whether or not to display the dates and name of the authors. When you are satisfied with the setting, click to Save the Changes. Drag and drop the widget to the relevant part of the template and Save the Template.

Nofollow attribute in Comments

If you have had your blog up and running for a while, you may have come across comment postings in your Blog which are plain advertisements of their own blogs. They usually include hyperlinks to their Blogs so as to raise the profile of their sites in search engines. While there is technically nothing wrong with that, your readers may be annoyed to have to sieve through a list of “irrelevant” comments just to seek an answer to a point in the posts. Many Bloggers detested such practise and labeled this act as “comment spam”. Google did not like it either, and introduced a standard “nofollow” tag to all Blogger.com blog comments. It literally tells the Google search spider to ignore all the hyperlinks in the comments. Hopefully, this will deter the spammers who now receive no search engine ranking benefits by putting their Blog links in the comments.

As a Blog owner, you can decide whether you want to remove this attribute. The advantage of removing it is that you will encourage more readers to post comments since the search engines will crawl their sites if they post their Blog links in the comments. The disadvantage is that you may have to deal with constant abuses of this system.

If you want to remove the “nofollow” tag in the Blog comments to allow search engines to crawl the comment author's links, go to Template -> Edit HTML and check the “Expand Widget Templates” box.

Scroll to these lines (you can search using Ctrl-F in most browsers) and remove the parts (shown in red):-

<dl id='comments-block'> <b:loop values='data:post.comments' var='comment'> <dt class='comment-author' expr:id='"comment-" + data:comment.id'> <a expr:name='"comment-" + data:comment.id'/> <b:if cond='data:comment.authorUrl'> <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a> <b:else/>

And

<dl class='comments-block' id='comments-block'> <b:loop values='data:post.backlinks' var='backlink'> <div class='collapsed-backlink backlink-control'> <dt class='comment-title'> <span class='backlink-toggle-zippy'>&#160;</span> <a expr:href='data:backlink.url' rel='nofollow'><data:backlink.title/></a>

Save the template.

Recent Posts Widget

One way to let readers locate the recent posts is to have an “Archive” page element in the sidebar. It sorts the articles by dates. However, it is not ideal for those who do not have active Blogs or any new post in the last couple of months. These people may want to display the links to recent posts, regardless of the dates. Even if you have an active Blog, regular visitors may want to view your recent posts only, and a link widget showcasing these recent post links would be appreciated.

Again, the Feed widget method seems to be by far the easiest to adopt. Just like before, go to Settings -> Site Feed and switch to “Advanced Mode”. This time, see that “Blog Posts Feed” is set to either “Short” or “Full”. Do not choose “None”. If you have an external feed address through Feedburner, Feedblitz or any other service, you can enter that Feed URL so that all feeds will be redirected to that address. Save the Settings.



To insert the Recent Posts widget, go back to Template -> Page Elements -> Add a Page Element in the sidebar and select “Feed”. You will be prompted to enter a Feed URL. If you do not have an external Feed address, the URL to enter is this:-

http://tips-for-new-bloggers.blogspot.com/feeds/posts/default

This is the Atom Feed URL of your Blog Posts. Instead of the Atom Feed, you can insert the RSS Feed URL as follows:-

http://tips-for-new-bloggers.blogspot.com/feeds/posts/default?alt=rss

In our case, for example, we have an external feed address at Feedburner and instead of the above address, we keyed in:-

http://feeds.feedburner.com/TipsForNewBloggers

Change the portion (in red) to the URL of your own blog. Once you have entered the Post feed address, you can change the variables such as Title, number of links to display, dates and author names.



Save the changes. Move the element to the preferred part of the template and Save Template.

Customize the Widgets

To differentiate the Recent Comments or the Recent Posts widgets so that they do not appear to be ordinary link widgets, add some dynamic effects to these links. We gave some examples of the various styles in our article on Links - Hover and Rollover Effects.

After creating your widget, go to Template -> Edit HTML and scroll to somewhere near the bottom. You will see something like this:-

<b:widget id='Feed1' locked='false' title='Recent Comments' type='Feed'/>

The ID Feed1 is what we need to know. As you create more feed widgets, there will be more IDs like Feed2, Feed3, etc. We can create style definitions for each of these widgets.

Back at the top of the template, you see a list of links and hover styles like this:-

a:link { color:$linkcolor; text-decoration:none; } a:visited { color:$visitedlinkcolor; text-decoration:none; } a:hover { color:$titlecolor; text-decoration:underline; }

We can insert after that another set of rules for the Feed1 widget. For example, we can insert this:-

#Feed1 { background: #ffff66; } #Feed1 a:link { color:#4CC552; } #Feed1 a:visited { color:#6D7B8D; } #Feed1 a:hover { color:#F88017; background: #E3E4FA; }

Our widget will have a background color yellow (#ffff66). The links are green in color (#4CC552). Visited links turn grey in color (#6D7B8D). When the mouse hovers over the Recent Comments link, it appears orange (#F88017) with a lavendar backdrop (#E3E4FA). Try different combinations and styles by inserting various color codes from our Color Code Chart. Always “Preview” the template to view the changes. Save the template only when you are happy with the outcome.

Further reading:-

Check out more widget ideas that you can add to your sidebar in our Blog Widgets, Gadgets and Add-ons guide.

This tutorial explains how you can add a script to allow readers to view your English site in other foreign languages. As you can see on the right of this page, a reader needs only to click the relevant country flag to read this site contents in his preferred language.

English is not the most popular language in the world. In fact, according to many reports, the Chinese language (Mandarin) is certainly the most widely spoken language. In the internet community, the other popular language platforms are arguably Spanish, Russian, Arabic, Portuguese, Malay, Italian, French, Japanese, and Korean.

Translation from English to other languages

If you have a blog written in English, it therefore makes much sense to be able to reach out to the non-English speaking population as well. There are several online translation tools, the popular free tools being AltaVista's Babel Fish translation and Google's Language Translator. WorldLingo is no longer a recommended tool, as the website translator has a translation limit of 500 words, beyond which you have to pay a monthly fee for their service.

For this site, I have used the Google Language Translator. Google is able to translate English website contents into Arabic, Chinese, French, German, Italian, Japanese, Korean, Portuguese, Russian, and Spanish. The JavaScript used here can be applied to most of the blogging sites like Blogspot, Typepad and Wordpress. Copy the following script and paste it at the part of the template where you want your language translator to appear.

<form action="http://www.google.com/translate" > <script language="javascript" type="text/javascript"> <!-- document.write ("<input name=u value="+location.href+" type=hidden>") // --> </script> <noscript><input name="u" value="http://tips-for-new-bloggers.blogspot.com/" type="hidden" /></noscript> <input name="hl" value="en" type="hidden"> <input name="ie" value="UTF8" type="hidden"> <input name="langpair" value="" type="hidden"> <input name="langpair" value="en|ar" title="Arabic" src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/358406/gse_multipart12399.png" height="20" type="image" width="30" onclick="this.form.langpair.value=this.value"> <input name="langpair" value="en|zh-CN" title="&#20013;文（简体）/Chinese (Simplified)" src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/546049/gse_multipart12397.png" height="20" type="image" width="30" onclick="this.form.langpair.value=this.value"> <input name="langpair" value="en|zh-TW" title="&#20013;文（繁体）/Chinese (Traditional)" src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/208681/gse_multipart12398.png" height="20" type="image" width="30" onclick="this.form.langpair.value=this.value"> <input name="langpair" value="en|fr" title="Fran&#231;ais/French" src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/327620/gse_multipart12413.png" height="20" type="image" width="30" onclick="this.form.langpair.value=this.value"> <input name="langpair" value="en|de" title="Deutsch/German" src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/734899/gse_multipart12400.png" height="20" type="image" width="30" onclick="this.form.langpair.value=this.value"> <input name="langpair" value="en|it" title="Italiano/Italian" src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/306145/gse_multipart12401.png" height="20" type="image" width="30" onclick="this.form.langpair.value=this.value"> <input name="langpair" value="en|ja" title="&#26085;本語/Japanese" src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/443122/gse_multipart12402.png" height="20" type="image" width="30" onclick="this.form.langpair.value=this.value"> <input name="langpair" value="en|ko" title="&#54620;국어/Korean" src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/581031/gse_multipart12403.png" height="20" type="image" width="30" onclick="this.form.langpair.value=this.value"> <input name="langpair" value="en|pt" title="Portugu&#234;s/Portuguese" src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/670301/gse_multipart12404.png" height="20" type="image" width="30" onclick="this.form.langpair.value=this.value"> <input name="langpair" value="en|ru" title="&#1056;усский/Russian" src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/111692/gse_multipart12405.png" height="20" type="image" width="30" onclick="this.form.langpair.value=this.value"> <input name="langpair" value="en|es" title="Espa&#241;ol/Spanish" src= "http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/998398/gse_multipart12407.png" height="20" type="image" width="30" onclick="this.form.langpair.value=this.value"> </form>

Points to note:-

1. For those using Blogspot, once you have logged into your Dashboard, go to Template-> Page Elements. Add a “Page Element” and select “HTML/JavaScript”.

2. Copy the above JavaScript. Under the “value” (in red), you will see the URL of this website. Please change that to the URL of your own website. Save and refresh the page.

3. If you want a slightly bigger flag, you can increase the width of the images, for example, from “30” to “36” and the height from “20” to “24”.

4. Should you come across a translation that doesn't look right, you can always suggest to Google a better translation to help them improve their translation quality.

Translation from other languages to English

If you have a site written in another language, you can also have a translation tool on your Blog to translate it into English. At the moment, Google is able to translate Arabic, Chinese, French, German, Italian, Japanese, Korean, Portuguese, Russian, and Spanish sites into English.

Go to the official Google Language Tools site. Key in your Blog URL at the place circled in the picture below. Choose the languages e.g., “Italian to English”.



Once you click “Translate”, you will be taken to the translated page. Copy the translated page URL in the browser. We have to insert this URL into the HTML code.



Next, login to your Dashboard, under Template -> Page Elements -> Add a Page Element, choose HTML/JavaScript at the place where you want to put your translation flag.

If you want a United Kingdom flag, copy and paste this code into the page element.

<a href="translated page URL" title="English"><img border="0" alt="Google Translation" src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/212122/gse_multipart16503.png"/></a>

If you want a United States of America flag, use this code instead.

<a href="translated page URL" title="English"><img border="0" alt="Google Translation" src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/724501/gse_multipart16505.png"/></a>

Please remember to insert the translated page URL into the code. If you wish to resize the picture by specifying the width and height, or if you want to have readers go to a new window when they click the link, you may read the article on Hyperlinks and Image Links (II) to see how you can do that.

Save and refresh your Blog to see the translation flag.