Adding a Menu Bar

There are actually several methods of adding a horizontal menu bar in your blogsite. However, the method that I have used in this blogsite is quite straightforward and does not involve any modification of the style sheet of the template. A menu bar is actually just a horizontal link list found on the header area. For instance, the menu bar may contain links to a profile page or to an interactive page for games or embedded chat rooms such as found in this blogsite. These pages could be separate posts within your site or external links. Remember, every blog post that you make has its own unique page URL. Simply click the title of the specific post you want to link to display the URL address.

Here are the simple steps you can follow to create a menu bar above the blog header:
STEP1. Open the HTML template editor of your blogsite and check the box that says "expand widget."

STEP2. Copy and paste the entire template onto Notepad or Word. Save the document as backup template. You may also use this document to edit the HTML codes of your template.

STEP3. Locate this section in the HTML template of your blog:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

STEP4. Change the maxwidgets to "2" and also change the showaddelement to "yes". Save your template and view the Page Elements tab of the template. You will notice that an additional Page Element box appear above the Header box.



STEP5. Click the "Add a Page Element" on the new Page Element box above the Header box. Select the add text option.

STEP6. Type the names of links that you want to appear on your menu bar. Type these names as one line with verical separators. For instance, you may type the following:

HOME|ABOUT ME|CHAT|PICTURES

STEP7. Now comes the tricky part. You must link each link name to a particular post on your blogsite. First, go to that particular post page by clicking the title of the post. For instance, if you have a post about a short autobiographical profile, copy the URL address of this particular link. You will use this URL address to create a link for the "ABOUT ME".

STEP8. Here are the codes that you should use to link each link name on your menu bar: <a href="url address"> and </a>. You have to enclose each link name inside these codes to create specific links. You simply have to specify the url address.
There is another method of creating a menu bar. But this requires the modification of the style sheet. I will make a post about this later. For now, the method that I have explained in this post will suffice for your basic need.

Please continue reading...

First paragraph only...

Linking Graphics

You can easily insert pictures or graphics in your blog post using the upload picture button. You may upload directly from your computer or from an internet source. You may also easily link the picture or graphics to any web address you prefer by simply highlighting the picture and clicking the link icon/button of the tool options available on the menu bar of the rich-text editor box of your blog post.









However, linking a graphic or picture is not straightforward when it comes to the widgets of your side bars. Hence, a simple knowledge of HTML tags would be helpful.

The basic HTML tag used for displaying a graphic is this <img src="url address">. This HTML tag will insert the graphic of the URL address that you specified. It it is advisable that you use jpeg images.

On the other hand, to link the said image to a particular web address, you simply have to enclose the above codes inside these codes: <a href="web address"> and </a>.

Save your post and view your blog. As you hover, the mouse arrow over the image, you will notice, that it will change into hand, indicating that the image is a linked image. The aformentioned HTML codes will give you flexibility in inserting images and linking those images whenever the text editor does not provide easy clickable options such as in the case of sidebar picture and text widgets.

For instance, the codes used for the image shown below are the following:

<a href="http://homar.wordpress.com/" target="new">
<img src="http://homar.files.wordpress.com/2007/09/rizalman.jpg"></a>

Please continue reading...

First paragraph only...

Dropcaps Effect

Have you noticed the styles of most magazines and some books? The first letter of each article is typically exaggerated in size. The rest of the paragraph wraps around the overly-sized capital letter as if it is a picture or graphic. This style is primarily for aesthetic purposes. However, it is also intended to give emphasis to the start of the article. This style is called drop caps.

You can actually imitate this style in your web articles such as blogs, provided that you have access to the template style sheet of your blogsite. When it comes to flexibility in style, Blogger is the best free blog host. Other blog hosts do not allow access to the template style sheet.

To display the drop caps effect, you must first open the HTML-CSS template of your blogsite. Then, insert the codes listed below into the style sheet of your template. The style sheet is the collection of CSS codes found between the <head> and </head>tags of your template.

As you can see, the first letters of my posts are all displayed as drop caps. These do not involve the mere resizing of the texts in the blog post template. Drop caps involve the modification of the style sheet. Below are the codes that I have used.

.dropcaps
{
float:left;
color: $#C68E17;
font-size:100px;
line-height:80px;
padding-top:1px;
padding-right:5px;
}

After inserting the above codes in the style sheet of your template, save the template and view your blog. You will notice that no change has occured. This is because you still need to enclose each first letter of your posts inside these codes: <span class="dropcaps"> and </span>.

After enclosing the first letter of your post save your blog and view the result. You always have to enclose the first letter of your post to display the drop caps effect.

I still do not know how to automate this style (if it can really be automated at all). If someone reading this post knows the solution to this, please post a comment. I will be trully grateful for the information.

Please continue reading...

First paragraph only...

Creating Table

Creating a table using HTML tags is not as straightforward as you would probably achieve it using special softwares such as MS-FrontPage or MS-Word. Yes, you can actually create web pages using word processor programs such as MS-Word to easily create customized web pages. You simply have to save the Word document as HTML and the tags will automatically be generated. It is very convenient. However, it is still helpful to know the basic structure of an HTML table, especially if you want to trouble shoot a basic web document such as blogs.

There are instances wherein you may need to create a table for your blogs. A table may contain texts, links, and graphics. There are three basic sets of HTML tags used in creating tables for a web document. These tags are shown below. The sample table that you see here uses the displayed HTML tags. However, you should note that when it comes to Blogger, table tags should be written as continous one line. Pressing the enter key several times would create too much white spaces above the table. This is especially true if the table has a lot of data contents. Click this link to see an example of a table with too much white spaces above it: HTML Tags.


SAMPLE TABLE:

data1	data2
data3	data4

Codes Used:

<table border="2">

<tr>

<td>data1</td> <td>data2</td>

</tr>

<tr>

<td>data3</td> <td>data4</td>

</tr>

</table>

Definitions:

1. <table> --used to delineate the boundaries of the table
2. <tr> --used to delineate rows
3. <td> --used to delineate cells where table data are located
4. border="number" --used to set the border lines

Please continue reading...

First paragraph only...