CSS Tab-Designer Demo

Update: Image Hoster

2007-08-07T15:10:00.000+02:00

In one of my very first postings I recommended flickr as a very good image hosting site. Since the last year some other good image hosting services have come online so I will mention these two others:

I prefer Photobucket because the handling is more comfortable - and Google is Co-Developer of this project.

Post your blog/site

2007-06-14T16:06:00.000+02:00

I would love to get comments about your blog or website where you have installed the tabbed menues.

CSS Tab Designer v2

2006-03-28T15:37:00.000+02:00

The program was updated March, 18 2006 - and it still is free!

Pimping the Sidebar

2006-03-14T11:41:00.000+01:00

Today I'm gonna pimp up the sidebar with somce vertical tabbed menus but only the "previous posts" section. If you like you can do it with all your sidebar-links - it's just a matter of what you wish.

The best thing is - you don't need any graphics uploaded anywhere - it is all done via CSS and HTML.

Here is an example screenshot of how it should look like:

The task:

Implementing the CSS code for the sidebar.
Note: You can use the CSS code for any link-list you have - but it might look strange *yuc*.

Here comes the needed CSS code:

#navcontainer {
background: #f0e7d7;
width: 30%;
margin: 0 auto;
padding: 1em 0;
font-family: georgia, serif;
font-size: 13px;
text-align: center;
text-transform: lowercase;
}

ul#navlist {
text-align: left;
list-style: none;
padding: 0;
margin: 0 auto;
width: 70%;
}

ul#navlist li {
display: block;
margin: 0;
padding: 0;
}

ul#navlist li a {
display: block;
width: 100%;
padding: 0.5em 0 0.5em 2em;
border-width: 1px;
border-color: #ffe #aaab9c #ccc #fff;
border-style: solid;
color: #777;
text-decoration: none;
background: #f7f2ea;
}

#navcontainer>ul#navlist li a { width: auto; }

ul#navlist li#active a {
background: #f0e7d7;
color: #800000;
}

ul#navlist li a:hover, ul#navlist li#active a:hover {
color: #800000;
background: transparent;
border-color: #aaab9c #fff #fff #ccc;
}

All I have to change is in #navcontainer the width: 30% to width: 100% (the sidebar already is limited in her total width so there is no need in limiting this again!).

In the HTML part I just insert the div id="navcontainer" and replace the ul id="recently" with the ul id="navlist" to activate the list style.

Here comes the corrected code:

#navcontainer {
background: #f0e7d7;
width: 100%;
margin: 0 auto;
padding: 1em 0;
font-family: georgia, serif;
font-size: 13px;
text-align: center;
text-transform: lowercase;
}

Blogger template tags in tabbed menu

2006-03-13T09:45:00.000+01:00

Someone asked me about the links I can put into the menu so I show you that you can put any link you want into the menu.

This time I put some Blogger template tags into the Tab menu - the recent postings.

For a better look I do this with a second menu blow the first menu.

<div id="headertab">
<ul>
<BloggerPreviousItems>
<li><a href="<$BlogItemPermalinkURL$>"><$BlogPreviousItemTitle$></a></li>
</BloggerPreviousItems>
</ul>
</div>

The previous post code BloggerPreviousItems must be wrapped around the the link field, then you can use the template tags $BlogItemPermalinkURL$ and $BlogPreviousItemTitle$.

For more information just look at this article in the blogger help section.

Copying the Style-sheet into the template

2006-03-10T14:39:00.000+01:00

Just copy/paste the following part into your style-sheet:

/* Inserting the CSS Tab Menu */
#headertab {
FONT-SIZE: 93%; BACKGROUND: url(http://static.flickr.com/49/110372233_947b68eb39.jpg?v=0) #dae0d2 repeat-x 50% bottom; FLOAT: left; WIDTH: 100%; LINE-HEIGHT: normal
}
#headertab UL {
PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 10px; LIST-STYLE-TYPE: none
}
#headertab LI {
PADDING-RIGHT: 0px; PADDING-LEFT: 9px; BACKGROUND: url(http://static.flickr.com/44/110372234_de187a8c49.jpg?v=0) no-repeat left top; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
#headertab A {
PADDING-RIGHT: 15px; DISPLAY: block; PADDING-LEFT: 6px; FONT-WEIGHT: bold; BACKGROUND: url(http://static.flickr.com/39/110372236_adcee79ede.jpg?v=0) no-repeat right top; FLOAT: left; PADDING-BOTTOM: 4px; COLOR: #765; PADDING-TOP: 5px; TEXT-DECORATION: none
}
#headertab A {
FLOAT: none
}
#headertab A:hover {
COLOR: #333
}
#headertab #current {
BACKGROUND-IMAGE: url(http://static.flickr.com/34/110372235_fb3b91950f.jpg?v=0.gif)
}
#headertab #current A {
BACKGROUND-IMAGE: url(http://static.flickr.com/38/110372237_cbcda10338.jpg?v=0); PADDING-BOTTOM: 5px; COLOR: #333
}

Note: In this template I had to change the #header to #headertab because there was another container named #header - don't want to mix things up for the browser).

After this, just insert the HTML Code wherever you want the menu be placed (in this exampel I placed it after the title).

Just start with the div id="headertab" part, then insert the list code, save your template, republish - done.

Configuring the CSS in the template

2006-03-10T14:08:00.000+01:00

Here comes the tricky part.

First, make a backup of your existing template (just mark all, then copy and paste it in a text-editor and save it as a text file).

Now we can play in the template and use the nifty "preview" button from blogger ;)

At first we look at the graphic URLs:

#header {
[...]
BACKGROUND: url(bg.gif) #dae0d2 repeat-x 50% bottom;

The bg.gif has to be replaced by the flickr link:

BACKGROUND: url(http://static.flickr.com/49/110372233_947b68eb39.jpg?v=0) #dae0d2 repeat-x 50% bottom;

We do this with every BACKGROUND: url(LINK) part!

Uploading the graphics

2006-03-10T14:00:00.000+01:00

As described before, I'm uploading the tab graphics - I choose the flickr variant. (You can see my photoset here)

The HTML Code

2006-03-10T10:27:00.000+01:00

Here comes the HTML code:

<div id="headertab">
<ul>

<li><a href="http://tabdemo.blogspot.com/">Home</a></li>
<li><a href="http://www.google.com">Google</a></li>
<li><a href="http://www.yahoo.com">Yahoo</a></li>
<li><a href="http://www.blogger.com">Blogger</a></li>
</ul>
</div>

Starting with the CSS

2006-03-10T09:03:00.000+01:00

The code:

BODY {
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
BACKGROUND: #fff;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
FONT: small/1.5em Georgia,Serif;
COLOR: #000;
PADDING-TOP: 0px; voice-family: inherit
}
UNKNOWN {
FONT-SIZE: small
}
#header {
FONT-SIZE: 93%;
BACKGROUND: url(bg.gif) #dae0d2 repeat-x 50% bottom;
FLOAT: left;
WIDTH: 100%;
LINE-HEIGHT: normal
}
#header UL {
PADDING-RIGHT: 10px;
PADDING-LEFT: 10px;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
PADDING-TOP: 10px;
LIST-STYLE-TYPE: none
}
#header LI {
PADDING-RIGHT: 0px;
PADDING-LEFT: 9px;
BACKGROUND: url(left.gif) no-repeat left top;
FLOAT: left; PADDING-BOTTOM: 0px;
MARGIN: 0px;
PADDING-TOP: 0px
}
#header A {
PADDING-RIGHT: 15px;
DISPLAY:block;
PADDING-LEFT: 6px;
FONT-WEIGHT: bold;
BACKGROUND: url(right.gif) no-repeat right top;
FLOAT: left;
PADDING-BOTTOM: 4px;
COLOR: #765;
PADDING-TOP: 5px;
TEXT-DECORATION: none
}
#header A {
FLOAT: none
}
#header A:hover {
COLOR: #333
}
#header #current {
BACKGROUND-IMAGE: url(left_on.gif)
}
#header #current A {
BACKGROUND-IMAGE: url(right_on.gif);
PADDING-BOTTOM: 5px;
COLOR: #333
}

Creating the Tabs

2006-03-10T07:43:00.000+01:00

Ok - first of all I am referring to the CSS Tab Designer from OverZone Software. This Tool is Freeware so there should be no problem by using it.

In this demo I create a tab consisting of 4 links:

Home (this blog)
Google
Yahoo
Blogger

This should be enough to demonstrate how to use the Tab Designer.

I use the design that is active when you start the program - it looks like a bit the Tabs Blogger is using in their administrative Tab Menu (here is a Screenshot):

Ok after creating the code the program creates the following files:

5 gif files (the graphics)
the CSS
an HTML where the list code is - you can easily copy the code in your blogger template

How to get the graphics "on web" when not having an own webspace?

Two ways are possible:

First one:

Create a post in your blog
upload the graphics
switch to the HTML view to get the picture URL
copy/paste these URLs in your template code in the CSS section
save this post as draft!

Second one:

Create an account @ flickr
upload the graphics
get the picture URLs after saving the graphics by clicking on them (flickr is very helpful with this)
copy/paste these URLs in your template code in the CSS section

It depends on you what you prefer - both ways should work fine. The good thing for the first one is: When your blog (and blogger) is "online" - your pictures should be too ;)