• 2008: 01 02 03 04 05 06 07 08 09 10 11 12
  • 2007: 01 02 03 04 05 06 07 08 09 10 11 12
  • Posts en la categoría ‘javascript’

    28 Nov

    Añadir comentarios a tumblr

    tumblr por defecto no incluye la posibilidad de añadir comentarios pero gracias a Disqus se puede hacer de forma fácil.

    Primero añade el siguiente código antes de la etiqueta {/block:Posts}:

    <a href="{Permalink}#disqus_thread">Comments</a>

    Y el siguiente después:

    {block:Permalink}
    <script type="text/javascript">var disqus_url = "{Permalink}"; var disqus_title ="{block:PostTitle}{PostTitle}{/block:PostTitle}";</script>
    <div id="disqus_thread"></div><script type="text/javascript" src="http://disqus.com/forums/tuusuario/embed.js">
    {/block:Permalink}

    Y para acabar este último script que cuenta cuantos comentarios hay en cada post antes de la etiqueta </body>

    <script type="text/javascript">
    //<[CDATA[
    (function() {
            links = document.getElementsByTagName('a');
            query = '?';
            for(var i = 0; i < links.length; i++) {
                if(links[i].href.indexOf('#disqus_thread') >= 0) {
                    query += 'url' + i + '=' + encodeURIComponent(links[i].href) + '&';
                }
            }
            document.write('<script type="text/javascript" src="http://disqus.com/forums/tuusuario/get_num_replies.js' + query + '"></' + 'script>');
        }());
    //]]>
    </script>

    Así de fácil, eso si hay que registrarse en Disqus y sacar las líneas de código de allí, las de aquí son solo un ejemplo.

    18 Jul

    Mootools Fx.Slide

    Hasta la fecha nunca me había decidido a meterle mano a MooTools y Ajax pero con este theme se ha acabado, este primer paso es algo fácil pero por algo se empieza.

    El primer efecto que he incorporado es el fx.slide y para hacerlo lo único que he hecho ha sido mirar el código de la demo y adaptarlo. Quizás no sea la mejor opción o la metodología que usan los profesionales pero a mi me sirve.

    Lo primero es añadir MooTools y crear la clase que deseamos en el header.php de nuestro template.

    <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/mootools.js"></script>
    <script type="text/javascript">
        window.addEvent('domready', function(){
        var mySlide = new Fx.Slide('cats');
            $('allcat').addEvent('click', function(e){
                e = new Event(e);
                mySlide.toggle();
                e.stop();
            });
            mySlide.toggle();
        });
    </script>

    Una vez añadido este código solo nos queda usar las clases creadas en el lugar donde lo deseamos.

    <a id="allcat" href="#" name="allcat">todas</a>
    
    <div id="cats">
        <ul>
            ...
        </ul>
    </div>

    Aquí acaba todo, si te interesa algún efecto más aparte del toogle solo tienes que usarlo de la misma forma, haciendo los cambios pertinentes.