OK, pues si ya sabes cambiar de sitio los botones, me ahorro explicación. De todas maneras, si no te sale, te puedo ayudar.
Bien, para tener eso en tu web, te bajas
este archivo (es el jQuery) a la carpeta de tu web, y luego, en modo código, pones entre <head> y </head> esto:
Código HTML:
<style type="text/css">
body {
background:#657077;
margin:40px;
}
#tabbed_box_1 {
margin: 0px auto 0px auto;
width:300px;
}
.tabbed_box h4 {
font-family:Arial, Helvetica, sans-serif;
font-size:23px;
color:#ffffff;
letter-spacing:-1px;
margin-bottom:10px;
}
.tabbed_box h4 small {
color:#e3e9ec;
font-weight:normal;
font-size:9px;
font-family:Verdana, Arial, Helvetica, sans-serif;
text-transform:uppercase;
position:relative;
top:-4px;
left:6px;
letter-spacing:0px;
}
.tabbed_area {
border:1px solid #494e52;
background-color:#636d76;
padding:8px;
}
ul.tabs {
margin:0px; padding:0px;
margin-top:5px;
margin-bottom:6px;
}
ul.tabs li {
list-style:none;
display:inline;
}
ul.tabs li a {
background-color:#464c54;
color:#ffebb5;
padding:8px 14px 8px 14px;
text-decoration:none;
font-size:9px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
text-transform:uppercase;
border:1px solid #464c54;
}
ul.tabs li a:hover {
background-color:#2f343a;
border-color:#2f343a;
}
ul.tabs li a.active {
background-color:#ffffff;
color:#282e32;
border:1px solid #464c54;
border-bottom: 1px solid #ffffff;
}
.content {
background-color:#ffffff;
padding:10px;
border:1px solid #464c54;
font-family:Arial, Helvetica, sans-serif;
}
#content_2, #content_3 { display:none; }
.content ul {
margin:0px;
padding:0px 20px 0px 20px;
}
.content ul li {
list-style:none;
border-bottom:1px solid #d6dde0;
padding-top:15px;
padding-bottom:15px;
font-size:13px;
}
.content ul li:last-child {
border-bottom:none;
}
.content ul li a {
text-decoration:none;
color:#3e4346;
}
.content ul li a small {
color:#8b959c;
font-size:9px;
text-transform:uppercase;
font-family:Verdana, Arial, Helvetica, sans-serif;
position:relative;
left:4px;
top:0px;
}
.content ul li a:hover {
color:#a59c83;
}
.content ul li a:hover small {
color:#baae8e;
}
</style>
<script src="jquery.js"></script>
<script>
// When the document loads do everything inside here ...
$(document).ready(function(){
// When a link is clicked
$("a.tab").hover(function () {
// switch all tabs off
$(".active").removeClass("active");
// switch this tab on
$(this).addClass("active");
// slide all content up
$(".content").hide();
// slide this content up
var content_show = $(this).attr("title");
$("#"+content_show).fadeIn('slow');
});
});
</script> Y donde quieras que salga "eso" pones este código:
Código HTML:
<div id="tabbed_box_1" class="tabbed_box">
<h4>Browse Site <small>Select a Tab</small></h4>
<div class="tabbed_area">
<ul class="tabs">
<li><a href="#" title="content_1" class="tab active">Topics</a></li>
<li><a href="#" title="content_2" class="tab">Archives</a></li>
<li><a href="#" title="content_3" class="tab">Pages</a></li>
</ul>
<div id="content_1" class="content">
<ul>
<li><a href="">HTML Techniques <small>4 Posts</small></a></li>
<li><a href="">CSS Styling <small>32 Posts</small></a></li>
<li><a href="">Flash Tutorials <small>2 Posts</small></a></li>
<li><a href="">Web Miscellanea <small>19 Posts</small></a></li>
<li><a href="">Site News <small>6 Posts</small></a></li>
<li><a href="">Web Development <small>8 Posts</small></a></li>
</ul>
</div>
<div id="content_2" class="content">
<ul>
<li><a href="">December 2008 <small>6 Posts</small></a></li>
<li><a href="">November 2008 <small>4 Posts</small></a></li>
<li><a href="">October 2008 <small>22 Posts</small></a></li>
<li><a href="">September 2008 <small>12 Posts</small></a></li>
<li><a href="">August 2008 <small>3 Posts</small></a></li>
<li><a href="">July 2008 <small>1 Posts</small></a></li>
</ul>
</div>
<div id="content_3" class="content">
<ul>
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Contribute</a></li>
<li><a href="">Contact</a></li>
</ul>
</div>
</div>
</div> Dentro de <div id="content_1"> es donde tienes que cambiar el código para que salga el texto, imágenes... que tú quieras.
Un saludo
.