Readers won't usually waste their time trying to find the certain topics they want to read in our blogs or sites. To save up some of their time, we provide them with a set of links that lead to a specific topic.
For the blogger platform, we would usually set up a menu which is called the "labels". Labels are tags which we add to our posts to categorize them. Now, I will show you an easy way to let your visitors stay by squeezing all the potential of the labels widget.
Step 1
It all starts with the posting. Your blog must first have some several posts before you would need a menu, you wouldn't require one if you have a very few posts, which visitors could easily browse. Make sure to add some labels before you publish a post, this way you could easily archive your post to a certain category.
Step 2
If you didn't have the chance to label some, or even all of your posts, there is an easy way to label them all. Just go to your dashboard and click on "Edit Posts". After that, you will see the list of posts that you have made, you might even see drafts, unpublished, and even imported posts if you did import some. Check the checkbox besides the post title to include it. After checking all post that you want to have the same label, Click on the arrow above which is besides "Label Actions". If you already have some labels to some of your post, you will probably see it there, to create a new label for the checked post just find the "New Label..." and click it.
Step 3
A dialog box will suddenly appear to ask you what new label you would want to add. Type in you desired label, make sure that it is not too long, labels are tags which means that you must use words that are general (e.g. Automotive, Technology, Etc.), you can use multiple labels for a post, though it would be better if you use less labels, this way the visitors could make use of your labels widget.
Step 4
If you accidentally labeled a post with a wrong tag, you could easily remove it by first checking the box besides it and clicking on "Label Actions". There are two words there that are unselectable and bold which is the "Apply Label" and "Remove Label". Near the bottom most is the list of the labels that the current checked post has, just click on the label that you want to remove from that post.
Step 5
Even you need a labels widget to easily browse your own posts. If you can't find a specific post the you want to edit, try finding it using the labels at the left corner by clicking on the labels. Try experimenting with the edit post more often to discover new things, just don't play with the Delete button.
Step 6
If you already have the labels widget on your sidebar or somewhere on your blog, then you could probably skip this part, but I think you must try to read this too for more tricks. Now, our next mission is to add the labels widget. First go to the dashboard and click on layout, then click on add gadget.
Step 7
Try to scroll down and find the "Labels" then simply click on the add button (the blue + button).
Step 8
Next is that we need to customize it so that it would be more user friendly. We need an effective title for the label widget for our visitors to easily recognize it. The default "Labels" title doesn't seem to work to some people who are not very familiar about it. Try using other titles like Categories, Navigation Menu, etc. And always make sure that you put your labels widget somewhere that your visitors could easily see. Don't confuse them with other list of links.
Now that we have discussed the label widget we now proceed to some more advanced site navigation tools. Some visitors will just try to find something interesting on your blog, so they would be browsing for some random topics. This is the part where the label widget is a bit worthless. Now we will find a way for this matter. Here is another step by step procedure on solving this matter.
Step 1
Go to your dashboard and click on "Layout", then click on "Add gadget".
Step 2
Browse for the "Feed" widget and click on the add button (the blue + button)
Step 3
On the feed URL text boxsimply type in "http://YourBlog.blogspot.com/feeds/posts/default" wherein YourBlog should be the name or address (URL) of your blog. After typing the Feed URL, simply click the "Continue" button.
Step 4
On the title textbox type in "Recent Posts" to inform your visitors that this is a list of your recent posts. I would prefer not displaying the item dates and item source/authors to make the widget compact. After that click save and position the widget on your sidebar.
Now we have two kinds of navigation tools for the visitors and readers. We can still have unlimited ways to make the visitors navigation more easier than ever. The next steps would involve blocks of codes which are called "HTML" and "CSS (Cascading Style Sheet)". HTML for the structure and CSS for the design. This part would be a bit difficult and I advice that you don't try this on your main blog, just create a dummy blog where you could experiment the layout.
Let us use some ready use CSS menus to make this easier, and what more is that we could have a more elegant and stable menu. Though the downside is that, you would need to find a menu that will just blend in with your theme. For ready to use CSS menus, my favorite website is cssplay.co.uk now click on this link to go there.
Now on this link that I have provided for you is a list of some menus that are ready to use. Let us see what menu you will need to use. Here are the explanations of the categories of navigational menus.
Basic Text Only - These are simple text with links, though they are wrapped in a nice way with the help of CSS. As the title says, they are easy to install for basic users. They may come in either vertical or horizontal, but most of them are vertical.
Dropline- Dropline menus are menus which has the main categories at the top set of links then the sub categories will appear if you hover on the main category. It can also have some sub categories for the sub categories. Droplines are always horizontal.
Flyout- Flyout menus are vertical menus, wherein if you hover your pointer somewhere in the links with a subcategories, it will suddenly create a flying box besides it.
Dropdown- Dropdown menus are horizontal menus. They are usually a line of links with subcategories in them. Sometimes the subcategories turns out to have another subcategory which can look like a flyout menu.
There are quite a lot more kinds of navigational menus out there, but this are the most probably basic menus. Now lets try to install a single menu, I think most of us would prefer a horizontal menu to save some space. Now make sure to use only a dummy or experimental blog, don't ever use your main blog on trying new layout experiments, you could always copy the layout of your blog and paste it on you dummy blog to make them look the same.
Okay now, let's go back to CSS Play. I have given you a link with lists of different CSS Menus, lets try to pick a basic text only menu and install it on bloggers default layout. So I've chosen menu two for our demonstration, this seems simple and uncomplicated so lets install it on our dummy blog.
Step 1
So here is the menu that we will implement in our blog. It seems so meaningless, but it would be very useful after we customize it and implement on your blog.
Step 2
The actual preview of the menu that you have chosen is at the top. The code for its installation is below. Just try to scroll a little bit down and you should find it. Some menus at CSS Play are complicataed to install so try to find a menu with the code displayed below to make it easier.
Step 3
Copy the code under the "CASCADING STYLE SHEET".
Step 4
As you can see this is an experimental blog that I always use for testing some new kinds of layouts and codes. This is where we will implement the simple CSS menu.
Step 5
Go back to your dashboard and click on layout. Then proceed to "Edit HTML" by clicking on it.
Step 6
Scroll down and try to find "". To easily do this, just press CTRL + F this will open the find bar below, just type in the text you want to find and it will be highlighted, if it isn't the one you are trying to find just click on next or previous.
Step 7
Insert more lines above the part, this is where we will paste our code.
Step 8
Just right click on the empty area and choose paste to paste the code that we have copied (The code under CASCADING STYLE SHEET ). After pasting the code just click on "Save Template", this process would actually cause no difference to your blog. If something altered to your blog, then there must have been an error in your procedure.
Step 9
Go to your dashboard and click on "Layout". Then click on add a gadget.
Step 10
Scroll down and try to find the "HTML?javascript" widget. Then click on the add button (the blue + button).
Step 11
Go back to CSS Play, and now copy the code under "XHTML".
Step 12
Paste the code into the Content text field.
Step 13
We would now need to edit the display text and the link for it to go when clicked.
Step 14
This part is the text which will be displayed. Observe it carefully, they are the ones that is between the greater than and the less than sign.
Step 15
Lets try to change it with lets say "Home", so that when its clicked it will take the visitor back to your homepage.
Step 16
As you can see, the #nogo is a temporary link for the code. You must change it to something else. Lets try linking it to your homepage. Just change the #nogo into your blog address or URL.
Step 17
Now lets say that we would want to make the menu like the labels widget. All we have to do is change the link into something like "http://YOURBLOG.blogspot.com/search/label/THE LABEL TO DISPLAY"
The red text indicates that you need to change them to something else. YOUBLOG is the link to your blog, then the THE LABEL TO DISPLAY is the posts with this kind of label to be displayed, so its also like the label widget if you do it like this. You only get to have more style on it and more links. You could even link to your friend's or family's blog.
I think that I have spent so much time for this post, now it is time to end this little (not actually took me some hours) topic. Let us now see the product of our effort.
Just try to find some patterns and you will then easily customize the CSS menu. If you like how this things work you can study basic or advanced HTML and CSS at http://w3schools.com.
For the blogger platform, we would usually set up a menu which is called the "labels". Labels are tags which we add to our posts to categorize them. Now, I will show you an easy way to let your visitors stay by squeezing all the potential of the labels widget.
Step 1
It all starts with the posting. Your blog must first have some several posts before you would need a menu, you wouldn't require one if you have a very few posts, which visitors could easily browse. Make sure to add some labels before you publish a post, this way you could easily archive your post to a certain category.
Step 2
If you didn't have the chance to label some, or even all of your posts, there is an easy way to label them all. Just go to your dashboard and click on "Edit Posts". After that, you will see the list of posts that you have made, you might even see drafts, unpublished, and even imported posts if you did import some. Check the checkbox besides the post title to include it. After checking all post that you want to have the same label, Click on the arrow above which is besides "Label Actions". If you already have some labels to some of your post, you will probably see it there, to create a new label for the checked post just find the "New Label..." and click it.
Step 3
A dialog box will suddenly appear to ask you what new label you would want to add. Type in you desired label, make sure that it is not too long, labels are tags which means that you must use words that are general (e.g. Automotive, Technology, Etc.), you can use multiple labels for a post, though it would be better if you use less labels, this way the visitors could make use of your labels widget.
Step 4
If you accidentally labeled a post with a wrong tag, you could easily remove it by first checking the box besides it and clicking on "Label Actions". There are two words there that are unselectable and bold which is the "Apply Label" and "Remove Label". Near the bottom most is the list of the labels that the current checked post has, just click on the label that you want to remove from that post.
Step 5
Even you need a labels widget to easily browse your own posts. If you can't find a specific post the you want to edit, try finding it using the labels at the left corner by clicking on the labels. Try experimenting with the edit post more often to discover new things, just don't play with the Delete button.
Step 6
If you already have the labels widget on your sidebar or somewhere on your blog, then you could probably skip this part, but I think you must try to read this too for more tricks. Now, our next mission is to add the labels widget. First go to the dashboard and click on layout, then click on add gadget.
Step 7
Try to scroll down and find the "Labels" then simply click on the add button (the blue + button).
Step 8
Next is that we need to customize it so that it would be more user friendly. We need an effective title for the label widget for our visitors to easily recognize it. The default "Labels" title doesn't seem to work to some people who are not very familiar about it. Try using other titles like Categories, Navigation Menu, etc. And always make sure that you put your labels widget somewhere that your visitors could easily see. Don't confuse them with other list of links.
Now that we have discussed the label widget we now proceed to some more advanced site navigation tools. Some visitors will just try to find something interesting on your blog, so they would be browsing for some random topics. This is the part where the label widget is a bit worthless. Now we will find a way for this matter. Here is another step by step procedure on solving this matter.
Step 1
Go to your dashboard and click on "Layout", then click on "Add gadget".
Step 2
Browse for the "Feed" widget and click on the add button (the blue + button)
Step 3
On the feed URL text boxsimply type in "http://YourBlog.blogspot.com/feeds/posts/default" wherein YourBlog should be the name or address (URL) of your blog. After typing the Feed URL, simply click the "Continue" button.
Step 4
On the title textbox type in "Recent Posts" to inform your visitors that this is a list of your recent posts. I would prefer not displaying the item dates and item source/authors to make the widget compact. After that click save and position the widget on your sidebar.
Now we have two kinds of navigation tools for the visitors and readers. We can still have unlimited ways to make the visitors navigation more easier than ever. The next steps would involve blocks of codes which are called "HTML" and "CSS (Cascading Style Sheet)". HTML for the structure and CSS for the design. This part would be a bit difficult and I advice that you don't try this on your main blog, just create a dummy blog where you could experiment the layout.
Let us use some ready use CSS menus to make this easier, and what more is that we could have a more elegant and stable menu. Though the downside is that, you would need to find a menu that will just blend in with your theme. For ready to use CSS menus, my favorite website is cssplay.co.uk now click on this link to go there.
Now on this link that I have provided for you is a list of some menus that are ready to use. Let us see what menu you will need to use. Here are the explanations of the categories of navigational menus.
Basic Text Only - These are simple text with links, though they are wrapped in a nice way with the help of CSS. As the title says, they are easy to install for basic users. They may come in either vertical or horizontal, but most of them are vertical.
Dropline- Dropline menus are menus which has the main categories at the top set of links then the sub categories will appear if you hover on the main category. It can also have some sub categories for the sub categories. Droplines are always horizontal.
Flyout- Flyout menus are vertical menus, wherein if you hover your pointer somewhere in the links with a subcategories, it will suddenly create a flying box besides it.
Dropdown- Dropdown menus are horizontal menus. They are usually a line of links with subcategories in them. Sometimes the subcategories turns out to have another subcategory which can look like a flyout menu.
There are quite a lot more kinds of navigational menus out there, but this are the most probably basic menus. Now lets try to install a single menu, I think most of us would prefer a horizontal menu to save some space. Now make sure to use only a dummy or experimental blog, don't ever use your main blog on trying new layout experiments, you could always copy the layout of your blog and paste it on you dummy blog to make them look the same.
Okay now, let's go back to CSS Play. I have given you a link with lists of different CSS Menus, lets try to pick a basic text only menu and install it on bloggers default layout. So I've chosen menu two for our demonstration, this seems simple and uncomplicated so lets install it on our dummy blog.
Step 1
So here is the menu that we will implement in our blog. It seems so meaningless, but it would be very useful after we customize it and implement on your blog.
Step 2
The actual preview of the menu that you have chosen is at the top. The code for its installation is below. Just try to scroll a little bit down and you should find it. Some menus at CSS Play are complicataed to install so try to find a menu with the code displayed below to make it easier.
Step 3
Copy the code under the "CASCADING STYLE SHEET".
Step 4
As you can see this is an experimental blog that I always use for testing some new kinds of layouts and codes. This is where we will implement the simple CSS menu.
Step 5
Go back to your dashboard and click on layout. Then proceed to "Edit HTML" by clicking on it.
Step 6
Scroll down and try to find "". To easily do this, just press CTRL + F this will open the find bar below, just type in the text you want to find and it will be highlighted, if it isn't the one you are trying to find just click on next or previous.
Step 7
Insert more lines above the part, this is where we will paste our code.
Step 8
Just right click on the empty area and choose paste to paste the code that we have copied (The code under CASCADING STYLE SHEET ). After pasting the code just click on "Save Template", this process would actually cause no difference to your blog. If something altered to your blog, then there must have been an error in your procedure.
Step 9
Go to your dashboard and click on "Layout". Then click on add a gadget.
Step 10
Scroll down and try to find the "HTML?javascript" widget. Then click on the add button (the blue + button).
Step 11
Go back to CSS Play, and now copy the code under "XHTML".
Step 12
Paste the code into the Content text field.
Step 13
We would now need to edit the display text and the link for it to go when clicked.
Step 14
This part is the text which will be displayed. Observe it carefully, they are the ones that is between the greater than and the less than sign.
Step 15
Lets try to change it with lets say "Home", so that when its clicked it will take the visitor back to your homepage.
Step 16
As you can see, the #nogo is a temporary link for the code. You must change it to something else. Lets try linking it to your homepage. Just change the #nogo into your blog address or URL.
Step 17
Now lets say that we would want to make the menu like the labels widget. All we have to do is change the link into something like "http://YOURBLOG.blogspot.com/search/label/THE LABEL TO DISPLAY"
The red text indicates that you need to change them to something else. YOUBLOG is the link to your blog, then the THE LABEL TO DISPLAY is the posts with this kind of label to be displayed, so its also like the label widget if you do it like this. You only get to have more style on it and more links. You could even link to your friend's or family's blog.
I think that I have spent so much time for this post, now it is time to end this little (not actually took me some hours) topic. Let us now see the product of our effort.
Just try to find some patterns and you will then easily customize the CSS menu. If you like how this things work you can study basic or advanced HTML and CSS at http://w3schools.com.
FhelZone © 2009 all rights reserved.
0 comments:
Post a Comment