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

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

TAGS: Widget Acordeón

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.