Explicacion de paginas

hola Mis Sparkles Como Están Espero QUE MUY BIEN !! bueno hoy les traigo un explicador de paginas no se si me explico hacique aqui va ala imagen :

Bueno Cada Uno Tu Lo Precionas Y Contiene un Texto Ok Si Lo Quieren Se Van A :

Plantilla Blogger :
Diseño -> Añad Un Gadget -> HTML Javascript

Plantilla Blogskin :
Plantilla </style>

Y Pegan :

<style>
a.mid{background:#A2C898;width:55px;display:inline-block;text-align:center;color:#fff;margin-bottom:1px;font:11px arial;text-transform:uppercase;letter-spacing:2px;-webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;padding:1px;border:1px solid #A2C898;cursor:pointer;}
a.mid:hover{background:#FFffff;border:1px solid #A2C898;color:#A2C898;}
 </style><div style="width:250px;">

<center><a class="mid" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('1').innerHTML" >Tab 1</a><a class="mid" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('2').innerHTML" >Tab 2</a><a class="mid" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('3').innerHTML" >Tab 3</a><a class="mid" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('4').innerHTML" >Tab 4</a></center>
<div id="wnsb" style="margin-top:5px;width:230px; padding:10px; border:1px dashed #ddd;">Navigate around. Replace this with anything/your own words.</div>
<div id="1" style="display: none;">Aqui pone tu texto explicatorio</div>
<div id="2" style="display: none;">Aqui pone tu texto explicatorio
</div>
<div id="3" style="display: none;">Aqui pone tu texto explicatorio
</div>
<div id="4" style="display: none;">Aqui pone tu texto explicatorio
</div>
</div>

Editan Lo Que Esta En Burdeo :

Se Despide Chinnix~ 

Besos Por Montón