viernes, 31 de agosto de 2012

Widget contenedor de gadget muy fácil de instalar en tu Blog


La caja de contenido con pestañas o tab view es una gran manera de maximizar el uso del espacio de tu plantilla Blogger.

Existen muy pocos tutoriales que muestran cómo crear pestañas con CSS y JQuery, sin embargo, la mayoría requiere que se modifique los códigos de la plantilla del blog, además de eso, también hay que añadir manualmente el contenido de cada gadget que quieras añadir en el contenedor.

Afortunadamente, con este tutorial te ahorrarás todo ese quebradero de cabeza. Lo único que tienes que hacer es añadir el siguiente código tabber en un widget de HTML/Javascript. Una vez añadido, va a transformar de forma automática los gadgets existentes en tu blog de Blogger en pestañas. 


Puedes ver un ejemplo de este widget funcionando en el sidebar de la derecha de mi blog ^_^


A continuación, te dejo algunas de las características del contenedor de gadget multipestañas: 

  1. Tiene capacidad para un número ilimitado de gadgets.
  2.  Mantiene la apariencia original de las cabeceras de los gadgets.
  3. Totalmente automático, fácil de instalar o remover. Si no te gusta cómo queda, basta con que quites el gadget HTML/Javascript.
  4. Puedes cambiarlo de lugar.

Instalación

  1. Ir a Diseño y haz clic sobre "añadir un gadget".
  2. Selecciona el gadget HTML/Javascript.
  3. Deja en blanco el lugar en donde va el título.
  4. Copia el código de abajo y pegalo en la caja de Contenido.

<style type="text/css">
.tabber {
 padding: 0px !important;
 border: 0 solid #bbb !important;
}
.tabber h2 {
 float: left;
 margin: 0 1px 0 0;
 font-size: 12px;
 padding: 3px 5px;
 border: 1px solid #bbb;
 margin-bottom: -1px; /*--Pull tab down 1px--*/
 overflow: hidden;
 position: relative;
 background: #e0e0e0;
 cursor:pointer;
}
html .tabber h2.active {
 background: #fff;
 border-bottom: 1px solid #fff; /*--"Connect" active tab to its content--*/
}
.tabber .widget-content {
 border: 1px solid #bbb;
 padding: 10px;
 background: #fff;
 clear:both;
 margin:0;
}
.codewidget, #codeholder {
 display:none;
}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript" src="http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bloggertabs0.1_min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
 $('#codeholder').bloggerTabber ({
  tabCount : 3
 });
});
</script>

<!-- to make sure the widget works, do not alter the code below -->
<div id='codeholder'><p>Get this <a href="http://www.bloggersentral.com/2011/05/create-tabbed-content-blogger-widgets.html" target="_blank">tabber widget</a></p></div>

  • La línea de código que está marcado con amarillo es para cargar la librería Jquery. Quita esa línea si ya la tienes cargada en otro lugar de tu blog. Si tu blog tiene un efecto deslizante, atenuación o cualquier otro efecto especial, lo más probable es que ya tengas una librería Jquery instalada en tu blog.
  • Puedes especificar el número de gadgets (pestañas) que quieres que contenga el widget en la línea marcada con verde.
  • El color predeterminado del contenedor es el blanco (# fff). Puedes cambiar de color en la línea de código marcada con azul. Puedes hacer lo mismo en las líneas de código marcadas con el color violeta. "Background" es el color de fondo y "border" es el color del borde.
  • Puedes modificar el ancho del borde en las líneas marcadas con rosado fuerte.

  1. Coloca el gadget HTML/Javascript encima de los gadgets que quieres que contenga.

  1. Haz clic en Guardar y luego visualiza el blog.


Después de la instalación

  • Asegúrate de que los gadgets que quieres contener tengan títulos, o el widget contenedor no funcionará correctamente.
  • Para que las pestañas del widget contenedor encajen en una sola fila, los títulos de los gadgets contenidos debes ser cortos.
  • Tal vez tengas que reducir el ancho de los gadgets contenedores para que encajen correctamente en la caja contenedora.
  • Asegúrate de que funcione en todos navegadores, si no, no lo utilices. Chrome visualiza este widget muy bien ^_^
  • Éste widget sólo se puede poner una sola vez. Si colocas más de uno, sólo funcionará el primero.

¡Disfrútenlo!

Fuente: http://www.bloggersentral.com/2011/05/create-tabbed-content-blogger-widgets.html

19 comentarios :

  1. Genial. No había entendido eso de ponerlo encima ahora si. También hay que recortar los nombres de los gadgets.
    Felicidades, llevaba tiempo buscando esto. Lástima que no se puedan poner más de uno.

    ResponderEliminar
    Respuestas
    1. Tengo tres blogs. En uno lo he probado y sale, pero en el otro no sale, no se si habrá algo que interfiere.

      Eliminar
    2. Sí, es una verdadera lástima que no se pueda poner más de uno... Je, y yo también no había entendido mucho eso de poner el gadget "encima" de los demás XD
      En cuanto a tu problema, tal vez tengas algún conflicto con la librería Jquery... Probá con borrar la línea que está coloreada con amarillo en el código del gadget a ver qué pasa y luego me cuentas cómo te fue ^_^

      Eliminar
    3. Quite eso de la libreria porque lo lei que lo ponias, puse los nombres más pequeños. No se como reducir eso de la caja del gadget, porque no veo las medidas width y height en los gadgets que tengo. La único que puede interferir sea que puse hace poco lo de las cajas de facebook, google y twitter en el blog que no me va esto, y en el otro que me va no lo tengo, es la única diferencia.
      www.culiblanco-futbol.com

      Eliminar
    4. Pasame la dirección de tu sitio y la plantilla que usas, a ver si te puedo ayudar ^_^

      Eliminar
    5. Muchas gracias. Mi sitio es http://www.culiblanco-futbol.com/
      Plantilla Etéreo

      Eliminar
    6. De nada ^_^ Mañana me fijo y veré si puedo encontrarle el problema :)

      Eliminar
    7. Definitivamente parece haber un conflicto entre este gadget y uno de los que estás usando en tu blog (probablemente es el que mencionas). Te sugiero que, si quieres estar seguro de que ése es el gadget que genera el conflicto, lo desinstales un momento de tu plantilla para corroborarlo. Y si no es ése el caso, te sugiero que leas esta entrada del grandioso y sabio El Potro a ver si te ayuda en algo. A mí me ha servido un montó su gran conocimiento en blogger ^_^
      http://ciudadblogger.com/2011/10/jquery-sus-versiones-y-el-conflito.html
      ¡No olvides contarme cómo te fue! :)

      Eliminar
    8. Aquí te dejo otra entrada muy interesante y que habla de las cajas deslizantes que estás utilizando:
      http://ciudadblogger.com/2013/01/fanbox-para-facebook-twitter-y-google-plus-flotantes-y-con-efecto-deslizante.html

      Eliminar
  2. Gabriella la caja que tengo instalada, es de Potro, la instale hace varios dias. Probare lo que dices.
    Gracias

    ResponderEliminar
    Respuestas
    1. Sí, me sospechaba eso ^_^ La verdad hace mucho que no visito al Potro porque intento no saturar al blog de cosas demasiado vistosas o que utilicen scripts que relentizan la carga del blog.
      Espero que tengas suerte y luego me cuenta cómo te fue ^_^
      Otra cosa, ese gadget de imágenes que se desvanecen que tienes en tu blog, puede que también esté generando conflictos... Prueba con desinstalarla un momento a ver qué pasa.

      Eliminar
    2. Ya te contare, es que tenia tres blogs y quiero ponerlo todo en este. Pero eso de las imágenes que se desvanecen no se a que te refieres, como no t refieras a las pestañas.

      Eliminar
    3. Perdón ^.^ es el gadget que dice "Mis imágenes CULIBLANCO por FRANCISCO NIETO".

      Eliminar
  3. A vale, pues he puesto tres, jejeje. No se si quitar dos y aprovechar solo uno. Es que antes ponía uno en cada blog y lo he puesto todo en este, no se si esto retarda abrir la página.

    ResponderEliminar
    Respuestas
    1. Tengo entendido que mientras más efectos y gadgets tenga un blog, más tarda en cargar. ¿Viste el blog del Potro, no? No está para nada cargado, tiene lo justo y lo necesario ^_^ Para mi gusto, a mi me encanta tener un blog "bonito", pero tuve que renunciar a varios gadgets que tenía antes para que el blog cargue más rápido :( Es sólo cuestión de gustos, ¿no? :)

      Eliminar
  4. hola yo tambien tengo problemas .. porfis ayudame este es mi direccion
    ya que al añadir no me aparece , esta es mi direccion gracias
    http://mimundodelibrosgratis.blogspot.com/

    ResponderEliminar
    Respuestas
    1. En cuanto le agarre de nuevo la mano al html, te ayudo :>)

      Eliminar
  5. Hola. Yo he probado en poner la cajita y me va perfectamento. Lo unico es que se queda un poco corta, se sale el contenido que quiero que este dentro de la caja por abajo un poco.
    Me gustaría saber como hacer la caja un poco más larga, cambiar ancho y largo.

    Muchas gracias

    ResponderEliminar
    Respuestas
    1. Cuando vuelva a agarrarle la mano al html, trataré de ayudarte :>)

      Eliminar

Deja tu comentario, siempre con respeto, si no lo haces, lo eliminaré.
Antes de preguntar sobre algo, busca primero la respuesta en los comentarios anteriores, tal vez ahí esté tu respuesta ^_^

Si quieres insertar una imagen usa este código:
[img]URL de la imagen[/img]

Si quieres insertar un video de YouTube o Vimeo usa este código:
[video]URL del video[/video]

No incluyas material para adultos, ni vulgar u ofensivo; tampoco contenido con odio, racismo o discriminación, de lo contrario tu comentario será eliminado.

:) :-) :)) =)) :( :-( :(( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ :-$ (b) (f) x-) (k) (h) (c) cheer
Related Posts Plugin for WordPress, Blogger...