Código, Web y Blogs


Sidebar desplegable acordeón en Blogger con jQuery [2024]

La barra lateral de Blogger suele a veces tener demasiado contenido con un poco de jQuery podemos hacer que estos elementos se "oculten" bajo un efecto acordeón para así de esta forma ganar algo de espacio, veamos un breve demo en este GIF:


1. Para implementarlo en nuestro blog iremos a tema > Editar HTML:



2. Una vez allí presionamos "Ctrl+ F" y buscaremos el siguiente código </head>.

3. Justo debajo pegaremos lo siguiente (Lo que está resaltado en naranja es la librería de jQuery si ya la tienes instalada en tu plantilla no copies esa parte):


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript">
//<![CDATA[
$(function() {
    $('.sidebar .widget-content').hide();   
    $('.sidebar h2:first').addClass('active').next().slideDown('slow');
    $('.sidebar h2').click(function() {
        if($(this).next().is(':hidden')) {           
            $('.sidebar h2').removeClass('active').next().slideUp('slow');     
            $(this).toggleClass('active').next().slideDown('slow');
        }
    });
});
//]]>
</script>

4. Guarda los cambios y observa como ronda todo en la barra lateral de tu blog.


GIF de una captura de pantalla - GIFCAM portable 2024

Algunos usuarios me han preguntado como hago GIF de una captura de pantalla por ejemplo cuando deseo mostrar como se hace un paso en especifico, hago uso de GifCam un programa simple y fácil de usar que me proporciona hacer esto sin marcas de agua, ejemplo:



Puedes descargar el programa (Dando click por aquí) una vez descargado su uso es bastante elemental pero aquí una breve mini explicación.

¿Cómo usarlo?

1. Descarga el programa luego abre el archivo .zip y ejecuta GifCam.exe

 
2.  Tendrás un recuadrom, ahora en la parte de Rec da click en la flechita y configura los parámetros dejando "Capture Cursor" y seleccionando "33FPS":




3. Una vez configurado acomoda la grabación según el tamaño de pixeles que quieras usar y empieza en REC finalmente para todo y luego guarda el archivo dando en "save" escoge donde lo vas a guardar y estuvo:


Es todo en este breve pero útil muy útil post. 


ESTAMOS EN: