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(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.
Recuerda suscribirte:
Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
5 comentarios: