Customised Pages widgets using table code

There is a live-demo of this widget on this site (right hand column at the very top). Click the expandable/collapsible "Pages" title to view it.

Searching the Internet for ideas is time consuming but I came up with an idea to create this particular widget because sometimes the static pages, the labels widget and the pages tab (standard blogger widgets and features) is simply not enough and are a bit restricting.

With this tutorial you can create a second lot of categories or pages/posts that have specific descriptions or tags. For example, on this site (Blogger Tutorials for everyone) I have a specific set of tutorial labels and the posts are displayed via a separate link list rather than a labels widget. But if you want to create something different for displaying other pages then this tutorial is ideal for that.

On Blogger you are limited to just 20 static pages. That's not many when you might have big ideas about what you want to add to your blog. Using up 20 pages can happen quite quickly, especially if you add things like a contact form page, About Me page, Sitemap page, Videos page, News page, etc. And with the standard Pages tab widget, or some other form of navigation menu bar you might have on your blog (or lack of one), you (and your visitors) might become overwhelmed by all the pages.

So, for something completely different.... I have created two Page widgets that are made from table code that can handle a whole lot of pages listed in them. The widgets (especially the one placed in a main static page) makes your blog less overwhelming and much easier to navigate.

Installing the first widget:

The first widget is placed in the side column of your blog in a HTML/Javascript widget. It displays an image for each page of the two pages listed; and a link plus text for the name of the page. Below each of the two Page's names is more text - an area where you write a brief description of what the page is about. Underneath all of that is a link that will lead you to the main page where all your remaining pages will be listed.

The bottom most link in the widget is then linked to the 2nd widget (the static page widget) using just a url address which is placed in the last lot of table code in the 1st widget. Confused? Don't worry... the instructions are below.

Go to your Design tab and select "Add a gadget". Select a "HTML/Javascript" widget from the basic menu.

Now copy the code below these images and paste it into that widget like in this image. 

Hit the "SAVE" button on the Design page

GRAB THE CODE BELOW:

<table cellpadding='0' cellspacing='0' style='margin:0 0 5px 0; background:#222222;'>

<tr><td style='width:20%;font-family:verdana; font-size:11px; color:#00ff00; font-weight:bold; padding:5px;'><img align='left' alt='page 1' height='42' src='http://img845.imageshack.us/img845/5214/pagesv.gif' style='margin:0 1px 0 1px; border:0;' width='35'/></td><td style='width:80%;font-family:verdana; font-size:11px; color:#00ff00; font-weight:bold; padding:1px;'><a href='#'><strong style='color:#00ff00; border:none; text-decoration:underline;'>Page name 1</strong></a><p style='margin:0; clear:none; text-decoration:none; color:#00ff00;font-size:10px;'>Add information about this page here .....</p></td></tr>

</table>

<table cellpadding='0' cellspacing='0' style='margin:0 0 5px 0; background:#222222;'>

<tr><td><td style='font-family:verdana; font-size:11px; color:#00ff00; font-weight:bold; padding:5px 5px;'><img align='left' alt='page 2' height='42' src='http://img845.imageshack.us/img845/5214/pagesv.gif' style='margin-right:5px; border:0;' width='35'/></td><td style='font-family:verdana; font-size:11px; color:#00ff00; font-weight:bold; padding:5px 5px;'><a href='#"><strong style='color:#00ff00; border:none; text-decoration:underline;'>Page name 2</strong></a><p style='margin:0; clear:none; text-decoration:none; color:#00ff00;font-size:10px;'>Add information about this page here ..... </p></td></td></tr>

</table>

<table border='0' cellpadding='0' cellspacing='0' style='margin:0 5px 5px 10px;'><tr><td style='width:100%;font-family:verdana; font-size:11px; color:#00ff00; font-weight:bold; text-decoration:none;padding:5px 5px;'><a href='#"><span style='color:#00ff00;margin-left:10px;'>Click to view more Pages</span></a></td></tr>

</table>

Result: You end up with everything within the blue border anyway.

Installing the second widget:

This is what the second widget will look like

once placed in a static page.

Go to the "Edit Post" page as if you are going to write up a new post. Then click on the "Edit pages" tab. Now click on the blue button to create a new page. Write the title of the new page and then paste all the code below into the contents area and then click on the "Publish" button.

<table cellpadding="0" cellspacing="0" style="background: #222222; margin: 0 0 0 -2px; width: 101%;"><tbody>

<tr><td style="align: left; color: lime; font-family: verdana; font-size: 11px; font-weight: bold; padding: 5px 5px; width: 10%;"><img align="left" alt="page 1" src="http://img845.imageshack.us/img845/5214/pagesv.gif" style="border: 0; height: 42px; margin-right: 5px; width: 35px;" /></td><td style="align: right; color: lime; font-family: verdana; font-size: 11px; font-weight: bold; padding: 5px 5px; width: 90%;"><a href="#"><strong style="border: none; color: lime; text-decoration: underline;">Page name 1</strong></a>

<br />

<div style="clear: none; color: lime; margin: 0; text-decoration: none;">

Here is some text to describe the page.</div>

</td></tr>

</tbody></table>

<table cellpadding="0" cellspacing="0" style="background: #222222; margin: 0 0 0 -2px; width: 101%;"><tbody>

<tr><td style="align: left; color: lime; font-family: verdana; font-size: 11px; font-weight: bold; padding: 5px 5px; width: 10%;"><img align="left" alt="page 2" src="http://img845.imageshack.us/img845/5214/pagesv.gif" style="border: 0; height: 42px; margin-right: 5px; width: 35px;" /></td><td style="align: right; color: lime; font-family: verdana; font-size: 11px; font-weight: bold; padding: 5px 5px; width: 90%;"><a href="#"><strong style="border: none; color: lime; text-decoration: underline;">Page name 2</strong></a>

<br />

<div style="clear: none; color: lime; margin: 0; text-decoration: none;">

Here is some text to describe the page.</div>

</td></tr>

</tbody></table>

Once you have done that create new pages by add the titles for each page and add content to them. Publish each page.

Customising the Page table widget links.

Do not copy and paste the following lots of code below. It is being repeated for reference only!  
With this next bit it is most helpful to have two browser tabs/windows open of your blog so you can browse your blog and collect the urls to add to the Page widgets.

Here's the first widget's code again. READ INSTRUCTIONS BELOW THE CODE!

<table cellpadding='0' cellspacing='0' style='margin:0 0 5px 0; background:#222222;'>

<tr><td style='width:20%;font-family:verdana; font-size:11px; color:#00ff00; font-weight:bold; padding:5px;'><img align='left' alt='page 1' height='42' src='http://img845.imageshack.us/img845/5214/pagesv.gif' style='margin:0 1px 0 1px; border:0;' width='35'/></td><td style='width:80%;font-family:verdana; font-size:11px; color:#00ff00; font-weight:bold; padding:1px;'><a href='#'><strong style='color:#00ff00; border:none; text-decoration:underline;'>Page name 1</strong></a><p style='margin:0; clear:none; text-decoration:none; color:#00ff00;font-size:10px;'>Add information about this page here .....</p></td></tr>

</table>

<table cellpadding='0' cellspacing='0' style='margin:0 0 5px 0; background:#222222;'>

<tr><td><td style='font-family:verdana; font-size:11px; color:#00ff00; font-weight:bold; padding:5px 5px;'><img align='left' alt='page 2' height='42' src='http://img845.imageshack.us/img845/5214/pagesv.gif' style='margin-right:5px; border:0;' width='35'/></td><td style='font-family:verdana; font-size:11px; color:#00ff00; font-weight:bold; padding:5px 5px;'><a href='#"><strong style='color:#00ff00; border:none; text-decoration:underline;'>Page name 2</strong></a><p style='margin:0; clear:none; text-decoration:none; color:#00ff00;font-size:10px;'>Add information about this page here ..... </p></td></td></tr>

</table>

<table border='0' cellpadding='0' cellspacing='0' style='margin:0 5px 5px 10px;'><tr><td style='width:100%;font-family:verdana; font-size:11px; color:#00ff00; font-weight:bold; text-decoration:none;padding:5px 5px;'><a href='#"><span style='color:#00ff00;margin-left:10px;'>Click to view more Pages</span></a></td></tr>

</table>

INSTRUCTIONS: 

With the first page you have created, let's say you called it "Sitemap", (not the one with the Page widget on it) copy the url for it and open up the Pages widget in the sidebar of your blog. In the code above you will need to highlight and paste the url in where there is the first instance of a blue # symbol. Type in the Page's title (Sitemap) where it says "Page name 1". Then write a brief description of the page where it says"Add information about this page here .....". Repeat this step for a second page you have created.

Lastly, copy the url of the static page where you placed the "Second widget" code. Paste that url where the red # symbol is. Then save the widget.

ALMOST DONE!

With the static pages you have created that do not have these Pages widgets code on it, you need to copy and paste each url into the static page you created that does have the code in it. Simply but carefully add each url and add each title and a brief description of each page. Once you have completed the page, PUBLISH IT.

Some ideas for Pages to add to your new widget on your static page:

• About
• Contact
• Invite a friend
• Links/Favorites
• Photo Album
• Photo Gallery
• Main Gallery
• Videos
• Video categories
• Projects
• Tutorials
• Shop
• Website
• Disclaimer
• Press Releases
• Downloads
• Giveaways
• Polls
• Advertise
• Guest Book
• FAQ's
• Favorite Posts
• Meet the team
• Designs
• Blog Followers
• Archives
• Documents and Files
• Sitemap
• Table of contents
• Comments
• Guest Bloggers