Widget Acordeón para blogger


Widget Acordeón para blogger

Estabas buscando un Widget en forma de Acordeón para blogger en el cual puedas insertar  tus widgets y que aparezcan al momento de dar un clic en cualquier nombre especificado de tu widget Acordeón? entonces si estabas buscando este genial y fabuloso widget, Ayudadeblogger.com te lo presenta con unos simples pasos para realizar este gran e innovador truco para uso exclusivo en blogger. Las características principales de este widget son las siguientes:

Lo podrás usar para insertar 5 widgets en un solo widget.

Si tienes demasiados widgets en tu blog y quieres que se muestren solo cuando dan un clic en cada nombre, entonces este es el widget que necesitas para tener tu blog mas organizado y no se muestre demasiados widgets, lo podrás usar en forma de categorías o como mejor lo requieras.

Por ejemplo yo tengo insertado el código del widget Acordeón en mi blog de pruebas en el cual puse 5 diferentes widgets por categorías, los cuales son los siguientes:

Suscríbete
Diseño de páginas Web
Galería de Imágenes
Ultimas Publicaciones
Nuevos Comentarios

Widget Acordeón para blogger

A continuación mire la demostración del Widget Acordeón en mi blog de demos, el widget se encuentra en la parte superior derecha y el cual lleva el nombre de “Mi Widget Acordeón


Ahora que han visto la demostración, nos dirigimos a trabajar.

1 Abrir blogger
2 Da un clic en “Diseño” y en “Añadir un gadget” y busca el widget que dice “HTML/javascript” e inserta el siguiente código en su interior.

<style type="text/css">
#accordion{width:100%;margin:auto;border:0px solid white}
#accordion h2{padding:5px 10px;background-color:#ccc;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTtQKoUe_N0pP4bdGFAG7VDIIe8gPPnfJgx8YuELqbOzIjn0A1jOBZe4ej_0BlRoEsuXB1McjlJ40NGN4rnuGRnpsmX1n2c-B5EgoXz3NEUSjU6Q91FLcICeOaQpJzAF3KADqqWgGwV8o/s1600/arrow_right.gif);background-repeat: no-repeat;background-position: right center;color:#000;font:normal 11px Tahoma;border-bottom:1px solid #FFF;cursor:pointer;}
#accordion .content{font:normal 11px Arial;padding:5px 10px;background:#eee;}
#accordion .content ul {list-style:none;margin:0 0 0;padding:0 0 0;}
#accordion .content li {background-image: url(); background-repeat: no-repeat;background-position: left center;margin:0;padding:2px 0 3px 0;text-indent:0px;border-bottom:1px dotted #ccc;line-height:1.3em;}
#accordion .content li a:hover {text-decoration:none;color:#000;}
#accordion h2.active{background-color:#bbb;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMeCZg3Oa73-RiH98Snn5rKoQwXnoMuj2A6T_WErM0dJp0ySfCzMxfQSXDepQyiQE8brvIgLaflUjaWJIyl-KvCzRaxIng23gpPSREPrNnplfxkSHa2h75zRxkNNhLlyjDhcieUR39Gbw/s1600/arrow_down.gif);background-repeat: no-repeat;background-position: right center;font-weight:bold;}
</style>
<script type="text/javascript" src="http://yourjavascript.com/121511228073/accordion-menu.js"></script>
<script type='text/javascript'>
$(function() {
$('#accordion .content').hide();
$('#accordion h2:first').addClass('active').next().slideDown('slow');
$('#accordion h2').click(function() {
if($(this).next().is(':hidden')) {
$('#accordion h2').removeClass('active').next().slideUp('slow');
$(this).toggleClass('active').next().slideDown('slow');
}
});
});
</script>
<div id="accordion">
<h2>Titulo 1</h2>
<div class="content">
INSERTA AQUI EL CODIGO DE TU WIDGET 1
</div>
<div id="accordion">
<h2> Titulo 2</h2>
<div class="content">
INSERTA AQUI EL CODIGO DE TU WIDGET 2
</div>
<div id="accordion">
<h2> Titulo 3</h2>
<div class="content">
INSERTA AQUI EL CODIGO DE TU WIDGET 3
</div>
<div id="accordion">
<h2> Titulo 4</h2>
<div class="content">
INSERTA AQUI EL CODIGO DE TU WIDGET 4
</div>
<div id="accordion">
<h2> Titulo 5</h2>
<div class="content">
INSERTA AQUI EL CODIGO DE TU WIDGET 5
</div>
</div></div></div></div></div>

Ahora realiza lo siguiente para poder insertar los códigos en tu nuevo widget Acordeón

Donde dice Titulo 1 pon el nombre de la Categoría de tu Widget
Y donde dice INSERTA AQUI EL CODIGO DE TU WIDGET 1 inserta todo el código del widget que quieras que se muestre, recuerda que tienes que insertar todo el código completo en cada una de ellas.

3 Por ultimo da un clic en “Guardar” y ubica tu nuevo widget Acordeón donde tu quieras y visita tu blog, eso es todo.

¿Necesitas ayuda?

Cualquier pregunta no duden en hacérmelo saber y de inmediato les responderé.

Saludos.

Recuerda suscribirte:

Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
¿Te ha resultado útil este artículo, recomiendanos?
Si



Share:

Luis Chávez

Soy el fundador del sitio web Ayudadeblogger.com - Considerado un Pro Blogger profesional, Consultor SEO y desarrollador Web adicto, ejecuto una serie de sitios web desde mi Oficina Quito-Ecuador.

Related post

Comentarios

5 comentarios:

  1. Hola publique este widget junto con un cuestionario y mi pregunta es como hacer que se mantenga cerrado hasta que los usuarios le pinchen ? gracias

    ResponderEliminar
  2. Hola Sombrax, solo se mantiene abierto tu primer widget y los demas estan cerrados, lo cree asi, y el metodo va ha estar haci siempre, ya que el javascript esta creado para eso, sera en una proxima edicion que publique un nuevo widget como tu dices.
    Saludos.

    ResponderEliminar
  3. Holaaa.. es Genial, tiene todas las características que buscaba, sólo que me gustaría que apareciera de forma horizontal.. es posible???
    Gracias de antemano
    Sgroya

    ResponderEliminar
  4. Hola Sgroya, muy buena idea la tuya, pero este post esta publicado solo para que se muestre tal y cual esta. Sera para la proxima publicacion, en la cual la puedo hacer.
    Saludos.

    ResponderEliminar