add

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(http://1.bp.blogspot.com/-qtI_UsPdZwc/Tmzg5K8eADI/AAAAAAAABrU/ScrT9X8fBBY/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(http://2.bp.blogspot.com/-9If6SXYDklM/Tmzg4W8YwuI/AAAAAAAABrQ/XlCiTeVqtq0/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.

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
  5. Eres el puto amo de los widgets jejejeje

    ResponderEliminar

Discusión

person_pin Luis Chávez

group_work Fundador

contact_phone +593 994589032

email ayudadeblogger@gmail.com

Entradas populares

Youtube.com/ayudadeblogger

Suscríbete

Etiquetas

Adsense dispositivos moviles (2) Alojamiento web (12) Aplicaciones moviles (15) Backlinks (1) Breaking News para Blogger (3) Como (32) Como crear una pagina web gratis (8) Comprar Dominios (2) Comprar un Dominio en Godaddy (2) Configurar dominio de Godaddy en Blogger (1) Consejos de Blogs (33) Consejos de Trafico (12) Correo Dominio (3) Crear un Sitemap (6) Crear una Aplicacion gratis (2) Diseno Responsive (5) Diseño Web (7) En vivo (1) Entradas Populares (18) Enviar Sitemap a Bing y Yahoo (1) Error al analizar XML (5) Facebook trucos (10) Firefox (9) Formulario de contactos (3) Ganar Dinero (22) Google (11) Google Adsense (10) Google Plus (5) Guia de SEO (2) Herramientas Blogger (4) Herramientas para Webmasters (6) Iconos Font Awesome (1) Info Tech (1) La ética de los blogs (2) Laptops (2) Manual Blogger (10) Material Design Blogger (2) Medios de Comunicacion Social (39) Menu desplegable (20) Menu Responsive para Blogger (6) Mobile-friendly (9) Movil (12) Noticias (3) Optimizado para moviles (4) Plantillas Blogger (42) Plantillas Landing page para Blogger (3) Popout (6) Posicionamiento SEO (22) Publicidad (2) SEO Mobile (12) SEO para Moviles (14) Sitemap (1) Sitios web optimizados para moviles (3) Slider Carrusel (7) Slideshow (35) Smartphone (12) Social Media Marketing (1) Tácticas de Marketing (4) Tecnologia (12) Temas de invitados (2) Top Hosting (3) Trucos Blogger (40) Trucos CSS y HTML (11) Web Hosting (14) Widget Acordeón (3) Widget Tab Multiple (1) Widgets para Blogger (69) Widgets Suscripciones (9) Widgets y Plugins (6)

Formulario de contacto

Nombre

Correo electrónico *

Mensaje *

Seguidores

Comentarios