MAPA DEL SITIO

GRACIAS A TU DONACION ESTA PAGINA PODRA SEGUIR FUNCIONANDO
Comentarios de Puntadas católicas
COMPARTE ESTA ENTRADA





SIGUENOS
Síguenos en TwitterSiguenos en FacebookSiguenos en Google+Siguenos en PicasaSiguenos en YouTubeSiguenos en BloggerSiguenos en Blogger


Widget Acordeón para blogger

Autor:Luis Chavez

Widget Acordeón para bloggerEstabas 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.



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é.

Tal vez te interese

Related Posts Plugin for WordPress, Blogger...
loading...
TRANSLATE


EnglishcvFrenchGermanSpainItalianDutchRussianPortugueseJapaneseKoreanArabicChinese Simplified

Archivo del blog

Entradas populares

Seguidores

 
Gadget de animacion Social - Widgets para Blogger

[PR] 求む!タイピング初心者