Sidebar deslizante (scroll) con jQuery

Hoy agregaremos un "efecto" a nuestra sidebar que servirá para que la barra lateral (sidebar) acompañe al contenido de nuestro blog mientras bajamos o subimos la página. Y con jQuery le agregaremos un toque especial a ese desplazamiento de la sidebar.

La vista previa la pueden ver en el blog de pruebas. Ahí puedes probar a subir y bajar por la página para ver el efecto.

( ↪ Ver DEMO)

Les enseñaré a implementarlo, tanto en las plantillas antiguas (clásicas) así como en las plantillas nuevas del Diseñador de plantillas.

PLANTILLAS CLÁSICAS

1.§ Vamos a Plantilla - Editar HTML.

2.§ Ahora lo que haremos será agregar la libreria jQuery, claro que si ya la tenemos en nuestra plantilla no será necesario agregarla nuevamente y de ser así podemos pasar al paso número 5.§ .

3.§ Damos un clic dentro del código de la plantilla, presionamos CTRL+F y buscaremos la etiqueta </head>.

4.§ Encima de </head> pegaremos lo siguiente:

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

5.§ Ahora agregaremos el siguiente script debajo de la librería jQuery que agregamos en el paso anterior.

<script type='text/javascript'>
$(function() {
var $sidebar = $("#sidebar"),
$window = $(window),
offset = $sidebar.offset(),
topPadding = 15;
$window.scroll(function() {
if ($window.scrollTop() > offset.top) {
$sidebar.stop().animate({
marginTop: $window.scrollTop() - offset.top + topPadding
});
} else {
$sidebar.stop().animate({
marginTop: 0
});
}
});
});
</script>

6.§ Ahora agregaremos los estilos. Para ello buscamos, siguiendo las indicaciones del paso 3.§, ]]></b:skin> y encima de éste, agregaremos lo siguiente:

#page-wrap {
width: 660px;
margin: 15px auto;
position: relative;
}

#sidebar {
width: 220px;
}

7.§ Vamos a modificar los valores de ancho (width) con los valores de nuestro blog. En primer lugar buscaremos #outer-wrapper. Debajo veremos el ancho de nuestro blog, algo así: width: 660px; Copiaremos el número (en este caso 660) y lo pegaremos en el width de #page-wrap

En segundo lugar buscaremos #sidebar-wrapper. Veremos el ancho de la sidebar de nuestro blog algo así: width: 220px; Igual que en el caso anterior, copiaremos el número (en este caso 220) y lo pegaremos en el width de #sidebar de los estilos que agregamos en el paso 6.§.

8.§ Vemos que todo esté bien y damos clic en Guardar plantilla.

PLANTILLAS DEL DISEÑADOR DE PLANTILLAS

1.§ Hacemos los pasos del 1.§ al 4.§ del apartado anterior.

2.§ Ahora agregaremos el script debajo de la librería jQuery, pero debemos de tener en cuenta los siguiente: si nuestra sidebar está en el lado izquierdo cambiaremos #sidebar-right por #sidebar-left. Si nuestra sidebar está en el lado derecho, dejaremos el código tal como está.

<script type='text/javascript'>
$(function() {
var $sidebar = $("#sidebar-right"),
$window = $(window),
offset = $sidebar.offset(),
topPadding = 15;
$window.scroll(function() {
if ($window.scrollTop() > offset.top) {
$sidebar.stop().animate({
marginTop: $window.scrollTop() - offset.top + topPadding
});
} else {
$sidebar.stop().animate({
marginTop: 0
});
}
});
});
</script>

3.§ Ahora agregaremos algunos estilos CSS. Buscamos ]]></b:skin> y encima de éste, agregaremos el código de abajo.

Aquí también tenemos que tener en cuenta que, si la sidebar está en el lado izquierdo, cambiamos right por left:

#page-wrap {
width: 960px;
margin: 15px auto;
position: relative;
}

#sidebar-right {
width: 310px;
}

4.§ Ahora vamos a modificar los valores width con los de nuestro blog. En primer lugar buscaremos la siguiente línea, que nos indica el ancho total de nuestro blog (en cada blog los valores pueden ser diferentes):

<b:variable default='960px' name='content.width' type='length' value='960px'/>

Compiamos el último número de la línea, no el primero y lo pegamos en el width de #page-wrap

5.§ En segundo lugar, buscaremos la siguiente línea, que nos indica el ancho de nuestra sidebar:

<b:variable default='310px' name='main.column.right.width' type='length' value='310px'/>

Como en el paso anterior, copiamos el último número de la línea y lo pegamos en el width de #sidebar-right

* Para los que tienen la sidebar en el lado izquierdo, buscan la línea: <b:variable default='310px' name='main.column.left.width' type='length' value='310px'/> y copian el último valor en #sidebar-left

6.§ Finalmente, buscaremos esta línea:

<div class='column-right-outer'>

Y la cambiaremos por esta:

<div class='column-right-outer' id='sidebar-right'>

* En el caso que nuestra sidebar esté en el lado izquierdo, buscaremos esta línea:

<div class='column-left-outer'>

Y la cambiaremos por esta:

<div class='column-left-outer' id='sidebar-left'>

