How to make all links open in new windows

This request to make all hyperlinks pops up every now and then so might as well make a post for it. To make all links open in new window is amazingly simple. Just sign into
DASHBOARD > DESIGN > EDIT HTML
to open template editor

Use keyboard shortcut ctrl+F to find <head> and immediately after that, add a single line <base target='_blank' /> so that it become

<head>
<base target='_blank' />

Save the edited template and viola, all links in your blog will now open in new tabs or windows.

Note: Blogger is now XHTML so all tags must have matching closing tags or be self closing. The above tag is self closing because it has that forward slash / at the end of the tag.

Template Designer: How to increase entire blog width beyond maximum

The new Blogger Template Designer has made it very easy to change overall blog width as well as the width of the main column and the sidebars. All you need to do is to sign into Dashboard, click DESIGN > TEMPLATE DESIGNER > ADJUST WIDTH and you will be provided with sliders to drag and drop to whatever values your heart desires, then click APPLY TO BLOG to save the new settings (see screenshot below):



Not only that, you can view the result of your selected changes below and if horrified by your changes, just click RESET WIDTHS TO TEMPLATE DEFAULT. (Note that while there is no slider to adjust the width of the main column, it would be indirectly set by the overall width - whatever width you have set for the sidebar)

However with the Simple (and I believe the others too) template, the overall width is limited to maximum 1000px. So what do you do when you want your overall blog width to be greater than 1000px.?

Update: It may be interesting for you to read the comment by Vanja Milicevic and my responses before you change your blog width to wider than 1000px. However, if you have specific reasons for not worrying about getting that inconvenient horizontal scroll bar like for example you upload a lot of large photos, it may still be a good idea to have a wider template and main column

Well, while in the DESIGN tab/mode, click EDIT HTML to open the template editor and search for these codes (use ctrl+ F and search for, say, <b:template-skin> or any portion of the codes below:

<b:template-skin>
<b:variable default='930px' name='content.width' type='length' value='1000px'/>
<b:variable default='0' name='main.column.left.width' type='length' value='0px'/>

then change that 1000px to whatever values you fancy and you would have changed the overall blog width.

BTW the default for the overall blog width is 930px which is roughly the value you would need to set in order to optimize your blog for 1024x768 screen resolution which is what many web designers are doing because the previous lowest denominator 800x600 screen is now used by very few people.

Easily create tables with Windows Live Writer

Hard coding the HTML for a table is very tedious, but here is an easy way to do it. Go download Windows Live Writer and install it into your computer as I have found with this test post Blogger versus Wordpress Comparison that Windows Live Writer is a good tool to simplify publishing tables.

(Writer is part of Windows Live Essentials. You can download just Writer or all of Windows Live Essentials. Windows Live Essentials 2011 includes Messenger, Photo Gallery, Movie Maker, Mail, Writer, Family Safety, and Windows Live Mesh, plus Bing Bar, Messenger Companion, Microsoft Silverlight, and Outlook Connector Pack (Microsoft OutlookHotmail Connector and Microsoft Outlook Social Connector Provider for Windows Live Messenger).

Read rest of post >>>

How to link to a location in different page

The previous post explain how to link to a location in the same page. In summary, it would be as follows:

The hyperlink HTML is written as

<a href="#key">some text</a>

where key is any text you would like to use as the key, and the location to which you want to link to is preceded by

<a id="key" name="key">>/a>

To link to a location in a different page, it will be almost exactly the same except the #key will now be preceded by the URL of the page to which you want to link to so it now become

<a href="URL#key">some text</a>


For example, the URL of the previous post is http://goo.gl/bB0Iu (permalink shortened using Google URL shortener)

Thus, I write the hyperlink HTML as

<a href="http://goo.gl/bB0Iu#linksamepage">some text</a>

As I have used as the key "#linksamepage".

Try clicking http://goo.gl/bB0Iu#linksamepage and see where it takes you.

How to link to a location in same page

It is often convenient to create a hyperlink to another location in the same post or webpage. For example, in a post explaining AdSense Privacy Policy Generator for AdSense publishers, there is a whole section on the relevant portion of AdSense Program Policies before the actual content on how to use an AdSense Privacy Policy Generator. For the convenience of visitors who have no interest in reading about AdSense Program Policies and just want to learn how to easily create the required policy for their blogs, it is thus good to create a hyperlink at the beginning of the post so that they can click on it to bypass the unwanted portion of the post and jump straight to the portion explaining how to create the AdSense Privacy Policy with the generator.
Read rest of post >>>

Styling the blog date header

A reader asked: " I really want to make a different date header!"

Well this can be done via editing the Read rest of post >>>

HTML textarea tag replaces scroll box

A blog reader by the name of Kevin of http://www.thebrosource.com/ alerted me to the <textarea< tag in place of the more complicated codes for scroll box. I tested it at Testing Blogger: testarea tag in place of scroll box.

The code is as follows:
<textarea cols="50" rows="30">type your text here</textarea>
where cols="50" defines the box for the text area to be 50 characters wide and rows="30" defines the number of rows to be 30. Note that the test shows that you should type the text without using the ENTER key otherwise the line break will be represented by the line break tag <br />

More details on the usage of the textarea tag at W3schools: HTML textarea tag

30+ Pure CSS Horizontal Menus Tutorials

The navigation menu of a website is very important for that website. It gives more attraction your website or blog.Also it will very useful to navigate through your website very easily without confusing.So every web master should give special attention for the top navigation menu of their websites.Here I listed below some of best CSS horizontal menu collection with full configuration tutorials

Attractive Subscribe Section + Search Box For Blogger

In this article,I am going to explain how to add more attractive Subscribe Section + Search Box to your blogger blog.This subscribe section is included Feedburner feed and Email subscriptions boxes,Twitter and Facebook boxes for your Twitter and Facebook profiles and Social networking buttons(Digg,Twitter,Facebook,Stumbleupon,Delicious) to share your articles among social networks.These social

How to center post title (customization)

If you want to center (or align left or align right) the post title, sign into Dashboard > DESIGN > EDIT HTML to open the template editor and search for .post h3 (use ctrl+F) or code that may look something like those below (code below for Minima template, yours may be slightly different):

Reminder: Always backup template and backup gadgets before editing the template.

.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}

The just add this line text-align:center;

.post h3 {
text-align:center;
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}

preview and if OK, save template.

Update: Different template may define post title differently. For example, a commentator found that for her, it was
h3.post-title {

If you want to align the post title to the left or to the right, just substitute text-align:center; with either text-align:left; or text-align:right;

Note: If you can't find the relevant code, let me know what template you are using via my contact form

How to hide blog date header

While blogs started as web logs or weblogs (chronological publication of personal thoughts or diary) and thus characteristically have a date header like the one above this post, but because blogs have now become a convenient way of putting content online, many have been using blogs for other purposes more like a typical website, many bloggers want to get rid of the typical date header.

That is not difficult to do. Sign into Dashboard > Design > Edit HTML to open the template editor and look for the block of code like the one below (for the Minima template, yours depending on your template may be slightly different):

/* Posts
-----------------------------------------------
*/
h2.date-header {
margin:1.5em 0 .5em;
}

and just add this line: visibility:hidden; for example like below:

/* Posts
-----------------------------------------------
*/
h2.date-header {
visibility:hidden;
margin:1.5em 0 .5em;
}

and the date header will be gone.

Make images uploaded via Blogger unclickable

Many bloggers want their uploaded images not clickable probably because they don't want their images especially the enlarged version to be copied. Previous post How to make images not clickable (not enlarge) provided a method in varying circumstances may not work.

Here is a more efficient method and failsafe method. All one need to do is after uploading an image via Blogger image upload icon to switch to Edit HTML mode if one is not already in this mode.

Now depending on which post editor you had use, the HTML codes used to display images that Blogger generate upon uploading is different. We will deal with the old post editor (my preferred post editor) first as it is easier to explain and deal with the new updated post editor later:

CODES FOR THE OLD POST EDITOR:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggSy7opQ4DpA5L_nLA7XeCWYhLTmmFbObLQDaYgzD2ukOS4vZJCiv6LZBeLT5jNFMl3ljtTWyAkPbTOn0ddLtP6eJ9EdsLHzTMXzM1jG3EmVEqvIIlOqBtSb7XBML2YPdM3iVW9hQX79-n/s1600-h/BlogStar.gif"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 178px; height: 67px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggSy7opQ4DpA5L_nLA7XeCWYhLTmmFbObLQDaYgzD2ukOS4vZJCiv6LZBeLT5jNFMl3ljtTWyAkPbTOn0ddLtP6eJ9EdsLHzTMXzM1jG3EmVEqvIIlOqBtSb7XBML2YPdM3iVW9hQX79-n/s400/BlogStar.gif" border="0" alt=""id="BLOGGER_PHOTO_ID_5373085274943228530" /></a>

Please note that only the code in black is needed to display the image. Those highlighted in red are not needed to display the picture and can be removed safely leaving only

<img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 178px; height: 67px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggSy7opQ4DpA5L_nLA7XeCWYhLTmmFbObLQDaYgzD2ukOS4vZJCiv6LZBeLT5jNFMl3ljtTWyAkPbTOn0ddLtP6eJ9EdsLHzTMXzM1jG3EmVEqvIIlOqBtSb7XBML2YPdM3iVW9hQX79-n/s400/BlogStar.gif" border="0" alt=""id="BLOGGER_PHOTO_ID_5373085274943228530" />.

Thus to make the image not clickable, all you need to do is just to delete those codes highlighted in red. I have tested that successfully over at Test to make images uploaded via Blogger not clickable.

New post editor

We will now deal with the new post editor which is not my preferred post editor. The codes to display the uploaded image generated by Blogger with the new post editor is as follows, again with the code to display the image in black while the codes in red are to make the image clickable to display an enlarged image. The codes in blue is to center the picture and can either be removed or left in place (note: center will be replaced by left or right if you had elected to float the image to the left or right but that will not affect the explanation to make the image not clickable):

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2IYX661zbfwqkcA0MOfaAkctjbZSBHlU670B_8ZiksxeY6PsIhZutn4bl0-b5HGLYtwvI921tk7eaDYcQy8lJpWiEmRu7gc1NGnAyy15AEwXmPptv2IJhl4K1BplLij_IELAJJYpx-uWE/s1600/BlogStar.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2IYX661zbfwqkcA0MOfaAkctjbZSBHlU670B_8ZiksxeY6PsIhZutn4bl0-b5HGLYtwvI921tk7eaDYcQy8lJpWiEmRu7gc1NGnAyy15AEwXmPptv2IJhl4K1BplLij_IELAJJYpx-uWE/s320/BlogStar.gif" /></a></div>

Again, only the code in black is needed to display the image while those in red are used to make the image clickable to enlarge the image while those in blue is meant to center the image. Thus if you want the image not clickable, just delete those highlighted in red (<a....> and </a>) and those highlighted in blue too leaving those in black intact and the image will still be displayed. Alternatively we can just delete those codes in red to make the image unclickable while leaving those in blue intact to center (or float) the image.

Easily make HTML sitemap table of content javascript

A commentator at Blogger Tips and Tricks (HTML) Sitemap (Table of Content) said: "Hi Peter, This sitemap is really good and helpful. I would like to add a sitemap like this one to my blogger blogs. Can you please give me a detailed reply on creating a sitemap like this and loading it to blogs and then to Webmaster tools."

Fortunately for me, that is not difficult a task for all you need to do is to first create a post or better, a static page, making sure you are in the Edit HTML mode, copy the following Javascript:

<script style="text/javascript" src="http://www.abu-farhan.com/script/daftarisiblogger/blogtoc-min.js"></script>
<script src="http://myblog.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>

making sure to replace http://myblog.blogspot.com with the actual URL of your blog. To make this clearer, below are 2 examples of the codes I used to create such HTML sitemaps of 2 of my blogs, one of which is Easily make HTML sitemap for your blog using Javascript

Simple text horizontal navigation bar

Skip to instructions if you are only interested in reading the instructions on how to do create the navigation bar. You may also be interested in How to create static pages as things like contact forms, About this blog, etc is ideally suited to using Pages and the horizontal navigation bar.

Preamble

There are 2 things that we want in designing a blog or website. One is to make it easy for visitors to find content and the other is to make full use of the portion above the fold. And both of these can be fulfilled by creating a horizontal navigation bar either just below the Header or even within the Header itself.

Because I am comfortable with tables (<table>) I have used I have used table to create horizontal navigation bar before. However, current opinion is table should be used for data, and navigation bar which contain links are not data and the proper HTML tag to use for navigation bar should be list (<ul>). This has to do with web sematic which I think relates to how a computer, not a human, see a website. However, this will involve CSS (Cascading Style Sheet) and a lot of coding. The method I am going to describe here just use a simple <div> tag and http://bloggerfordummies.blogspot.com/2008/07/dummies-guide-html-tutorial-hyperlink.html" target="_blank">hyperlinks and is simple to do.

I am not a trained programmer so don't know yet the significance of web sematic and don't know yet what is the significance of using this method on the blog, SEO, whatever, but any significance I doubt it will have a large bearing on the blog, and I quite like the simplicity. If you have doubts regarding using this method, perhaps you can wait until I publish a new post on using CSS. In the meantime, I am very happy using this method for my blog.

How to create simple text horizontal navigation bar without CSS

Step 1: extra "Add a gadget" in the LAYOUT for the blog Header. Briefly, this just involved the simple step of finding editing showaddelement='no' to showaddelement='yes' in the template.

Step 2:Go to LAYOUT, click ADD A GADGET in the blog Header section and choose a HTML/Javascript gadget (formerly called page element). Then type in this HTML, with any number of links you wish(the first code is just to show how it is done, the following codes are to show how to make it look better):

<div>
<a href="URL 1">Link 1</a>
<a href="URL 2">Link 2</a>
<a href="URL 3">Link 2</a>
</div>

where you should change the URL and the "Link 1" to any text that describe the page you want to link to like HOME, ABOUT US, etc.

Now if you use the code above, the links will all be bunched together. If you don't like that, you will have to add space by using the space bar. You can only use the space bar once. If you want to add more space, then you will have to type where nbsp stands for non breaking space.

Further, you may also want to consider putting a vertical bar | (one with the backslash key) to separate the links like what I have done for this blog. I have also experimented with [ ] as separator and if you want to see how it looks, refer to FAQ for Blogger Tips and Tricks

The codes for the above will be something like this:

<div>
| <a href="URL 1">Link 1</a> |
| <a href="URL 2">Link 2</a> |
| <a href="URL 3">Link 3</a> |
</div>

Step 3:If you are happy with the navigation bar above the Blog Title, you may leave it as it is. Otherwise, go back to LAYOUT and drag the gadget to wherever you want.

If you still want to embellish the navigation bar, perhaps you may want to add background color to distinguish the navigation bar from the rest of the blog Header. You can add an attribute background-color:red to the div tag like this

<div style="background-color:red;>
| <a href="URL 1">Link 1</a> |
| <a href="URL 2">Link 2</a> |
| <a href="URL 3">Link 3</a> |
</div>

I have used the example red for the color, but you can use any color or use HTML color code #E1E1E1; for more color choices. For tasks related to color, I have found the free Iconico Color Pic and Color Blender invaluable. For color, I may write a general blogging tip on colors for blog later. In the meantime, this getting started with Color Pic may be useful.

Picture to link to label page or any webpage

"I have a picture on my side bar, I would like to link it to all labels containing say books. There are five post under that label, and when my guest push the picture of the books, I would like the page to pop up only the posts with the label, Books."

Well, that is easily done. First you have to be familiar with hyperlink, namely using <a href="URL of target webpage">anchor text (some text descriptive of target webpage)</a>. And since you want the link to go to the label page "Books", that URL will be the URL of the label page of "Books" which you can get by right-clicking on the label "Books" in the sidebar and selecting "Copy link location".

You also need to be familiar with uploading pictures to the web and getting the picture URL like what is described in Using Blogger to host pictures.

Now the required codes are

<a href="URL of target webpage"><img src="picture URL" /></a>

and if that is not clear enough, ask.

Display images in larger sizes

"why is it that my images are big but when i upload them they become so small?"

When you use Blogger's photo upload icon to display images, you can chose 3 different default sizes - large, medium and small. If your image is very large, Blogger will shrink it to a smaller size for display. However, if you are in the COMPOSE mode, you can use your mouse to grab the edge or the side and drag-drop it to create a displayed image that can be larger or smaller than the default.

Alternatively, you can use the HTML image tag <img src="photo URL" /> to display it in the original size or use that tag with a width attribute <img src="photo URL" width="some number" /> to display it in whatever size you choose.

Related posts:
Using Irfanview photo editor for your blog

How to add caption to photos

New Blogger template for posting large photos

Bubbleshare, another way to display photo album

How to make clickable (hyperlink) pictures

Put photo of authors in post footer

Putting author's photo in center bottom of post

Add series of photos in blog footer












More later.

HTML: non-breaking space and its applications

A frequent complaint of bloggers is that when they want more than 1 spacing (beyond the single space inserted by the space bar like between here and      here), Blogger will display only 1 single space irrespective of how many times one press the space bar. Now how did I get the extra spaces above within the bracket above?

The answer is simple. Where I want a space, I type . If I want more space, then all I have to do is to type in more .

A frequent use of non-breaking space is when making tables. For example, we may specify <table border="1"> to create a border for a table. However, if a cell is empty, the border for that cell may not be displayed. In order to force the table to display an empty cell with a border, one can type into the cell a so that it is "empty but not empty if you know what I mean" and will a blank cell with border.

  Other uses of the non-breaking space is to make indent like in the beginning of this paragraph. The non-breaking space can also be used in comments as I will demonstrate by leaving a comment after I publish this post.

Hyperlink: Difference between target="new" and target="_blank"

If you are not familiar with the HTML hyperlink tab <a>, go first read anchor text and how to make hyperlink open in new window or tab and/or making active (clickable) hyperlink in posts and comments. Please take note that the target attribute has been deprecated and will not pass W3C XHTML 1.0 Strict validation. So if W3C validation is important to you, you should not use the target attribute.

To make hyperlink open in new tab or window, one uses either the target="_blank" or target="new" or target="anything" where anything is exactly that, any word, even meaningless one like "abtjsgj". Now I have received query what is the difference between them. Before publishing this post, I have tested the hyperlinks with different attribute at testing target attributes for hyperlinks where you can try out the links yourself.

When you use the target="_blank" attribute for the hyperlink <a> tag, all links with that attribute will open in new windows or tabs. When you use the target="new" or target="anything" attribute, the first click on any link with that attribute will open in a new window called new or anything. Any subsequent click on any link with that attribute will open in the same window called new or anything.

Anchor text and how to make hyperlink open in new window or tab

This post is for those very new to HTML, but want their hyperlink to open in new window or tab. I have already published a short post How to make links open in new windows but apparently there are some who still have problems understanding: "I'm not very tech savvy and I tried your solution, the code you provided, with the website taking the place of the word "Description" correct?" so let's try to make the instructions and explanation clearer.

First, an explanation about anchor text (that is what I called DESCRIPTION above). That is some text in your post that you want highlighted (normally blue). For example, I want these text: Make active (clickable) links in post and comments to link to another of my post on hyperlinks. So I highlight those text by clicking and dragging the mouse over those text (see screen shot below):



These text is know as the anchor text. After highlighting the anchor text, click on the "insert link" icon and a pop-up will appear where you are asked for the URL of the webpage you want the anchor text to be linked to:



Type or copy-paste the URL of the webpage you want to be linked to, click OK and if you are in the EDIT HTML mode, you will see the highlighted text being replaced by the hyperlink tag as follows:

<a href="http://www.bloggertipsandtricks.com/2006/09/how-to-make-links-open-in-new-windows.html">How to make links open in new windows</a>

Now if you want that hyperlink open in new window, all you have to do is to edit the hyperlink tag by adding target="_blank" as shown below:

<a href="http://www.bloggertipsandtricks.com/2006/09/how-to-make-links-open-in-new-windows.html" target="_blank">How to make links open in new windows</a>

After this, I hope you now understand fully what is meant by hyperlink, anchor text and how to make hyperlink open in new window or tab.

Update: If you don't want to do this individually but wants all links in your blog to open in new windows without you having to do anything, then refer to How to make all hyperlinks open in new windows

HTML/Javascript gadget for blogroll

It is good practice to backup template and backup gadgets. However, not all Blogger gadgets (formerly called Page Elements) can be backed up. The Blogger Link List (blogroll) cannot be backed up. If your blogroll is very long, you may want to put the blogroll in a scroll box. The Blogger Link List (blogroll) also cannot be contained in a scroll box.

My preference for a blogroll had always been to use a HTML/Javascript gadget and hyperlinks instead. I shall detail below the HTML for such a purpose below:

<a href="URL of blog no. 1">title of blog no. 1</a><br />
<a href="URL of blog no. 2">title of blog no. 2</a><br />
<a href="URL of blog no. 3">title of blog no. 3</a><br />
<a href="URL of blog no. 4">title of blog no. 4</a><br />
and so on.

There is one more thing you can do with this method that you cannot (not really cannot, but you will have to tamper with the template) with Blogger Link List - make the links open in new tabs or windows. When you use the HTML/Javascript gadget to make your Link List, all you have to do is to add target="_blank" or target="new" as shown below


<a href="URL of blog no. 1" target="_blank">title of blog no. 1</a><br />
<a href="URL of blog no. 2" target="_blank">title of blog no. 2</a><br />
<a href="URL of blog no. 3" target="_blank">title of blog no. 3</a><br />
<a href="URL of blog no. 4" target="_blank">title of blog no. 4</a><br />

Plus you can save such a blogroll by copying them into a Notepad file and saving them for future uses.

Update: This post How to change template without losing widgets says widgets (gadgets or Page Elements) can be transferred from the old template to the new template. I have not and probably will not test it out, but if true, you can sort of backup your gadgets including Link List by backing up your template. I probably would not test it out because I have faced enough problems getting bX errors or "your template cannot be parsed ....." messages when changing template for me to prefer to stick with what I have described at backup gadgets (page elements). If you ever try to do what the above post and succeeded without getting error messages, please leave a comment