Hace tiempo que quiero explicarlo, pero no encontraba el momento y... ahora no tengo disculpa, porque he probado en la cabecera de este Blog el mismo métdo de tabs, sólo que algo más completas (como podéis observar, si comparáis las de uno y otro blog).
No es nada difícil llevar a cabo el hack, tan sólo bastante laborioso (dependiendo de si vamos a entrar mucho o poco texto, muchos o pocos vínculos...) y, desde luego, imposible de hacer si a Blogger le sigue dando por impedirnos la "vista previa" :( (¿a qué esperarán para arreglarlo?).
¿De dónde "saqué" este hack?: Pues estaba mirando temas para Wordpress y me encontré con esta plantilla Structure, tan guapa. Y no me quedé con las ganas de bajármela, claro.
Bien... confiando en que Blogger nos deje trabajar, vamos a ver cómo se hace:
.- CSS: Cada quien que lo adapte a sus necesidades y plantilla:
#sidebar .tabs-block, #widget-blocks .tabs-block { width: 300px; }
.tabs-block {
float: left;
margin-bottom: 10px;
}
.tabbed {
width: 100%;
border: none;
padding: 0;
}
/* Actual tabs */
.tabbed ul.tabs {
position: relative;
top: 0;
left: 0;
z-index: 5;
list-style-type: none;
}
.tabbed ul.tabs li { display: inline; float: left; }
.tabbed ul.tabs li a {
display: block;
float: left;
margin: 0 3px 0 0;
padding: 5px .4em;
font-weight: bold;
background: #eee;
border: 1px solid #ccc;
}
.tabbed ul.tabs li a:hover { background: #f7f7f7; text-decoration: none; }
.tabbed ul.tabs li a.tab-current { background: #fff; border-bottom: 1px solid #fff; }
/* Tab content */
.tab-content {
float: left;
overflow: hidden;
clear: left;
z-index: 0;
margin-top: -1px;
border: 1px solid #ccc;
background: #fff;
}
#sidebar .tab-content, #widget-blocks .tab-content { width: 99%; padding: 5px 0; }
div.t2, div.t3, div.t4, div.c2, div.c3, div.c4, div.c5, div.c6, div.c7, div.c8 { display: none; }
/* All post tabs */
#post-tabs, #post-list-tabs, #post-block-tabs { overflow: hidden; width: 616px; margin-bottom: 10px; background: transparent; }
#post-tabs .tab-content, #post-block-tabs .tab-content, #post-list-tabs .tab-content { width: 594px; padding: 10px; }
#post-tabs .post, #post-block-tabs .post, #post-list-tabs .post { margin: 5px 0 0 0; }
#post-tabs .post-title, #post-block-tabs .post-title, #post-list-tabs .post-title { font-size: 1.15em; }
/* Post block tabs */
#post-block-tabs .odd { clear: both; float: left; width: 48%; }
#post-block-tabs .even { float: right; width: 48%; clear: none; }
/* Post list tabs */
#post-list-tabs .odd { float: left; width: 50%; clear: left; }
#post-list-tabs .even { float: right; width: 45%; clear: none; }
#post-list-tabs .tab-content ul { list-style: none; margin-left: 3px; }
#post-list-tabs .tab-content li { margin: 3px 0; }
.- SCRIPTS:
NOTA: Desde que escribí esta entrada, el tema Structure ha sido modificado varias veces y ha eliminado de su sidebar este hack, luego voy a dejar aquí mis scripts. Subidlos a vuestro propio servidor porque me ha costado mucho recuperarlos tras estropearse mi último ordenador, de forma que podéis quedaros sin ellos.
<script src='https://sites.google.com/site/infernoscripta/Inicio/jquery-1.2.6.js' type='text/javascript'/>
<script src='https://sites.google.com/site/infernoscripta/Inicio/Montana_hover.js' type='text/javascript'/>
HTML: Aquí comienza el lío... porque es fácil perderse entre tanto vínculo, título y demás:
<div class='section' id='post-list-tabs'>
<div class='tabbed'>
<ul class='tabs'>
<li class='c1'><a class='c1' title='Blog'>Blog</a></li>
<li class='c2'><a class='c2' title='Taller'>Taller</a></li>
<li class='c3'><a class='c3' title='CSS'>CSS</a></li>
<li class='c4'><a class='c4' title='Y...?'>Y...?</a></li>
</ul>
<div class='c c1 tab-content'>
<div class='post odd'>
<a href='http://cafe-junio.blogspot.com/search/label/Blog' title='Entradas bajo la etiqueta Blog'><img alt='entradas bajo la etiqueta Blog' class='thumbnail' height='100' src='http://.../gcheeta1_Lluvia.jpg' width='200'/></a>
<h3 class='post-title'>
<a href='http://cafe-junio.blogspot.com/search/label/Blog' title='Entradas bajo la etiqueta Blog'>Blog</a>
</h3>
<div class='entry'>
<p>En este enlace se encuentran las entradas de Epílogo almacenadas bajo la etiqueta Blog.</p>
</div>
</div>
<div class='post even'>
<h3 class='post-title'>
algunas entradas bajo
la etiqueta Blog </h3>
<ul>
<li>
<a href='http://cafe-junio.blogspot.com/2008/11/mootools-link-nudging-y-navegacin-con.html' title='Morph'>Mootools link nudging y navegación, con Morph</a>
</li>
<li>
<a href='http://cafe-junio.blogspot.com/2008/11/otro-slider-para-controlar-tamao-de.html' title='Slider'>Otro Slider para controlar el tamaño del texto</a>
</li>
</ul></div>
</div>
<div class='c c2 tab-content'>
<div class='post odd'>
<!-- No images were added to this post. -->
<h3 class='post-title'>
<a href='http://cafe-junio.blogspot.com/2008/12/popeye.html' title='Popeye'>Popeye</a>
</h3>
<div class='entry'>
<p>A veces creo que lo he visto todo en lightboxes... pero anda que no me queda por ver: Por ejemplo, "Popeye", que es una lightbox-query tan especial que nos permite tener galerías de imágenes en sitios tan estrechos como pueden llegar a ser las entradas de un blog. Y para muestra, echad un ojo a mi Prueba [...]</p>
</div>
</div>
<div class='post even'>
<h3 class='post-title'>
entradas bajo la
etiqueta Taller </h3>
<ul>
<li>
<a href='http://cafe-junio.blogspot.com/2008/11/crossslide.html' title='CrossSlide'>CrossSlide</a>
</li>
<li>
<a href='http://cafe-junio.blogspot.com/2008/11/cookies-troyanos-y-demas-gaitas.html' title='Cookies'>Cookies, Troyanos y demás gaitas</a>
</li>
<li>
<a href='http://cafe-junio.blogspot.com/2008/11/typefacejs-tus-fuentes-la-vista-de.html' title='Typeface.js'>Typeface.js: tus fuentes a la vista de todos</a>
</li>
<li>
<a href='http://cafe-junio.blogspot.com/2008/03/mooflow-con-reflection-y.html' title='Mooflow'>Mooflow con reflection y...</a>
</li>
<li>
<a href='http://cafe-junio.blogspot.com/2008/11/precargar-imagenes-cuando-no-puedes.html' title='Precargar imágenes'>Precargar imágenes, cuando no puedes usar Sprites</a>
</li>
</ul></div>
</div>
<div class='c c3 tab-content'>
<div class='post odd'>
<a href='http://cafe-junio.blogspot.com/search/label/CSS' title='CSS'><img alt='CSS' class='thumbnail' src='http://.../Tren.png'/></a>
<h3 class='post-title'>
<a href='' title='CSS'>CSS</a>
</h3>
<div class='entry'>
<p>Las imágenes pueden ser un buen vehículo para enlazar con las entradas que deseamos mostrar: lo mismo para elementos de la sidebar,como el perfil...</p>
</div>
</div>
<div class='post even'>
<h3 class='post-title'>
Entradas bajo la
etiqueta CSS </h3>
<ul>
<li>
<a href='http://cafe-junio.blogspot.com/2008/11/el-grid-perfecto.html' title='El Grid perfecto'>El Grid perfecto</a>
</li>
</ul></div>
</div>
<div class='c c4 tab-content'>
<div class='post odd'>
<!-- No images were added to this post. -->
<h3 class='post-title'>
<a href='http://accesoconetiquetasaepilogo.blogspot.com/' title='Todasla etiquetas'>Acceso a Epílogo por etiquetas</a>
</h3>
<div class='entry'>
<p>En este enlace están todas las etiquetas de Epílogo. Quizás resulta más fácil acceder al blog de esta manera.</p>
</div>
</div>
<div class='post even'>
<h3 class='post-title'>
Otras etiquetas
en Acceso por Etiquetas </h3>
<ul>
<li>
<a href='http://cafe-junio.blogspot.com/search/label/Autor' title='Autor'>Entradas bajo la etiqueta Autor</a>
</li>
<li>
<a href='http://cafe-junio.blogspot.com/search/label/Calendario' title='Calendario'>Entradas bajo la etiqueta Calendario</a>
</li>
<li>
<a href='http://cafe-junio.blogspot.com/search/label/Comentarios' title='Comentarios'>Entradas bajo la etiqueta Comentarios</a>
</li>
<li>
<a href='http://cafe-junio.blogspot.com/search/label/Flash' title='Flash'>Entradas bajo la etiqueta Flash</a>
</li>
<li>
<a href='http://cafe-junio.blogspot.com/search/label/Gimp' title='Gimp'>Entradas bajo la etiqueta Gimp</a>
</li>
</ul></div>
</div>
</div></div>
Es muy fácil y lo encuentro utilísimo para ahorrar espacio en nuestras páginas...
NOTA: Se me ovidaba... que podéis ver los distintos "looks" de Structure y descargarlo, así como los scripts que os hacen falta, Aquí
✍ ¿Quieres hacer algún comentario? ✍