Diversas y Variadas (Ayuda Blogger): noviembre 2009

En un post anterior vimos como expander y contraer el gadget de Archivo con efecto deslizante; hoy vamos a hacer lo mismo con el gadget de etiquetas. Como dije en la entrada mencionada, si bien la forma de lograrlo es casi igual para cualquier gadget, a muchos les parece difícil conseguirlo en el gadget de etiquetas y archivos por eso vamos a hacer este post dedicado para el gadget de etiquetas usando Prototype y Scriptaculous.

Si deseamos conseguir este efecto deslizante para los Archivos, mirad » esta entrada

Para conseguirlo, seguimos los siguientes pasos:

1.§ Vamos a Diseño - Edición de HTML y Expandir plantillas de artilugios.

2.§ Con ayuda de CTRL+F buscamos </head> y antes de éste pegaremos el siguiente código:

<script src='http://www.google.com/jsapi'/>
<script>
google.load("prototype","1.6.0.3");
google.load("scriptaculous", "1.8.2");
</script>

Sí ya tenemos este código en nuestra plantilla no será necesario agregarlo de nuevo.

3.§ Ahora , nuevamente con ayuda de CTRL+F buscaremos el nombre que le dimos al gadget de nuestra sección etiquetas.

Por ejemplo, digamos que la sección de etiquetas se llama Las etiquetas,el nombre deberemos de buscarlo en la plantilla y deberá de tener la siguiente estructura:

<b:widget id='Label1' locked='false' title='Las etiquetas' type='Label'>

4.§ Con mucho cuidado insertamos lo que está resaltado en negrita, sin olvidar el </div> que está casi al final; debemos de tener en cuenta que el código puede cambiar un poco según cada plantilla, pero nos guiaremos por el código que está debajo de las líneas que pegaremos:

<b:widget id='Label1' locked='false' title='Las etiquetas' type='Label'>
<b:includable id='main'>
<a href='#' onclick='Effect.toggle("Etiquetas","slide"); return false'>
<b:if cond='data:title != ""'>
<h2 class='title'>▼/▲ <data:title/></h2>
</b:if>
</a><div align='left' id='Etiquetas' style='display: none;'>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'>
<data:label.name/>
</span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url + "?max-results=30"'>
<data:label.name/>
</a>
</b:if>
<span dir='ltr'>(<data:label.count/>)</span>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</div>
</b:includable>
</b:widget>

Damos click a guardar.

[+/-]

Ayuda para los niños de Trujillo

[+/-]

Efecto arco iris para los enlaces

Un efecto muy bonito y sencillo de lograr; consiste en que cada vez que pasamos el mouse sobre un enlace, este se pone de distintos colores.
Para ver un ejemplo, pasar el mouse sobre cualquier enlace de mi blog de pruebas.

Para lograr este efecto seguimos los siguienets pasos:

1.§ Vamos a Diseño - Edición de HTML.

2.§ Con ayuda de CTRL+F buscamos </head> y justo antes de éste, pegaremos el siguiente script:

✵ Ver SCRIPT [+/-]

<script type='text/javascript'>

//Arco iris

//<![CDATA[

var rate = 20;

if (document.getElementById)
window.onerror=new Function("return true")

var objActive; // The object which event occured in
var act = 0;    // Flag during the action
var elmH = 0;   // Hue
var elmS = 128; // Saturation
var elmV = 255; // Value
var clrOrg;     // A color before the change
var TimerID;    // Timer ID

if (document.all) {
    document.onmouseover = doRainbowAnchor;
    document.onmouseout = stopRainbowAnchor;
}
else if (document.getElementById) {
    document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);
    document.onmouseover = Mozilla_doRainbowAnchor;
    document.onmouseout = Mozilla_stopRainbowAnchor;
}

function doRainbow(obj)
{
    if (act == 0) {
        act = 1;
        if (obj)
            objActive = obj;
        else
            objActive = event.srcElement;
        clrOrg = objActive.style.color;
        TimerID = setInterval("ChangeColor()",100);
    }
}

function stopRainbow()
{
    if (act) {
        objActive.style.color = clrOrg;
        clearInterval(TimerID);
        act = 0;
    }
}

function doRainbowAnchor()
{
    if (act == 0) {
        var obj = event.srcElement;
        while (obj.tagName != 'A' && obj.tagName != 'BODY') {
            obj = obj.parentElement;
            if (obj.tagName == 'A' || obj.tagName == 'BODY')
                break;
        }

        if (obj.tagName == 'A' && obj.href != '') {
            objActive = obj;
            act = 1;
            clrOrg = objActive.style.color;
            TimerID = setInterval("ChangeColor()",100);
        }
    }
}

function stopRainbowAnchor()
{
    if (act) {
        if (objActive.tagName == 'A') {
            objActive.style.color = clrOrg;
            clearInterval(TimerID);
            act = 0;
        }
    }
}

function Mozilla_doRainbowAnchor(e)
{
    if (act == 0) {
        obj = e.target;
        while (obj.nodeName != 'A' && obj.nodeName != 'BODY') {
            obj = obj.parentNode;
            if (obj.nodeName == 'A' || obj.nodeName == 'BODY')
                break;
        }

        if (obj.nodeName == 'A' && obj.href != '') {
            objActive = obj;
            act = 1;
            clrOrg = obj.style.color;
            TimerID = setInterval("ChangeColor()",100);
        }
    }
}

function Mozilla_stopRainbowAnchor(e)
{
    if (act) {
        if (objActive.nodeName == 'A') {
            objActive.style.color = clrOrg;
            clearInterval(TimerID);
            act = 0;
        }
    }
}

function ChangeColor()
{
    objActive.style.color = makeColor();
}

function makeColor()
{
    // Don't you think Color Gamut to look like Rainbow?

    // HSVtoRGB
    if (elmS == 0) {
        elmR = elmV;    elmG = elmV;    elmB = elmV;
    }
    else {
        t1 = elmV;
        t2 = (255 - elmS) * elmV / 255;
        t3 = elmH % 60;
        t3 = (t1 - t2) * t3 / 60;

        if (elmH < 60) {
            elmR = t1; elmB = t2; elmG = t2 + t3;
        }
        else if (elmH < 120) {
            elmG = t1; elmB = t2; elmR = t1 - t3;
        }
        else if (elmH < 180) {
            elmG = t1; elmR = t2; elmB = t2 + t3;
        }
        else if (elmH < 240) {
            elmB = t1; elmR = t2; elmG = t1 - t3;
        }
        else if (elmH < 300) {
            elmB = t1; elmG = t2; elmR = t2 + t3;
        }
        else if (elmH < 360) {
            elmR = t1; elmG = t2; elmB = t1 - t3;
        }
        else {
            elmR = 0;   elmG = 0;   elmB = 0;
        }
    }

    elmR = Math.floor(elmR).toString(16);
    elmG = Math.floor(elmG).toString(16);
    elmB = Math.floor(elmB).toString(16);
    if (elmR.length == 1)    elmR = "0" + elmR;
    if (elmG.length == 1)    elmG = "0" + elmG;
    if (elmB.length == 1)    elmB = "0" + elmB;

    elmH = elmH + rate;
    if (elmH >= 360)
        elmH = 0;

    return '#' + elmR + elmG + elmB;
}

//]]>

</script>

3.§ Si queremos podemos cambiar la velocidad con var rate = 20. Damos click a guardar y listo!

[+/-]

Widget para los updates de Twitter

[+/-]

Marcadores sociales con efecto opacidad o transparencia

Ya habíamos visto como agregar marcadores sociales a nuestro blog. Hoy les vamos a darles un toque especial con un efecto de opacidad.

1.§ Lo que tenemos que hacer es seguir los pasos de este post, pero en lugar del código que usamos, pegaremos el siguiente código tal como lo indica el post que mencioné:

<div class='msociales'>
<ul>
<li><a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Agregar a Del.icio.us' class='msociales-redes' src='http://img30.imageshack.us/img30/1893/delicious24x24s.png'/></a></li>
<li><a expr:href='"http://digg.com/submit?phase=2&amp;url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Agregar a DiggIt!' class='msociales-redes' src='http://img30.imageshack.us/img30/8708/digg24x24.png'/></a></li>
<li><a expr:href='"http://www.google.com/bookmarks/mark?op=edit&output=popup&bkmk=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Agregar a Google' class='msociales-redes' src='http://img17.imageshack.us/img17/6836/google24x24.png'/></a></li>
<li><a expr:href='"http://www.technorati.com/faves?add=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Agregar a Technorati' class='msociales-redes' src='http://img2.imageshack.us/img2/1722/technorati24x24.png'/></a></li>
<li><a expr:href='"http://ma.gnolia.com/beta/bookmarklet/add?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Agregar a Magnolia' class='msociales-redes' src='http://img30.imageshack.us/img30/3479/magnolia24x24.png'/></a></li>
<li><a expr:href='"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Agregar a Reddit' class='msociales-redes' src='http://img30.imageshack.us/img30/7517/reddit24x24.png '/></a></li>
<li><a expr:href='"http://www.blinklist.com/index.php?Action=Blink/addblink.php&Description=&Url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Agregar a Blinklist' class='msociales-redes' src='http://img14.imageshack.us/img14/5392/blinklist24x24.png'/></a></li>
</ul>
</div>