7.§ Damos clic en Guardar plantilla.

Gadget Formulario de Contacto de Blogger

Hoy hablaremos un poco sobre el gadget Formulario de Contacto de Blogger: cómo implementarlo en nuestro blog y cómo personalizarlo.

AGREGAR GADGET DEL FORMULARIO AL BLOG

Es muy sencillo agregar este gadget a la sidebar de nuestro blog; sólo seguimos estos pasos:

1.§ Vamos a Diseño - Añadir un gadget y del menú izquierdo elegimos la pestaña Más gadgets y luego Formulario de Contacto.

2.§ Le colocamos un título a nuestro gadget y le damos en Guardar.

PERSONALIZAR EL GADGET

Ahora añadiremos algunos estilos para personalizar nuestro formulario de contacto.

1.§ Vamos a Plantilla - Editar HTML.

2.§ Con ayuda de CTRL+F buscamos ]]></b:skin> y antes de éste pegamos lo siguiente:

.contact-form-widget { /*contenedor del gadget, estilos de texto */
width: 400px;
max-width: 100%;
margin: 0 auto;
padding: 10px;
font-size:12px;
font-weight: bold;
text-align: left;
}
.contact-form-name, .contact-form-email, .contact-form-email-message, .contact-form-button-submit { /*estilos de las cajas */
color: #000000;
width: 100%;
max-width: 100%;
margin-bottom: 5px;
border: 1px solid #A9A9A9;
background-color: #F2F2F2;
}
.contact-form-button-submit { /*estilos del botón */
width: 100px;
background: #F6F4DA;
border: 1px solid #000000;
color: #FFFFFF;
}

3.§ Modificamos los estilos a nuestro gusto, verificamos que todo esté bien y le damos clic en Guardar plantilla.

Gadget de posts (entradas) recientes con imagen en miniatura

En un post anterior habíamos visto cómo añadir un gadget de entradas recientes de forma sencilla, pero sin una imagen en miniatura del post.
Hoy veremos cómo agregar un gadget que nos permita mostrar una lista con las últimas entradas de nuestro blog, con resumen, imagen en miniatura y con algunos datos (como la fecha de publicación del post y el número de comentarios).

1.§ Vamos a Diseño - Añadir un gadget - HTML/Javascript.

2.§ Dentro del gadget pegaremos el siguiente código, conformado por los estilos y los scripts:

✵ Ver SCRIPT [+/-]

<style type='text/css'>
img.recent_thumb {padding:2px;width:70px;height:70px;border:0;
float:left;margin:5px 10px 10px 0; border: 1px solid #ccc;}
.recent_posts_with_thumbs {float: left;width: 100%;min-height: 100px;margin: 0px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:75px;}
.recent_posts_with_thumbs a {text-decoration:none;}
.recent_posts_with_thumbs strong {font-size:10px;}
.recent_posts_with_thumbs h4 {
text-transform: uppercase;
font-size: 14px;
}
</style>
<script type='text/javascript'>
//<![CDATA[
function showrecentpostswiththumbs(json) {document.write('<ul class="recent_posts_with_thumbs">'); for (var i = 0; i < numposts; i++) {var entry = json.feed.entry[i];var posttitle = entry.title.$t;var posturl;if (i == json.feed.entry.length) break;for (var k = 0; k < entry.link.length;k++){
if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
if (entry.link[k].rel == 'alternate') {posturl = entry.link[k].href;break;}}var thumburl;try {thumburl=entry.media$thumbnail.url;}catch (error)
{
s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){
thumburl=d;} else thumburl='http://www.webaholic.co.in/other/no-image.jpg';
}
var postdate = entry.published.$t;var cdyear = postdate.substring(0,4);var cdmonth = postdate.substring(5,7);var cdday = postdate.substring(8,10);var monthnames = new Array();monthnames[1] = "Ene";monthnames[2] = "Feb";monthnames[3] = "Mar";monthnames[4] = "Abr";monthnames[5] = "May";monthnames[6] = "Jun";monthnames[7] = "Jul";monthnames[8] = "Ago";monthnames[9] = "Sep";monthnames[10] = "Oct";monthnames[11] = "Nov";monthnames[12] = "Dic";document.write('<li class="clearfix">');
if(showpostthumbnails==true)
document.write('<img class="recent_thumb" src="'+thumburl+'"/>');
document.write('<b><h4><a href="'+posturl+'" target ="_top">'+posttitle+'</a></b></h4>');
if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
var re = /<\S[^>]*>/g;
postcontent = postcontent.replace(re, "");
if (showpostsummary == true) {
if (postcontent.length < numchars) {
document.write('<i>');
document.write(postcontent);
document.write('</i>');}
else {
document.write('<i>');
postcontent = postcontent.substring(0, numchars);
var quoteEnd = postcontent.lastIndexOf(" ");
postcontent = postcontent.substring(0,quoteEnd);
document.write(postcontent + '...');
document.write('</i>');}
}
var towrite='';var flag=0;
document.write('<br><strong>');
if(showpostdate==true) {towrite=towrite+monthnames[parseInt(cdmonth,10)]+' - '+cdday+' - '+cdyear;flag=1;}
if(showcommentnum==true)
{
if (flag==1) {towrite=towrite+' | ';}
if(commenttext=='0 Comments') commenttext='0 comentarios';
if(commenttext=='1 Comment') commenttext='1 comentario';
commenttext = '<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';
towrite=towrite+commenttext;
flag=1;
;
}
if(displaymore==true)
{
if (flag==1) towrite=towrite+' | ';
towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">Más</a>';
flag=1;
;
}
document.write(towrite);
document.write('</strong></li>');
if(displayseparator==true)
if (i!=(numposts-1))
document.write('');
}document.write('</ul>');
}
//]]>
</script>
<script style='text/javascript'>
var numposts = 5;
var showpostthumbnails = true;
var displaymore = true;
var displayseparator = true;
var showcommentnum = true;
var showpostdate = true;
var showpostsummary = true;
var numchars = 80;</script>
<script src='http://AQUITUBLOG.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>

3.§ Reemplazamos AQUITUBLOG por el nombre de nuestro blog. Ahora les explicaré algunos parámetros que podemos personalizar:
» var numposts = 5; es el múmero de posts a mostrar.
» var showpostthumbnails = true;es para mostrar las imágenes en miniatura; si no queremos que aparezcan, cambiamos a false.
» var displaymore = true; es para mostrar el enlace Más; si no queremos que aparezca, cambiamos a false
» var displayseparator = true; es para mostrar una línea de separación entre posts; si no queremos que aparezca, cambiamos a false
» var showcommentnum = true; es para mostrar el número de comentarios del post; si no queremos que aparezca, cambiamos a false.
» var showpostdate = true; es para mostrar la fecha de publicación del post; si no queremos que aparezca, cambiamos a false.
» var showpostsummary = true; es para mostrar un pequeño resumen del post; si no queremos que aparezca, cambiamos a false.
» var numchars = 80; es el número máximo de caracteres que se mostrará en el resumen del post; podemos aumentar o disminuir el valor.

4.§ Una vez modificados los datos, damos clic a Guardar.

Visto en : Webaholic | Vía: Chica Blogger

Gadget de posts aleatorios (al azar) con imagen en miniatura

Bueno, hoy les enseñaré a colocar un sencillo gadget en nuestra sidebar que nos permitirá mostrar una lista de post al azar, pero con imágenes en miniatura, tal como pueden ver en la imagen.


1.§ Vamos a Plantilla - Edición de HTML; si usamos a antigua interfaz de Blogger, vamos a Diseño - Edición de HTML.

2.§ Con ayuda de Ctrl+F buscamos ]]></b:skin>

3.§ Encima de ]]></b:skin> pegaremos:

#random-posts img{
float:left;
margin-right:10px;
border:1px solid #999;
background:#FFF;
width:36px;
height:36px;
padding:3px}

Las líneas que agregamos, son los estilos de la imagen en miniatura. Podemos modificar la ubicación, el color y grosor del borde, el ancho y alto de la imagen, etc.

4.§ Damos click a Guardar.

5.§ Ahora, vamos a Diseño - Añadir un gadget - HTML/Javascript.

6.§ Dentro del gadget pegaremos el siguiente script:

✵ Ver SCRIPT [+/-]

<ul id='random-posts'>
<script type='text/javaScript'>
var rdp_numposts=5;
var rdp_snippet_length=150;
var rdp_info='yes';
var rdp_comment='Comentarios';
var rdp_disable='Deshabilitados';
var rdp_current=[];var rdp_total_posts=0;var rdp_current=new Array(rdp_numposts);function totalposts(json){rdp_total_posts=json.feed.openSearch$totalResults.$t}document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');function getvalue(){for(var i=0;i<rdp_numposts;i++){var found=false;var rndValue=get_random();for(var j=0;j<rdp_current.length;j++){if(rdp_current[j]==rndValue){found=true;break}};if(found){i--}else{rdp_current[i]=rndValue}}};function get_random(){var ranNum=1+Math.round(Math.random()*(rdp_total_posts-1));return ranNum};
</script>
<script type='text/javaScript'>
function random_posts(json){a=location.href;y=a.indexOf('?m=0');for(var i=0;i<rdp_numposts;i++){var entry=json.feed.entry[i];var rdp_posttitle=entry.title.$t;if('content'in entry){var rdp_get_snippet=entry.content.$t}else{if('summary'in entry){var rdp_get_snippet=entry.summary.$t}else{var rdp_get_snippet="";}};rdp_get_snippet=rdp_get_snippet.replace(/<[^>]*>/g,"");if(rdp_get_snippet.length<rdp_snippet_length){var rdp_snippet=rdp_get_snippet}else{rdp_get_snippet=rdp_get_snippet.substring(0,rdp_snippet_length);var space=rdp_get_snippet.lastIndexOf(" ");rdp_snippet=rdp_get_snippet.substring(0,space)+"…";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rdp_commentsNum=entry.thr$total.$t+' '+rdp_comment}else{rdp_commentsNum=rdp_disable};if(entry.link[j].rel=='alternate'){var rdp_posturl=entry.link[j].href;if(y!=-1){rdp_posturl=rdp_posturl+'?m=0'}var rdp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rdp_thumb=entry.media$thumbnail.url}else{rdp_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHdvkdVvpiedrKO5RgWZ1DiIj8bTFhmX9RuQI2E36GeF6ci2omvmaC3et-H_dta6TIssbLASGVlDiY0567l7OY5Ewwhqfhtq6TQoOg_x4g0H2MTVYH_zG40mRsPO0AOPpJFqFcp4uaUC4/s72/no-image%255B1%255D.jpg"}}};document.write('<li>');document.write('<img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'"/>');document.write('<div><a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_snippet+'">'+rdp_posttitle+'</a></div>');if(rdp_info=='yes'){document.write('<span>'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</span>'}document.write('<div style="clear:both"></div></li>')}};getvalue();for(var i=0;i<rdp_numposts;i++){document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts\"><\/script>')};
</script>
</ul>

Como pueden ver, en el script hay tres valores resaltados en negrita que podemos modificar:

» var rdp_numposts=5; es el número de post a mostrar.
» var rdp_snippet_length=150; es el número de caracteres a mostrar.
» var rdp_info='yes'; son los datos que aparecen debajo del nombre del post (la fecha de publicación y el número de comentarios.

7.§ Damos click a Guardar y listo.

Visto en : E-seopro.com

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

Títulos de la sidebar personalizados V: títulos de dos colores

Hoy vamos a ver otra forma más (la quinta forma) de personalizar los títulos de nuestra sidebar, esta vez vamos a hacer que los títulos tengan dos colores, como se ve en esta imagen que es una captura de uno de mis blogs de pruebas:



Bien, entonces para conseguirlo, seguimos los siguientes pasos:

1.§ Ingresamos a Diseño/ Edición de HTML y Expandir plantilla de artilugios. Con ayuda de CTRL+F buscamos ]]></b:skin>. Encima de éste pegaremos el siguiente código:

.otrocolor {
padding-left:5px;
color:#FF3300;
}

2.§ Ahora, localizamos el nombre que le dimos al gadget al que vamos a personalizar el título con dos colores.

Por ejemplo, digamos que el gadget al que quiero agregar el efecto se llama Lista de amigos,el nombre deberemos de buscarlo en la plantilla y deberá de tener casi la siguiente estructura:

<b:widget id='HTML1' locked='false' title='Lista de amigos' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>

Ahora insertaremos el código que está en negrita en las partes indicadas y "partiremos" el títulos del gadget para que una parte sea de un color y la otra de otro color:

<b:widget id='HTML1' locked='false' title='Lista' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/><span class=’otrocolor’>de amigos< /span ></h2>
</b:if>

Damos click a guardar y listo, muy sencillo.

Si queremos agregar más colores, deberemos de crear un nuevo estilo , en lugar de .otrocolor { pondremos otro nombre y cambiaremos color:#FF3300; por otro y cuando queramos agregarlo a un título de la sidebar no nos olvidaremos de colocar la parte del título entre <span class=’Aquí-nombre-de-otro-estilo’>Aquí-parte-del-título< /span >

Visto en : Template-Godown | Vía: Chica Blogger

Títulos de la sidebar personalizados IV: expandir y contraer gadgets

Anteriormente vimos tres formas de personalizar los títulos de la sidebar:

» Con colores, fuentes y bordes (ver entrada)
» Con imágenes e íconos (ver entrada)
» Gadgets con distintos fondos (ver entrada)

Hoy vamos a ver una cuarta forma, y más adelante quizás encontremos otra forma más para agregar.
La forma que veremos hoy es para expandir y contraer cualquier gadget , con efecto deslizante. Para algunos casos especiales, mirad las siguiente entradas, aunque la presente entrada es igualmente válida:

» Expandir/contraer gadget de Etiquetas (ver entrada)
» Expandir/contraer gadget de Archivos (ver entrada)

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:

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

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

3.§ Buscaremos el nombre que le dimos al gadget al que vamos a agregar el efecto de expandir y contraer.

Por ejemplo, digamos que el gadget al que quiero agregar el efecto se llama Blogroll,el nombre deberemos de buscarlo en la plantilla y deberá de tener la siguiente estructura:

<b:widget id='HTML1' locked='false' title='Blogroll' type='HTML'>

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='HTML1' locked='false' title='Blogroll' type='HTML'>
<b:includable id='main'>
<a href='#' onclick='Effect.toggle(&quot;ENLACES&quot;,&quot;slide&quot;); return false'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'>&#9660;&#47;&#9650; <data:title/></h2>
</b:if>
</a><div align='center' id='ENLACES' style='display: none;'>
<div class='widget-content'>
<data:content/>
</div>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

Damos click a guardar.

Formulario de contacto con HTML

En un post vimos cómo hacer un formulario de Acceso o Login. Hoy vamos a ver cómo hacer un formulario de contacto.

1.§ Lo que hacemos es copiar el siguiente código, ya sea en la sidebar (Diseño- Elementos de la página- Añadir un gadget- HTML/Javascript Añadir) o en una entrada (Creación de entradas- Nueva entrada). El código mencionado es el siguiente:

<FORM action="mailto:tucorreo@correo.com" method="post" enctype="text/plain"><TABLE BORDER="0" CELLSPACING="0" CELLPADDING="4" WIDTH="90%"><TR><TD width="30%"><DIV align="right"><B>Name:</B></DIV></TD><TD width="70%"><INPUT type="text" name="name" size="20"></TD></TR><TR><TD><DIV align="right"><B>Email:</B></DIV></TD><TD><INPUT type="text" name="email" size="20"></TD></TR><TR><TD><DIV align="right"><B>Comment:</B></DIV></TD><TD><TEXTAREA name="comment" cols="30" wrap="virtual" rows="4"></TEXTAREA></TD></TR><TR><TD>&nbsp;</TD><TD><INPUT type="submit" name="submit" value="Submit"><INPUT type="reset" name="reset" value="Reset"></TD></TR></TABLE></FORM>

2.§ Cambiamos donde dice tucorreo@correo.com por nuestro correo. Damos click a Guardar o Publicar, dependiendo si lo pegamos en un gadget o en una entrada.

3.§ Este paso no es obligatorio, con los pasos anteriores ya tendremos nuestro formulario de contacto. Este paso es sólo para darle algún estilo al formulario como color de borde, color del botón, etc.

Entonces, personalizarlo, vamos a Diseño/ Edición de HTML, con ayuda de Ctrl+F buscamos ]]></b:skin> y antes de éste, pegamos el siguiente código:

