3D Tabs for Blogger/HTML Blog

Blogger has already given the feature of page tabs. Many of the creators have created their own tabs to give new impression and there we created tabs for you to inspire every one. Adding tabs help your visitors to visit your others pages like: About & Contact. These pages help your visitors much to let them understand about your site and works and they contact with you. Blogger tabs menu are out class in 3D world. We have created for you the 3D tabs according to your style. You can style them, color them and reshape according to your template. This widgets is easy to your and customize.

Add HTML Code to Blogger/HTML Blog:

• Go to your Blogger account and open the layout tabs right of your Blogger dashboard.
• Click on the edit widget and open it. Open the HTMl/JavaScript and past the below code on it.

<ul class="nav"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li>   <li class="active"><a href="#">Blog</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Contact</a></li>    </ul>

Replace # with the link of your page.

Add CSS code to Blogger/HTML Blog:

• Go to your Blogger account and open the template tabs right of your Blogger dashboard.
• Click on the edit HTML and open it. The new window appears with your template codes.
• Now press Ctrl + F the new light box will appears and put this ]]></b:skin> code in the box and just above this code ]]></b:skin> past the below code.

.nav {   margin-top:94px;   height: 48px;   display: inline-block;   list-style: none; } .nav li,   .active {   float: left;   position: relative;   margin: 0 0 4px;   height: 44px;   color: #ccc;   text-shadow: 0 1px rgba(0, 0, 0, 0.9);   background-color: rgba(0, 0, 0, 0.05);   border: 1px solid #232428;   border-bottom-color: #1f2326;   background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));   background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));   background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));   background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));   -webkit-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 2px #262a2e, 0 3px #1f2326, 0 4px 3px rgba(0, 0, 0, 0.2);   box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 2px #262a2e, 0 3px #1f2326, 0 4px 3px rgba(0, 0, 0, 0.2); } .nav  li:hover {   color: #b0d157;   text-shadow: 0 1px black, 0 0 20px rgba(255, 255, 255, 0.5); } .nav  li.active, .nav  .active:active, .nav  li:active {   z-index: 2;   margin: 4px 0 0;   height: 43px;   color: #aaa;   text-shadow: 0 1px black;   background-color: rgba(255, 255, 255, 0.03);   border-color: #212425;   background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));   background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));   background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));   background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));   -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), inset 0 -1px 1px rgba(0, 0, 0, 0.15), 1px 0 rgba(0, 0, 0, 0.05), -1px 0 rgba(0, 0, 0, 0.05), 0 1px rgba(255, 255, 255, 0.05);   box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), inset 0 -1px 1px rgba(0, 0, 0, 0.15), 1px 0 rgba(0, 0, 0, 0.05), -1px 0 rgba(0, 0, 0, 0.05), 0 1px rgba(255, 255, 255, 0.05); } .nav  li  a {   display: block;   line-height: 44px;   padding: 0 20px;   font-size: 12px;   font-weight: bold;   color: inherit;   text-decoration: none;   outline: 0; }

Now you can change color and size of widgets. with your own. You can use this widget to help you out more further. 

HTML CSS and JS Code Creator.

We are done from here. Stay with us or subscribe to us to get more updates and news.

---

Tweet

About Post Author:

This post is fruit of pen-clipping of Mohammad Hamza, poineer of ProFeedLinks. He likes to shear about his thought and experience with others.

Read more about Mohammad Hamza »