Friday, August 24, 2012

How to categorize the blog using JavaScript......?

JavaScript - 07

 The new template of Blogger was introduce about 6 months ago. After that we got lot of facilities including different kinds of easy methods to use without using confusing java scripts.Although the blogger has introduced us the facility of making different pages with the same home page, They have not shown that it is working well yet. This is a very important problem all the bloggers have already. Today I am introducing a method to categorize your articles according to headings.

How to prepare for this.........?

First you have to label all your blog posts. This is by just adding labels into all posts. If you want to categorize one of your blog into several, you can do that too.
                                                                                               (click here to preview)

How to add the categorizing button.......?

1. First go to dashboard.

2. Select add gadget. (this should be done around the header, if you like to show it in header)

3. Select html / Javascript.

4. Add following cord on it.

<!--Navigation tabs start-->
<div id='navibar'>
<a href="your-URL-of-homepage" class="navitabs" title="Home">Home</a>
<a href="your-URL-of-page1" class="navitabs" title="your title">Title you want to show1</a>
<a href="your-URL-of-page2" class="navitabs" title="your title">Title you want to show2</a>
<a href="your-URL-of-page3" class="navitabs" title="your title">Title you want to show3</a>
<a href="your-URL-of-page4" class="navitabs" title="your title">Title you want to show4</a>
 </div><div><a href=""></a></div>
 <!--Navigation tabs-->                                                                                                                                                      

5. Edit green text with your URLs.

6. Adjust the titles of URLs.

7. Save the html and your layout.

Can you see nice looking title bar........?

                                                                                    (click here to preview)

 I think it's not seen well. Then you have to go to template and adjust the template to optimize the navigation tabs. Here is the way...

8. First go to template.

9. Then edit and proceed.

10. Find the "]]</b:skin>" tag.

11. Copy and paste the following codes just above it.

/* Navigation tabs start */
a.navitabs, a.navitabs:link, a.navitabs:visited {display:block; width:150px; height:25px; background:wheat; border:1px solid black; margin-top:2px; text-align:center; text-decoration:none; font-family:verdana, arial, sans-serif; font-size:16px; color:black; line-height:25px; overflow:hidden; float:left;}
a.navitabs:hover {color:white; background:olive;}
#navibar {width:960px; margin:0 auto;}
/* Navigation tabs end */

12.Then preview and save the template and see the new look.
                                     (click here to preview)

At last if you like to add a different colour to the title bar you can easily change the colour by editing the above code.

Try and enjoy blogging. If any problem with this article come and comment here....

For further reference;
Blogger help