textarea {
background: #F6F4DA;
border: 1px solid #B07C3F;
}

input {
background: #F6F4DA;
border: 1px solid #B07C3F;
margin-right: 5px;
}

Si desemos podemos cambiar los colores. Damos click a guardar y listo.

El resultado será el siguiente:

Nombre:
E-mail:
Mensaje:

Formulario de Login a tu cuenta de blogger

Una de las utilidades que nos ofece la navbar es el enlace que tiene para acceder a nuestra cuenta; sin embargo, por estética y otras razones muchos la quitan.
Lo que nos queda es poner algún enlace a blogger para acceder a nuestra cuenta, etc.
Pero encontré una forma sencilla de acceder a nuestra cuenta de blogger, poniendo un formulario de acceso o login en la sidebar de nuestro blog.

Los pasos para agregarlo son los siguientes:

♠ Vamos a Diseño/ Elementos de página/ Nuevo gadget y selessionamos la opción HTML/CSS.
♠ Pegamos el siguiente código y damos click a guardar:

<div id="loginform"><form action="https://www.google.com/accounts/ServiceLoginBoxAuth" method="post" onsubmit="onlogin()">
<input value="http://blogger.com/loginz?d=%2Fhome&p=http%3A%2F%2Fblogger.com%2F" name="continue" type="hidden"/>

<br/>
<div>
<label for="Email"> Nombre de usuario (e-mail):
<br/><input id="Email" tabindex="1" name="Email" size="20" type="text"/>

</label>
</div>
<br/>
<div>
<label for="Passwd"> Contraseña: (<a href="https://www.blogger.com/forgot.g" target="_top" title="¿Ha olvidado su contraseña?">?</a>)

<br/>
</label>
<input id="Passwd" tabindex="2" autocomplete="off" name="Passwd" size="20" type="password"/>

</div>
<br/><br/>
<input id="signin-btn-ns" tabindex="0" value="Enviar" class="ubtn ubtn-block" name="submit" type="submit"/>

</form></div>

♠ Ahora, para darle alguna propiedad CSS a nuestro formulario como color de borde, color del botón, etc, vamos a Diseño/ Edición de HTML, con ayuda de Ctrl+F buscamos ]]></b:skin> y antes de éste, pegamos el siguiente código:

#Email, #Passwd{
background: #F6F4DA;
border: 1px solid #B07C3F;
}

#signin-btn-ns {
color: #fff;
background: #B07C3F;
border: 1px solid #B07C3F;
}

Si deseamos podemos cambiar los colores del código por otros y también el tipo de borde.
♠ Damos click en guardar y listo.

Y si hemos seguido todos los pasos el formulario se verá así en nuestra sidebar:

Nombre de usuario (e-mail):

Contraseña: (?)

Si tienen alguna duda, será bienvenida :)

Nuevos gadgets para blogger

Revisando hoy si había alguna novedad en Blogger in Draft, me encuentro con cuatro nuevos gadgets elaborados por Blogger Buster .

Los cuatro gadgets nuevos son:

» Post recientes (recent post).
» Updates de Twitter (Twitter Updates).
» Comentarios recientes (recent comments).
» Picassa Photostream, que mostrará nuestras imágenes subidas a Picassa.

Para incorporar estos gadgets a nuestro blog, hacemos lo siguiente:

♠ Ingresamos a Blogger in Draft con nuestra cuenta de blogger.
♠ Vamos a Diseño/ Elementos de la página/ Añadir un gadget y Destacados.
♠ En la pestaña "Destacados" encontraremos estos cuatro gadgets; escogemos cualquiera, lo configuramos y damos click a guardar.

RSS Reader Widget: lector de feed

Mirando los diversos borradores de post que tenía , encontré este post, que empecé a escribir hace tiempo, pero que lo guardé como borrador y se quedó ahí. Hoy lo termino y lo publico :)