2.§ Ahora buscamos ]]></b:skin> y encima de éste pegaremos:

.msociales ul{
display:inline;
font-size:100%;
margin:0pt !important;
padding:0pt !important
}
.msociales li{
display:inline;
list-style-type:none;
background:transparent none repeat scroll 0%;
margin:0pt;
padding:2px
}
.msociales img{
border:0pt none;
float:none;
margin:0pt;
padding:0pt
}
.msociales-redes{
opacity:0.4;
filter: alpha(opacity=40);
}
.msociales-redes:hover{
opacity:2;
filter: alpha(opacity=200);
}

3.§ Guardamos los cambios.

NOTA:

El efecto de transparencia u opacidad funciona en Opera, IE7, Firefox y Safari.

► Si deseas puedes aplicar el efecto pushbutton a los marcadores sociales, para ello mira esta entrada » Marcadores redes sociales con efecto pushbutton

[+/-]

Videotutorial de optimización de AdSense

[+/-]

Expandir/contraer gadget de Archivos con efecto deslizante

Habíamos visto como expander y contraer partes de la sidebar para ahorrar espacio; ahora vamos a ver algo similar, pero usando dos librerías de Google API : Prototype y Scriptaculous, que nos permitirá expander y contraer nuestros gadgets con un efecto deslizante. Por cierto, un ejemplo lo pueden ver en mi blog, en el gadget "Archivo [+/-]" que se encuentra en la sidebar.

Si bien la forma de expandir y contraer es casi la misma para cualquier gadget, he notado que a muchos les parece más difícil hacerlo en el gadget de etiquetas y de archivos, quizás porque la estructura del gadget es diferente a los de cualquier otro que agreguemos. Así que hoy vamos a ver cómo expandir y contraer el gadget de Archivos con un efecto deslizante y más adelante haremos lo mismo con el gadget de etiquetas y finalmente con los de cualquier otro gadget.

Ahora empecemos:

1.§ Vamos a Diseño - Edición de HTML y Expandir plantillas de artilugios.

2.§ Con ayuda de CTRL+F buscamos </head> y antes de éste pegaremos el siguiente código:

<script src='http://www.google.com/jsapi'/>
<script>
google.load("prototype","1.6.0.3");
google.load("scriptaculous", "1.8.2");
</script>

Sí ya tenemos este código en nuestra plantilla no será necesario agregarlo de nuevo.

3.§ Ahora , nuevamente con ayuda de CTRL+F buscaremos el nombre que le dimos al gadget de nuestra sección archivos. Puede que le hayamos puesto simplemente "Archivo" (como en mi caso) u otro nombre (Mis archivos, Blog Archive,etc).
Por ejemplo, digamos que mi sección de archivos se llama Archivo del blog,el nombre deberemos de buscarlo en la plantilla, pero al buscar nos encontraremos con dos o tres, así que el que usaremos será el que tenga la siguiente estructura:

<b:widget id='BlogArchive1' locked='false' title='Archivo del blog' type='BlogArchive'>

<b:widget id='BlogArchive1' locked='false' title='Archivo del blog' type='BlogArchive'>
<b:includable id='main'>
<a href='#' onclick='Effect.toggle("Archivo","slide"); return false'>
<b:if cond='data:title'>
<h2>▼/▲ <data:title/></h2>
</b:if>
</a><div align='center' id='Archivo' style='display: none;'>
<div class='widget-content'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + "_ArchiveList"'>
<b:if cond='data:style == "HIERARCHY"'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == "FLAT"'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == "MENU"'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div>
</div>
<b:include name='quickedit'/>
</div>
</b:includable>