How To Install Invisible Shelves - Video

How To Install Invisible Shelves.Do it yourself, see this video:How To Install Invisible Shelves

Navigation bar with tabs using CSS and sliding doors effect

My friend William asked to me to design for his project a simple navigation bar with tabs using CSS.

I prepared for him this navbar (with status effects active, hover, link). You can download the source code and reuse it in your projects. If you want, you can change tabs colors simply modifying the image which I used as background for each tab.

I also added a short explanation about how to use PHP URL variables to set a tab "active" when the relative page is loaded. Read more for a complete explanation about this tutorial.

Download source code


Step 1: General structure
Each tab has rounded corners and adapts its width to the text conteined inside it. I use this simple method to implement CSS sliding doors effect:

...a <span> element inside an <a> element. I apply to the both elements a background image with rounded corners. For the image, I used a single background image to manage active, link, hover tab status which includes all these states. The image is the following:

You can change the status a tab simply change position property for the CSS background attribute to change the state of each tab in this way:

hover status:

background:url(img/tab-round.png) right 30px;

link status:

background:url(img/tab-round.png) right 60px;

active status:

background:url(img/tab-round.png) right 0px;

Step 2: HTML Code
I used a list <ul> and a <li> element for each tab and, how I said, a link with a <span> tag inside:

<ul class="tab">

<li class="active"><a href="#news"><span>News</span></a></li>
<li><a href="#upcoming"><span>Upcoming</span></a></li>
<li><a href="#favorites"><span>Favorites</span></a></li>
<li><a href="#messages"><span>Messages</span></a></li>
<li><a href="#account"><span>My Account</span></a>&lt/li>

</ul>

Class property is set to active when is defined a PHP URL variable such as $_GET['var_name']. PHP code to add to each li element is like the following:

<li
<?php if(isset($_GET['upcoming'])){?>
class="active"
<?php } >>
<a href="#upcoming">
<span>Upcoming</span>
</a>
</li>

...if is set an URL variable called "upcoming" set the current tab active assiged the class "active" to the properties of the current <li> element

Step3: CSS Code
CSS code is:

ul, li{border:0; margin:0; padding:0; list-style:none;}
ul{
border-bottom:solid 1px #e9f0f5;
height:29px;
}
li{float:left; margin-right:2px;}

.tab a:link, .tab a:visited{
background:url(img/tab-round.png) right 60px;
color:#56554e;
display:block;
font-weight:bold;
height:30px;
line-height:30px;
text-decoration:none;
}
.tab a span{
background:url(img/tab-round.png) left 60px;
display:block;
height:30px;
margin-right:14px;
padding-left:14px;
}
.tab a:hover{
background:url(img/tab-round.png) right 30px;
display:block;
color:#e0ded0;
}
.tab a:hover span{
background:url(img/tab-round.png) left 30px;
display:block;
}

/* ------------------------- */
/* ACTIVE ELEMENTS */
.active a:link, .active a:visited, .active a:visited, .active a:hover{
color:#1c4e7e;
background:url(img/tab-round.png) right 0 no-repeat;
}
.active a span, .active a:hover span{
background:url(img/tab-round.png) left 0 no-repeat;
}

It's all! Download the source code to reuse it in your projects.

If your site has a different color scheme you can change the colors of the image using for example photoshop or gimp.

Download source code

Blogger Tips: feeds RSS list menu

Some readers asked to me ho to add the feed RSS menu in my previous post in their Blogger template.

It's very simple and no complex following these simple instructions. (I added this menu on my template... click on the Feed Rss link on my navigation bar).

Step 1: CSS Code for your menu
I suggest you to use Dreamweaver or an external editor do modify your template (you can also use notepad). Copy and paste HTML code in the step 1 and add it where you want in the source code of your template. I changed CSS code of #rss-menu ID adding a position:absolute, and z-index=2 (to display above all other elements in the page)

/* -------------------------------- */
/* RSS MENU */
#rss-menu{
padding:10px;
padding-top:0px;
width:270px;
border:solid 1px #CCCCCC;
margin-top:10px;
font-size:11px;
position:absolute;
background:#FFFFFF;
margin-left: 446px; /* Change it with your custom distance from the left margin */
top: 82px; /* Change it with your custom distance from top */
z-index:2;
}

Step 2: images
If you want to use directly my images, change the css feed icons code with:

/* FEED ICONS */
.feed-yahoo{
background:url(http://lh5.ggpht.com/antonio.lupetti/
SGkbSeViXCI/AAAAAAAABq0/VKFk--P6rzg/s144/feed-yahoo.png) no-repeat;
}
.feed-newsgator{
background:url(http://lh6.ggpht.com/antonio.lupetti/
SGkZt949soI/AAAAAAAABqk/0K_xT635iWc/s144/feed-newsgator.png) no-repeat;
}
.feed-netvibes{
background:url(http://lh6.ggpht.com/antonio.lupetti/
SGkZsku-McI/AAAAAAAABqc/geaegB--2R0/s144/feed-netvibes.png) no-repeat;
}
.feed-bloglines{
background:url(http://lh6.ggpht.com/antonio.lupetti/
SGkZlVYv_1I/AAAAAAAABqM/HSGE2JRVGA8/s144/feed-bloglines.png) no-repeat;
}
.feed-xml{
background:url(http://lh4.ggpht.com/antonio.lupetti/
SGkZvPomXRI/AAAAAAAABqs/hXOtnqszlws/s144/feed-xml.png) no-repeat;
}
.feed-google{
background:url(http://lh4.ggpht.com/antonio.lupetti/
SGkZrkp8XCI/AAAAAAAABqU/Yp-Rb_1L98k/s144/feed-google.png) no-repeat;
}

You can also save these images in your Picasa web album which you can use to store all image to publish on your blog. If you need more infos about some blogger tips take a look at this my old post.

Step 3: Javascript to show/hide the menu
Add the javascript function in the step 3 in the <head> tag of your blogger template inside the <script> tag:

It's all! If you need for help, contact me :)

Download source code


Related Content
Nice CSS menu with feed reader icons list
Some Blogger Tips you probably don't know

Nice CSS menu with feed reader icons list

This tutorial illustrates how to design a nice CSS menu with a list of feed reader icons.

I added to this menu the following links: standard reader (your browser), My Yahoo, NewsGator, Bloglines, Netvibes and Google Reader. The result is something like this:

Download source code for the full code and icons.

Download this tutorial

Step 1: HTML Code
Create a <div> element with ID=rss-menu and add an header using <h2> tag and an unordered list using <ul> tag:

<div id="rss-menu">
<h2>Subscribe My Feeds</h2>
<ul>

<li class="feed-xml">
<a href="http://feeds.feedburner.com/Woork">Subscribe to RSS Feed</a&gt;
</li>

<li class="feed-yahoo">
<a href="http://add.my.yahoo.com/rss?url=http://feeds.feedburner.com/Woork">Add to My Yahoo</a>
</li>

<li class="feed-newsgator">
<a href="http://www.newsgator.com/ngs/subscriber/subext.aspx?url=http://feeds.feedburner.com/Woork">Subscribe in NewsGator</a>
</li>

<li class="feed-bloglines">
<a href="http://www.bloglines.com/sub/ http://feeds.feedburner.com/Woork">Subscribe with Bloglines</a>
</li>

<li class="feed-netvibes">
<a href="http://www.netvibes.com/subscribe.php?url=http://feeds.feedburner.com/Woork">Add to Netvibes</a>
</li>

<li class="feed-google">
<a href="http://fusion.google.com/add?feedurl=http://feeds.feedburner.com/Woork">Add to Google</a>
</li>

</ul
</div>

How you can see from the code above, each feed reader link is contained into a <li> element:

I designed and used a background icon for each <li> element (using CSS), adding a short description. (ex. "Add to netvibes").


Step 2: CSS Code
I used a CSS class for each feed icons:

.feed-yahoo{
background:url(pic/feed-yahoo.png) no-repeat;
}
.feed-newsgator{
background:url(pic/feed-newsgator.png) no-repeat;
}
.feed-netvibes{
background:url(pic/feed-netvibes.png) no-repeat;
}
.feed-bloglines{
background:url(pic/feed-bloglines.png) no-repeat;
}
.feed-xml{
background:url(pic/feed-xml.png) no-repeat;
}
.feed-google{
background:url(pic/feed-google.png) no-repeat;
}

Download source code for full CSS code.


Step 3: Show/Hide Menu with Javascript
You can also add a javascript function to show/hide this menu in your page adding this simple javascript code in the <head> tag:

function showlayer(layer){
var myLayer = document.getElementById(layer).style.display;
if(myLayer=="none"){
document.getElementById(layer).style.display="block";
} else {
document.getElementById(layer).style.display="none";
}
}

This function take in input a parameter which is the ID of the layer you want to show/hide (in this case "rss-menu"). So, create a button which you can use to show/hide your menu:

<a href="#" onclick="javascript:showlayer('rss-menu')" class="rss-button">Subscribe My Feed</a>

If you want your menu is displayed above the content of your page set CSS attribute position to absolute

It's all!

Download this tutorial

Funny Facts about Men & Women

My friend send me this email. Tanks François Oswald, I liked very much, it is so funny and real.Funny Facts about Men & Women:Men: All men are extremely busy.Although they are so busy, they still have time for women.Although they have time for women, they don’t really care for them.Although they don’t really care for them, they always have one around.Although they always have one around them,

PHOTOS - morph into a animal (FUN)

In youwild you can morph yourself -- or a friend, family member or pet -- into an imperiled animal of your choice.It´s a fun way to learn about imperiled wildlife and a fun way to play with your friends or family.It's simple: You start by choosing an animal from our selection of wolf pups, sea otters, pandas, lions, chimpanzees, and other adorable, majestic, and even scary-looking critters.