Spring Widgets nos ofrece este bonito y práctico lector de feed al que podemos dar múltiples usos: para ponerlo en nuestra sidebar como una tabla que muestra nuestras últimas entradas o post; y también para que muestr los últimos comentarios que tengamos.

Para que muestre los últimos post:

♠ Para empezar entramos aquí . Cuando ingresemos nos mostrará cómo se verá nuestro lector cuando lo instalemos en nuesto blog.

♠ Luego, en la parte izquierda de nuestra pantalla, veremos dos botones; oprimimos Customize this widget ; una vez que oprimamos se espandirá un pequeño formulario.

♠ En el formulario debemos configurar el tamaño del lector de Feed.

♠ Ahora este es el paso más importante: para que el lector "lea" nuestro blog debemos de escribir nuestra dirección de Feed. Encontrará dos casilleros debajo de Feed URLs: uno con un pequeño "+" al costado y el otro un poco más grande; en el casillero grande es donde deben de colocar la URL de su Feed. Por ejemplo, en el caso de mi blog, la URL del feed es http://feeds.feedburner.com/diyva.

♠ Un poco más abajo (del formulario) encontrarán un botón con el que podrán personalizar el color de los bordes de su lector de feed.

Luego de estos pasos estamos preparados para colocar el lector en nuestro blog; hacemos click nuevamente en Customize this widget para que el formulario se recoja y oprimimos en Click here to Get the Code!

♣ Se abrirá una pequeña ventana con varios logos (de Facebook, Google, etc); en nuestro caso, hacemos click en el botón de Blogger.

♣ Luego, si deseamos, ingresamos nuestro correo y contraseña con la que accedemos normalmente a nuestro blog; o sino hacemos click en Get Code.

♣ Copiamos el código que aparecerá y lo colocamos en la sidebar de nuestro blog.


Si realizan bien todos los pasos el resultado será éste:

Get this widget!

Visit the Widget Gallery

Como dije al principio, no sólo le podemos dar este usos, sino que lo podemos usar como otra forma para mostrar una lista con los últimos comentarios de nuestro blog; de la misma manera, pero cambiando la dirección URl de Feeds por la de los comentarios.
El resultado es muy bueno.

Get this widget!

Visit the Widget Gallery

Espero que les guste y que les sirva.

Cómo eliminar el número de las etiquetas

He recibido con frecuencia esta pregunta, ¿cómo eliminar el número que aparece al lado de las etiquetas? Pues ahora les explicaré cómo se hace:

♠ Vamos a Diseño/ Edición de HTML y expandimos plantilla de artilugios.
♠ Con ayuda de CTRL+F buscamos:

<span dir='ltr'>(<data:label.count/>)</span>

En algunas plantillas pueden haber dos códigos iguales a este; el código que borraremos será el primero que encontremos y no el que se encuentra más abajo.
♠ Borramos toda esa línea y guardamos los cambios.

Aquí una muestra del antes y el después:

Nube de tags (etiquetas)

Son varios los que me preguntan cómo poner las etiquetas como las que se ven en mi sidebar, en forma de nube. No es difícil conseguirlo, pero sí requiere algo de paciencia.
Bien empecemos:

♠ Ante todo debes tener actiavadas las etiquetas; sino las tienes, ve a Diseño/ Elementos de la página/ Añadir un gadget / Etiquetas y damos click a guardar.
♠ Ahora nos dirigimos a Diseño/ Edición de HTML y damos click a Expandir plantillas de artilugios.
♠ Con ayuda de CTRL+F buscamos: ]]></b:skin> y antes de éste pegamos:

/* Etiquetas

----------------------------------------------- */
#labelCloud {text-align:center;font-family:arial,sans-serif;}
#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
#labelCloud a{text-decoration:none}
#labelCloud a:hover{text-decoration:underline}
#labelCloud li a{}
#labelCloud .label-cloud {}
#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
#labelCloud .label-cloud li:before{content:"" !important}

♠ Ahora, nuevamente con ayuda de CTRL+F, buscamos </head> y antes de este pegamos:

<script type='text/javascript'>

// Label Cloud User Variables

var cloudMin = 1;
var maxFontSize = 20;
var maxColor = [204,74,122];
var minFontSize = 10;
var minColor = [200,112,12];
var lcShowCount = false;
</script>

Explicación:
» var maxFontSize: tamaño de fuente de las etiquetas que tengan varias entradas.
» var maxColor: color de las etiquetas que tengan varias entradas.
» var minFontSize: tamaño de fuente de las etiquetas que tengan pocas entradas.
» var minColor: color de las etiquetas que tengan pocas entradas.

♠ Bien, ahora en la plantilla buscamos lo siguiente:

<b:widget id='Label1' locked='false' title='Etiqueta' type='Label'>
<b:includable id='main'>
<div id='menu4'>
<ul>
<li><a expr:href='data:blog.homepageUrl'><span>Inicio</span></a></li>
<b:loop values='data:labels' var='label'>
<li><a expr:href='data:label.url'><span><data:label.name/></span></a></li>
</b:loop>
</ul>
<!-- <b:include name='quickedit'/> -->
</div>
</b:includable>
</b:widget>

Quizás el código de tu plantilla sea diferente a este, en todo caso fíjate en la primera línea y la última.
Selecciona todo el código anterior, bórralo y sustitúyelo por el siguiente:

<b:widget id='Label1' locked='false' title='Label Cloud' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='labelCloud'/>
<script type='text/javascript'>

// Don't change anything past this point -----------------
// Cloud function s() ripped from del.icio.us
function s(a,b,i,x){
if(a&gt;b){
var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)
}
else{
var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)

}
return v
}

var c=[];
var labelCount = new Array();
var ts = new Object;
<b:loop values='data:labels' var='label'>
var theName = &quot;<data:label.name/>&quot;;
ts[theName] = <data:label.count/>;
</b:loop>

for (t in ts){
if (!labelCount[ts[t]]){
labelCount[ts[t]] = new Array(ts[t])
}
}
var ta=cloudMin-1;
tz = labelCount.length - cloudMin;
lc2 = document.getElementById('labelCloud');
ul = document.createElement('ul');
ul.className = 'label-cloud';
for(var t in ts){
if(ts[t] &lt; cloudMin){
continue;
}
for (var i=0;3 &gt; i;i++) {
c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)
}
var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);
li = document.createElement('li');
li.style.fontSize = fs+'px';
li.style.lineHeight = '1';
a = document.createElement('a');
a.title = ts[t]+' Posts in '+t;
a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';
a.href = '/search/label/'+encodeURIComponent(t);
if (lcShowCount){
span = document.createElement('span');
span.innerHTML = '('+ts[t]+') ';
span.className = 'label-count';
a.appendChild(document.createTextNode(t));
li.appendChild(a);
li.appendChild(span);
}
else {
a.appendChild(document.createTextNode(t));
li.appendChild(a);
}
ul.appendChild(li);
abnk = document.createTextNode(' ');
ul.appendChild(abnk);
}
lc2.appendChild(ul);
</script>
<noscript>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>
</noscript>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

♠ Mira en vista previa y si todo salió bien, damos click a guardar.

Cualquier duda será bienvenida!

Widgets de Michael Jackson

Michael Jackson ha fallecido, es una gran pérdida para la música y para sus seguidores, pero lo que quedará para siempre será su legado musical.
Y revisando un comentario que dejaron en mi blog, encontré una web que pone a disposición widgets de Michael Jackson, con un diseño muy bueno y que están con animación flash.

La página es ILoveMichael.org y seguro muchos de sus fans pondrán alguno de estos gadgets en las sidebars de sus blogs.

Aquí les pongo uno que me gustó mucho:

Algunas preguntas frecuentes

Aquí una recopilación muy pequeña de preguntas frecuentes y los links de los post que responden a esas preguntas:

1º ¿Cómo eliminar u ocultar la navbar?



Es quizás una de las preguntas más frecuentes; en realidad les ofrezco más opciones aparte de eliminar u ocultar: personalizar y agregar un botón que muestre y oculte la sidebar. Estos post son:

► La barra de navegación (navbar)
► Botón para mostrar y ocultar la navbar

2º ¿Cómo agregar una segunda sidebar o columna?

Bastante sencillo, si queremos agregar otra columna adicional a nuestro blog, veremos el siguiente post:

► Agregar una segunda columna (plantilla Mínima)

3º¿Cómo mostrar los últimos post y comentarios?

Si queremos mostrar los últimos post, vemos la siguiente entrada:

► Mostrar los últimos post en la sidebar (forma sencilla)

Y si queremos mostrar los últimos comentarios, veremos una de las siguientes entradas:

► Últimos comentarios con fecha y título del post
► Últimos comentarios (forma sencilla)

Hay más preguntas que son algo frecuentes pero las tres que mencioné son las más frecuentes y espero que les sirva esta pequeña recopilación para hallar el post que buscan.

Scroll de links » enlaces en movimiento

Es un buena opción para presentar los enlaces que querramos colocar en la sidebar del blog.Vamos a ver cómo se hace:

El código que usas es éste:

<marquee direction="up" scrollAmount="1" style="background- text-align: center; width:150px;height:150px;border:1px solid #000000;padding:3px" onMouseover="this.scrollAmount='0'" onMouseout="this.scrollAmount='2'">
<a href="URL DEL ENLACE" title="TÍTULO"><img src="URL DE LA IMÁGEN"</a> <br>
<a href="URL DEL ENLACE" title="TÍTULO"><img src="URL DE LA IMÁGEN"</a> </marquee>

Explicación:

♠ marquee direction es el que orienta el movimiento de los enlaces [hacia arriba (up),abajo (down),a la derecha (right) o a la izquierda (left)]
♠ scrollAmount es la velocidad de movimiento. A mayor número, mayor será la velocidad.
♠ text-align es la posición de los enlaces [centrados (center),a la derecha (right)o a la izquierda (left)]
♠ width es el ancho de la tabla y height es el alto.
♠ border es el grosor del borde de la tabla.
♠ #000000 podemos reemplazarlo por el color que querramos (en hexadecimales)

Ejemplo:







Ahora que ya sabemos cómo hacerlo, podemos modificar el código a nuestro gusto y lograr efectos interesantes...Les dejo algunas ideas:







como este otro...:







o tal vez éste:







...En fin, hay muchas formas de personalizarlo, cambiando los bordes, colores,tamaños, etc.
Ya saben, si tienen alguna duda, háganmela saber.

La sidebar de Blogger

La palabra "sidebar" es de uso frecuente en la terminología Blogger; he usado esta palabra en varios post. Pero varios (especialmente los que recién empiezan en Blogger), no saben que es la sidebar.

En términos sumamente senciloos, la sidebar es la barra lateral, la columna que está al lado del cuerpo de los post.

En la siguiente imagen podrán apreciar mejor a qué columna me refiero:



Entonces, como vemos , es la columna lateral donde colocamos nuestros gadgets o widgets (si no sabemos lo que son, lo veremos más adelante).

» Ahora, si deseas saber cómo personalizar la sidebar : personalizar los títulos, añadir color, estilo o gadgets entra aquí.

Frases al azar

Hace unos días lo vengo aplicando en mi blog y me preguntaron cómo conseguirlo. Se trata de un código , que podemos pegarlo como nuevo elemento HTML en la sidebar de nuestro blog y que nos permitirá mostrar frases, citas de autores,etc de forma aleatoria, es decir, que cada vez que carguemos el blog se mostrará una frase distinta.

Debo de decirles, que el gadget sólo permite un máximo de 25 a 30 frases. Bien, para hacerlo, pegamos el siguiente script como nuevo elemento HTML:

<script language="JavaScript">
citas = new Array(3)
citas[0] = "AQUÍ-TU-FRASE."
citas[1] = "AQUÍ-TU-FRASE."
citas[2] = "AQUÍ-TU-FRASE."
aleatorio = Math.random() * (citas.length)
aleatorio = Math.floor(aleatorio)
document.write(citas[aleatorio])</script>

Para agregar más de cuatro frases, deberemos de cambiar new Array(4) por otro número.

Si deseas personalizar el widget, por ejemplo, cambiar color de letra, añadir algún alineado, etc, deberás de agregar los siguiente:

<div style="color: #ff2000; text-align: right; font-weight: bold">
(AQUÍ-PEGAR-EL-SCRIPT-ANTERIOR)
</div>

Alojando scripts en gadgets

En las últimas semanas varios hemos sido testigos de los problemas que han surgido con nuestros scripts alojados en SkyDrive. Si bien hay varias páginas que nos ofrecen alojamiento, también es cierto que podemos alojar los scripts pequeños en la plantilla o en los gadgets.

Para alojar un script en un gadget, por ejemplo el de últimos comentarios, debemos de agregar lo siguiente:

Primero, sustraemos el contenido del archivo y lo copiamos en el block de notas, por ejemplo.

Si el archivo a alojar es de tipo javascript (.js), lo alojaremos del siguiente modo:

<script type='text/javascript'>
AQUÍ-EL-CONTENIDO-DEL-SCRIPT
</script>

Si es un archivo CSS lo haremos del siguiente modo:

<style type='text/css'>
AQUÍ-EL-CONTENIDO
</style>

Títulos de la sidebar personalizados III: fondos con imágenes distintas

Hace un tiempo habíamos visto cómo personalizar los títulos de la sidebar con colores y bordes y luego con imágenes e íconos. Ahora vamos a ver otra forma de personalizar los títulos de nuestra sidebar . Y esta tercera forma viene a raíz de algunas preuntas, como la que hizo G:

Aprendí mucho con este tutorial, pero, cómo hago para poner imágenes diferentes para cada título de la sidebar? ¿es posible?

La respuesta es afirmativa y ahora vamos a ver cómo hacerlo.

♠ Lo primero que haremos será ingresar a nuestro blog y de ahí a Diseño/ Edición de HTML y Expandir plantillas de artilugios.
♠ Luego, buscamos el id del widget al que queremos poner un fondo a su título. Será sencillo de localizarlo si es que tiene un nombre. Por ejemplo, si mi gadget se llama "Datos personales" busco este nombre. Cuando lo encuentre se verá así:

<b:widget id='Profile1' locked='false' title='Datos personales' type='Profile'>

Entonces, el id de este gadget es lo que está en negrita (Profile1) no incluyendo las comillas.

♠ Una vez que tengamos los id del gadget o gadgets cuyos títulos querramos cambiar de fondo, buscamos lo siguiente.Si nuestra plantilla es la mínima buscamos:

/* Sidebar Content
-------------------------------*/

Si usamos la plantilla rounders, buscamos:

/* Sidebar Boxes
-------------------------------*/

♠ Debajo de éste pegamos lo siguiente:

#Profile1 h2 {
background: url(AQUÍ-URL-IMAGEN-FONDO) left top;
}

Si queremos agregar otra imagen de fondo al título de otro gadget bastará con buscar su id y colocar un código igual al anterior solo que borraremos Profile1 y pondremos el id del otro gadget.

Si queremos colocar un ícono en lugar de un fondo, cambiaremos el código anterior del background por este otro: background: #FFFF99 url(aquí-imagen) no-repeat right; y seguiremos los otros pasos.

El resultado será el siguiente: