How to make Web link in a LinkBar

Linkbar with simple text links:

1) From your Blogger dashboard, click "Layout". You should now be at the "Page Elements" page. What we want to do is create a link under your navbar that says "add a Gadget". The first thing you will need to do is to manually change the HTML in your blog to increase the places where you can add page elements. If you have page elements at the top, skip to step 6.

2) Click on your Layout tab and then click 'Edit HTML', Once there hit 'Ctrl + F' to search your HTML template and type in showaddelement to locate the proper place in your HTML code to make changes. Now look for a place in the code that says: 

Change the max widgets to 3 and the showaddelement to yes - You will now have two extra places where you can add page elements.

3) Scroll down a little further and find the place in the code reading:

Change the showaddelement to yes. You should now see options in your template to add page elements before and after your Blog Title.

4) One final place to change the code: Scroll down to where you see the code reading:

Change showaddelement to yes

5) You should now have an 'Add a Gadget' option between the Blog Title (header) and the blog post section. This is the place where you would select 'Add a Gadget' to add a horizontal navigation or menu bar. Once these changes have been made, click 'preview' to make sure that the changes are appearing correctly. Once you have verified that the changes appear correct, click 'save template'. You are now ready to add your links.

6) Write a new post for each page you want to link on your menu bar. The most common are Home, About, Favorites, Contact, but you could do anything. The links you use will be the URL for each specific post.

• For Home, it will be your blog URL.
• For Contact, it will be mailto:youraddress@email.com
• For an individual post, right click the post title, and "copy link location"
• For a label category, right click the label name, and "copy link location"

7) On your Template/Layout, once at your Page Elements, click the rectangle under your 'Header', which says 'Add a Gadget'. Now in your gadgets select 'HTML/JAVASCRIPT'. Now add this code- click on the text to download.

you can add as many lines as you like, you can add spaces between them to space the text out a bit.

8) Then move (click and drag) the new page element just under your header. 'Preview' to see if you want to change anything, if everything looks good then click 'save'. Now you should have a linkbar- if you are having problems go back and review the steps.

Read more...

How to Design Your Own Blog

Use These Most Popular Web Design Tools

1. Firebug

Firebug is a web development tool I discovered by accident. Another web designer was looking at my blog, and emailed me some suggested improvements. I had no idea how that person knew some of my code, so I asked. The reply was Firebug.

Firebug is a Firefox web development tool that allows users to peek inside the CSS, HTML, and Javascript of any website on the web browser. It gives users a way to check out elements on an HTML page. From here you can tweak Javascript, CSS, or HTML on any live site. There are also diagnostic and debugging tools along with several plugin extensions to augment your Firebug plugin.

2. Hex to RGB Converter

While there are many of these out there, I have found 321Webmaster’s the most reliable and handy to put in my web design tool belt. Before I began digging into my website’s code, I had no idea what a hex code or RGB stood for. In computer language, everything is code and very specific code is used to get specific colors. We are way past the jumbo 64 colors Crayola box when it comes to web design colors available.

A hexadecimal value, or HEX, is some crazy mathematical equation used to tell a computer what color to use. When designing a web page, HTML code will use a hex value or RGB, or (R)ed, (G)reen, and (B)lue, each color having an assigned number between 0 and 255. However, in web design, code can be in either the hex code format or RGB, so it is handy to have a converter to get each of the values.

3. Colorzilla

Colorzilla is another great Firefox add-on for picking up colors on websites. Before I discovered this handy little tool, I would have to try and eyeball a color on the website or dig into the code to see the Hex code or RGB code to apply it to my website. That was a bit time consuming!

This Firefox extension gives developers color design tools like the Eyedropper, ColorPicker, and other goodies. It installs on your status bar for ease of use. The information gives RGB and Hex code, along with other formats.

4. Colour Lovers

If you are looking for backgrounds or patterns to use on your website or Twitter page, Colour Lovers has a ton of ways to create patterns or your own palettes for background images. I used this to create a Twitter background, and am considering using it for my website background.

The site is made up of a community where people from all over the world share patterns or palettes on the website. The site allows developers to browse, create, and search themes, patterns, palettes, or colors. There are also design tools like ColorSchemer or Themeleon to help design page backgrounds.

5. Pingdom

Have you ever wondered how long it takes your site to load on a web browser? This may not only affect your SERP, but also how willing visitors are willing to wait for your site to appear. In the real world, 20 seconds may not seem like a lot, but in the search engine world, this can be an eternity.

Pingdom loads your full page, including all HTML objects such as images, CSS, etc. Essentially, it checks you website by mimicking how a page would actually load in a web browser. When the test is complete, you will view detailed information and statistics about your website, including load time for various objects.

Read more...

How to Create Tables in Blogger Post

Almost everyone has a blog, and does post regularly. But when it comes to creating tables in the blog (especially blogger) then one faces lot of problems. There are the following things which comes in picture while creating a table in a blog,

• How to create table? 
• How to eliminate the white space in the post, when the table is created using the HTML code? 

This post will describe some of the different ways to create the tables in the blog, along with eliminating the white space formed while creating the tables in HTML. Here we go,

Different ways to Create Tables in Blogger

There are many ways to create cool and well formatted tables in the blogger.

1. Creating the table in the simple HTML format, 
2. Creating the table in the Google Spread Sheet, and 
3. Create a table in MS-Excel and then take a snap shot and upload as a picture. 

1) Creating Table in Blogger’s Post by using HTML code

• This is the simple and well known method to create table in the blog post. It’s as easy as posting the post. Just write the code for creating the table, with rows and columns, and you are done. The first thing to be kept in mind is, you should be at least aware of how to create tables in HTML. And hence you can go ahead and create one for your post. But this has a certain draw back, as it leads to a lot of white space between the post and the table and looks too weird. Read below to find how to eliminate these white spaces.

Example HTML Table Code

HTML Code:

<table border="1" cellpadding="5" cellspacing="5" width="100%">
<tr>
<th>Table header</th>
<th>Table header</th>
</tr>
<tr>
<td width="20%">Table cell 1</td><td>Table cell 2</td>
</tr>
</table>

This results in:

Table header	Table header
Table cell 1	Table cell 2

2) Creating Table in Google Spread Sheet

• Creating the table in Google’s Document, i.e., Spread Sheet, is quite easy, and moreover after publishing the table, you can just copy the code and place it in your blog’s post where you want the table to appear.

How to create table using Google Document’s Spreadsheet?

• Creating the table is quite easy in Google Spread Sheet, the following things to be noted while to create the table,
• Go to the blogger’s “dashboard”. 
• Click on “My Account” on the extreme right side. 
• Under “My Products”, click “DOCS”. 
• Now click NEW > SPREAD SHEET 
• The SpreadSheet is divided inot Rows (number going down) and Columns (letters going across) 
• Now fill the information in the spread sheet and make the formatting as desired. 
• Save the spreadsheet by clicking, FILE > SAVE 
• Now publish the sheet, click – Publish > Publish Now 
• Select Sheet 1 Only in the next box under “What Parts” 
• Then at the bottom of that box, click “More Publishing Options” 
• In the next box that pops open, choose the HTML format: HTML embeded in a web page 
• “What Sheets” click “Sheet 1 Only”…again. 
• Now count the numbers of the table, i.e., The starting cell and the end cell in exactly diagonal fashion. 
• Then click “generate URL” 

And now you are done to publish the post in your blog. Just copy that code into your post and hence your spread sheet/table is on your post.

3) The simplest way

• Create a table in MS-Excel and then take a snap shot and upload as a picture into your blog, and hence you are done. Even though that’s not exactly creating a table in the blog, but it’s another way to put your table in the blog’s post.

Read more...

Perfect 3 Column Liquid Layout

All the dimensions are in percentage widths so the layout adjusts to any screen resolution. Vertical dimensions are not set so they stretch to the height of the content.

Percentage dimensions of the holy grail layout

Maximum column content widths

To prevent wide content (like long URLs) from destroying the layout (long content can make the page scroll horizontally) the column content divs are set to overflow:hidden. This chops off any content that is wider than the div. Because of this, it's important to know the maximum widths allowable at common screen resolutions. For example, if you choose 800 x 600 pixels as your minimum compatible resolution what is the widest image that can be safely added to each column before it gets chopped off? Here are the figures:800 x 600Left & right columns: 162 pixelsCenter page: 357 pixels1024 x 768Left & right columns: 210 pixelsCenter page: 459 pixels

The nested div structure

I've colour coded each div so it's easy to see:

The header, colmask and footer divs are 100% wide and stacked vertically one after the other. Colmid is inside colmask and colleft is inside colmid. The three column content divs (col1, col2 & col3) are inside colleft. Notice that the main content column (col1) comes before the other columns.

Click Here For Download This Layout

Read more...

3 Things to Remember When Designing a Blog Footer

Blog footers have traditionally been neglected by designers, usually home only to the obligatory copyright line. Times are-a-changin’ though. Creative footers have become one of the hottest trends in web design, and blog footers are no exception.

It’s not hard to see why. A visitor who reaches the bottom of a web page and finds themselves without anymore content left to browse is at the point where they are most likely to wander away. Blog footers help capture and maintain the interest of the visitor who thinks they’ve seen everything. But they have to be done well. Here are three key things to remember when designing a blog footer.

1. Attention decreases from top to bottom

When a user visits a website, the first thing they see is the top area: the header, the top of the sidebar, and usually some of the content. This is the highest attention area of any design. As the user travels down the page, they need to be kept interested. The likelihood of boredom or distraction increases as the user travels downwards through the design.

They might see a blog post they want to read, or a link they want to follow. They might just decide that the blog isn’t for them. Because of this, most visitors to a blog will never make it to your footer. This means that if there is something you want every visitor to see–whether it’s your navigational menu or the icon for your RSS feed –it should go in the highest attention area of your site: the top area.

2. Your footer is not a navigation bar

Following on from section 1, you should not put ‘must use’ elements of the design in its footer unless they also appear in a high attention area. For example, if your ‘Contact’ page is only accessible through your footer–one of the most common usability errors you’ll see in modern web design–you’re drastically increasing the chances that someone who wants to contact you will lose patience trying to do so. They may never think to look in that area and simply won’t see the link. This can lead to missed opportunities and frustration for blog readers.

Putting a ‘Contact’ page link in your footer is fine, however, when you’ve linked it again in a high attention area. Having navigation at both the top and bottom of your blog will improve its usability, since putting links at the bottom of your page makes sense–once a reader has reached the bottom, they’ll probably want to explore another part of your blog.

3. Keep it interesting!

Blog footers are a great opportunity to surprise and delight those who find them. For years the website footer almost had to be boring. At most, you could expect to find copyright information and a contact link. The nether regions of a blog were to be avoided.

Now, designers are beginning to appreciate the opportunity to go against expectations. I’ve seen blog footers featuring funny quotes, interesting links, portfolio items, illustrations and top posts. These are the best kind of blog footers because they keep users entertained at a key point when they would be most likely to navigate away from a site. Don’t use a blog’s footer as a place for basic features like navigation. Instead, do something interesting and novel that will keep visitors interested!

Conclusion

As a designer, the best way to develop your skill with blog footers is to bury yourself in examples that work. Here are a few great places to start!

Read more...