Diversas y Variadas (Ayuda Blogger): 2010

Hoy vamos a ver una nueva forma de hacer nuestros marcadores de redes sociales más vistosos con este nuevo efecto-burbuja de Aext.net

Para ello usaremos un plugin de jQuery y claro la libreria jQuery. La DEMO pueden verla casi al final de la entrada.

1.§ Lo primero que haremos será agregar la libreria jQuery, claro que si ya la tenemos en nuestra plantilla no será necesario agregarla nuevamente. Si no la tenemos, entonces haremos lo siguiente: ingresamos a Diseño - Edición de HTML y buscamos la etiqueta </head>. Antes de éste, pegamos el siguiente código:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>

2.§ A continuación descargamos el siguiente archivo .js ↪ Descargar .
Posteriormente lo subimos a nuestro alojamiento preferido.

3.§ Nuevamente buscamos </head> y debajo del primer código que pegamos, pegaremos el siguiente:

<script src='http://www.alojamiento.com/jquery.bubbleup.js' type='text/javascript'/>

<script type='text/javascript'>
$(function(){
$("ul#menu li img").bubbleup();
});
</script>
<script type='text/javascript'>
$(function(){
$("div#demo ul#menu li img").bubbleup({tooltip: true, scale:64});
});
</script>

Reemplazamos lo que está en negrita por la URL de la página donde subimos nuestro archivo.

4.§ Para agregar los estilos CSS, buscamos ]]></b:skin> y encima de éste pegaremos el siguiente código:

✵ Ver CSS [+/-]

5.§ Finalmente, vamos a Diseño - Elementos de la página - Añadir un gadget y HTML/Javascript. En el gadget pegaremos el siguiente código:

<div id="demo">
<ul id="menu">
<li><a href="URL-de-la-página" >
<img src="http://img245.imageshack.us/img245/6186/feedyb.png" alt="Feed via RSS" /></a></li>
<li><a href="URL-de-la-página" >
<img src="http://img36.imageshack.us/img36/7931/emailmh.png" alt="Email" /></a></li>
<li><a href="URL-de-la-página" >
<img src="http://img541.imageshack.us/img541/5271/twitterjp.png" alt="Síguenos en Twitter" /></a></li>
<li><a href="URL-de-la-página" >
<img src="http://img442.imageshack.us/img442/3434/facebookha.png" alt="En Facebook" /></a></li>
<li><a href="URL-de-la-página">
<img src="http://img580.imageshack.us/img580/8707/deliciousr.png" alt="Delicious" /></a></li>
<li><a href="URL-de-la-página">
<img src="http://img840.imageshack.us/img840/7849/technorati.png" alt="Technorati" /></a></li>
</ul>
</div>

Reemplazamos URL-de-la-página por la dirección url de nuestras redes sociales. Por cierto, las imágenes las aloje en Imageshack pero si desean pueden guardarlas y alojarlas en un servidor propio.

Y este es el resultado (pasar el mouse por encima de los íconos):

Algunas notas adicionales:
» Podemos usar otros íconos y reemplazarlos cambiando la URL de los mismos en el código HTML (paso 5.§)
» Este código funciona perfectamente en Opera, Safari, Firefox e Internet Explorer; sin embargo, el efecto no se nota en IE6.

Visto en : Aext.net

[+/-]

Gadget de post (entradas) populares

Cada blog tiene algunos post que tienen un mayor número de visitas que otras entradas, lo que se refleja muchas veces en una mayor cantidad de comentarios.
Hoy veremos cómo agregar un gadget que ayudará a nuestros lectores a tener presente las entradas más populares de nuestro blog.

Este gadget es sencillo de implementar siguiedo los siguientes pasos:

1.§ Vamos a Diseño - Elementos de la página - Añadir un gadget y HTML/Javascript.

2.§ Pegaremos el siguiente código JavaScript:

<div id="Popular">
<script language="JavaScript">
aBold = true;
numposts=200;
maxshowresult=10;
home_page = "http://TUBLOG.blogspot.com/";
</script>
<script type="text/javascript">
//<![CDATA[
var postTitlear=new Array();var postUrlar=new Array();var postCommentar=new Array();var totalpost;document.write("<ul>");function showrecentposts(j){var a=j.feed.entry.length;totalpost=a;for(var f=0;f<a;f++){var h=j.feed.entry[f];var c=h.title.$t;var b;var g;if(f==j.feed.entry.length){break}for(var d=0;d<h.link.length;d++){if(h.link[d].rel=="alternate"){g=h.link[d].href;break}}for(var d=0;d<h.link.length;d++){if(h.link[d].rel=="replies"&&h.link[d].type=="text/html"){b=h.link[d].title.split(" ")[0];break}}c=(aBold)?"<b>"+c+"</b>":c;postTitlear.push(c);postUrlar.push(g);postCommentar.push(b)}sortPosts();for(var f=0;f<maxshowresult;f++){var e='<li><a href="'+postUrlar[f]+'" class="recent-link">'+postTitlear[f]+"</a>";document.write(e)}}function sortPosts(){function c(d,f){var e=postTitlear[d];postTitlear[d]=postTitlear[f];postTitlear[f]=e;var e=postUrlar[d];postUrlar[d]=postUrlar[f];postUrlar[f]=e;var e=postCommentar[d];postCommentar[d]=postCommentar[f];postCommentar[f]=e}for(var b=0;b<postTitlear.length-1;b++){for(var a=b+1;a<postTitlear.length;a++){if(parseInt(postCommentar[b])<parseInt(postCommentar[a])){c(b,a)}}}}document.write('<script src="'+home_page+"feeds/posts/default?max-results="+numposts+'&orderby=published&alt=json-in-script&callback=showrecentposts"><\/script>');
//]]>
</script>
</div>

Deberemos de sustituir http://TUBLOG.blogspot.com/ por la URL de nuestro blog. Damos click a Guardar.

3.§ En el código podemos modificar lo siguiente:
» aBold = true; si no queremos que los títulos estén en negrita podemos cambiar true por false.
» numposts=200; es el número de post de donde se saca el promedio de post populares; si tenemos más de 200 post deberemos cambiar este número.
» maxshowresult=10; es el número de post que se mostrarán en el gadget; podemos aumentarlo o disminuirlo.

4.§ También podemos agregar algunos estilos al gadget. Para ello vamos a Diseño - Edición de HTML y con ayuda de CTRL+F buscamos ]]></b:skin> y encima de éste pegaremos lo siguiente:

#Popular {
/*Estilos para el contenedor */
}
#Popular ul {
/*Estilos para la lista de links */
}
#Popular li {
/*Estilos para cada link de la lista */
}
#Popular a {
/*Estilos para los links */
}
#Popular a:hover {
/*Estilos para los links cuando pasamos el mouse encima*/
}

Dentro de las llaves {} escribiremos el estilo que querramos darle a nuestros enlaces del gadget y damos click a Guardar.

Visto en : Blogger´SPhera

[+/-]