Cajón de truquillos

Titulos bicolor en la sidebar

2009-07-22T20:22:00.000-07:00

Hace tiempo que me venía preguntando el tema de ponerle dos tonalidades a los titulos de mi sidebar.

Pues Gema, como siempre está dispuesta a ayudar. Nos ha vuelto a prestar de su tiempo para explicarnos detalladito este tema. Y como dice ella; Quien enseña aprende dos veces, aquí vemos como también pego las explicaciones. Así lo tengo guardado en el cajón.

Para comenzar debo recordar que este efecto es posible haciendo uso de la etiqueta span, con la que podemos cambiar el titulo escogiendo una zona específica de la frase.

Si deseamos añadir diferentes estilos, agregamos la etiqueta span la cantidad de veces que sea necesaria, así hasta lograr el resulatado deseado:

Ejemplo Ejemplo Ejemplo

Más o menos esa es la idea en cuestión del funcionamiento de span. Básicamente es la que diferencia los estilos en nuestro blog. Ya sea en una entrada o bien en lo que se refiere al diseño, el motivo de esta explicación.

Cuando añades un nuevo elemento a la sidebar tienes la opción de añadirle también un nombre. Este nombre será como una especie de ID, aún así puedes obviarlo, aunque se recomienda agregarselo, pues nos permitirá poderlo ubicar en el HTML de nuestro blog.

Luego que tenemos el elemento añadido; vamos a Edición/HTML y expandimos los artilugios. Buscamos las líneas correspondientes al elemento a editar:

<b:widget id='Label1' locked='false' title='Etiquetas' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>

Como nos dice Gema, <data:title> es la etiqueta que genera los titulos. Si queremos eliminarlos solo debemos borrarla. Si queremos hacer uso de la etiqueta span y hacer los titulos de nuestra sidebar bicolor.

Cambiamos <h2><data:title/></h2> por el código que corresponde a la etiqueta que creará el efecto:

<h2> las <span> etiquetas </span></h2>

Luego de esto solo nos queda agregar los estilos CSS. Nos situamos en <b:skin> y justo antes añadimos:

.sidebar h2 {
color: #000;
font-size: 30px;
font-weight: normal;
letter-spacing: -1px;
}
.sidebar h2 span {
color: #FFFFFF;
}

Con estos sencillos pasos tendríamos este elegante efecto en nuestro blog. Solo queda cambiarlos a nuestro propio gusto. Cambiamos color, tipo de letras, tamaños y otros estilos.

Recuerda que con .sidebar h2 están añadidos los estilos normales de los titulos de los elementos y .sidebar h2 span para los estilos que llevan añadida la etiqueta span.

Nuevamente muchas gracias a Gema, por sus excelentes explicaciones y por su tiempo dedicado en ayudarnos con este tema.

Cartel de avisos

2009-03-07T14:15:00.000-08:00

Hoy quiero compartir con todos ustedes otro de los truquillos que Blogger nos brinda, y que fácilmente podemos hacer funciona con unos simples pasos. En este caso es para si queremos decir algo o informar, sea más vistozo en cualquier parte del blog:

(1) Como siempre, antes de la etiqueta </head>, pegamos el siguiente script:

<script src='http://ar.geocities.com/blogdecesar/rounded_corners.inc.js' type='text/javascript'/>

<link href='http://ar.geocities.com/blogdecesar/bubbles.css' rel='stylesheet' type='text/css'/>

(2) Guardas tu plantilla. Ahora vamos a brindar las clases correspondientes para que funcione:

Para carte blanco:

<div class="bubble">
<blockquote><p>
TEXTO, TEXTO, TEXTO, TEXTO
</p></blockquote>

<cite>Blanco</cite>
</div>

Para cartel celeste:

<div class="bubble">
<div class="rounded">
<blockquote>
<p>
TEXTO, TEXTO, TEXTO, TEXTO
</p></blockquote></div>

<cite class="rounded">Fondo Celeste</cite></div>

Para cartel negro:

<div id="pimped" class="bubble">
<div class="rounded">
<blockquote><p>
TEXTO, TEXTO, TEXTO, TEXTO
</p></blockquote></div>

<cite class="rounded"><strong>Fondo Negro</strong></cite>
</div>

Espero que te funcione. Suerte!.

Via: Blog de César.

Menú con CSS

2009-02-15T08:52:00.000-08:00

Gracias a Dynamic Drive podemos crear menúes muy vistosos y elegantes con solo CSS. Sin duda alguna este tipo de formas es de las más fáciles y personalizables que existen, a mi me fascina.

(1) Tenemos que descargarnos estas dos imágenes y subirlas a nuestro alojamiento:

(2) Agregamos el estilo CSS a nuestra plantilla, como siempre antes de ]]></b:skin> agregamos este trozo de código:

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.solidblockmenu{
margin: 0;
padding: 0;
float: left;
font: bold 13px Arial;
width: 100%;
overflow: hidden;
margin-bottom: 1em;
border: 1px solid #625e00;
border-width: 1px 0;
background: black url(media/blockdefault.gif) center center repeat-x;
}

.solidblockmenu li{
display: inline;
}

.solidblockmenu li a{
float: left;
color: white;
padding: 9px 11px;
text-decoration: none;
border-right: 1px solid white;
}

.solidblockmenu li a:visited{
color: white;
}

.solidblockmenu li a:hover, .solidblockmenu li .current{
color: white;
background: transparent url(media/blockactive.gif) center center repeat-x;
}

(3) Lo último que nos quedaría sería abrir un nuevo Elemento HTML con el código correspondiente, contenido del menú:

<ul class="solidblockmenu">
<li><a href="http://atasca2.blogspot.com/">Inicio</a></li>
<li><a href="http://atasca2.blogspot.com/search/label/CSS" class="current">Ejemplos CSS</a></li>
<li><a href="mailto:castro.1918@gmail.com">Contacto</a></li>
</ul>
<br style="clear: left" />

<p class="iepara">Paragraph that follows...</p>

Recuerda cambiar los datos del menú por los tuyos. En el ejemplo solo he puesto tres elecciones, puede agregar el trozo <li><a href="http://URL" class="current">Título</a></li> dependiendo la cantidad que quieras usar.

Suerte!.

Efecto arcoiris en los enlaces

2009-02-13T07:06:00.000-08:00

Con este sencillo script podemos crear un hermoso efecto de arcoiris en los enlaces de nuestro blog, así le damos un poco de animación al blog en sí mísmo.

Afectará de inmediato todos los enlaces del blog, por lo que no tendrás que instalar ningún otro código o propiedad:

Lo único que has de hacer es descargar el archivo rainbow.js, subirlo a tu alojamiento, y añadir antes de </head>:

<script src="http://TUALOJAMIENTO/rainbow.js"></script>

Recuerda que para obtener la URL del archivo, debes subirlo a tu propio alojamiento y pegarla en las líneas del script.

Via: La Bloguería.

Nuevo proyecto

2009-02-01T07:32:00.000-08:00

Hola amigos:

Hoy quiero presentar un nuevo proyecto emprendido por el amigo ju4nm4, el cual me a permitido formar parte de "Maestros del blog". Un espacio en el que pretendemos pueblicar: Trucos, Plantillas, SEO, Posicionamiento, Publicidad y más... En general todo consta de Ayuda Blogger y Wordpress para todos aquellos que empezamos desde cero en esto de la "Blogocosa".

Espero que sirva de mucha ayuda. Desde ya les informo que este blog pasa a segundo plano, solo como mi espacio de pruebas y nada más... Todo lo publicado acá para al "Maestros del blog", que es donde estaré a partir de ahora, aprendiendo y compartiendo todo en cuanto al mundo del blog se refiere!.

Un saludo cordial, también contamos con tu apoyo ;).

Widebar con pestañas

2009-01-26T06:34:00.000-08:00

Estos días he aprendido como poner en el área de la sidebar, otra extra pero con pestañas, que resulta muy cómoda cuando tenemos demasiados elementos como links o etiquetas, que son de los widgets que ocupan más espacio!.

En general esta modificación es muy fácil de añadir, además, como puedes ver en mi sidebar, queda super bien y es muy personalizable, pero lo dejamos eso para luego.

(1) Agregamos esta línea de código con un script antes de la etiqueta </head>:

<script type="text/javascript" src="http://geocities.com/castrobirdelo/tabber.js"></script>

- El archivo tabber.js está alojado en Geocities, si deseas puedes optar subiendolo a tu propio alojamiento...

(2) Guardamos los cambios y ahora vamos a darle estilo a la widebar, agregamos CSS, como siempre antes de ]]></b:skin>:

/*--------Widetabt------------------*/
#tabsidebar-wrapper{width: 200px;float: right;border: 1px none #CCC;margin-bottom: 15px;}
.tabberlive .tabbertabhide {display:none;}
.tabber {display:none;}
.tabberlive {margin-top:1em;}
.tabber h2 {border-bottom:2px solid #5B0;margin-bottom: .3em;padding: 0;line-height:1.2em;}
.tabber .widget {margin-bottom: 1em;}
.tabber .widget-content {margin: 0 5px;}
ul.tabbernav{margin:0;padding: 8px 0;border-bottom: 1px solid #CCC;}
ul.tabbernav li{list-style: none;margin: 0;display: inline;}
ul.tabbernav li a{padding: 8px 0.5em;margin-right:2px;border: 1px solid #CCC;border-bottom: none;background: #EEE;text-decoration: none;}
ul.tabbernav li a:link { color:#369;}
ul.tabbernav li a:visited { color: #369;}
ul.tabbernav li a:hover{color:#00F; background: #CCC; border-color: #CCC;}
ul.tabbernav li.tabberactive a{background-color: #FFF;color: #369;border-bottom: 1px solid #FFF;}
ul.tabbernav li.tabberactive a:hover{color: #369;background: #FFF;border-bottom: 1px solid #FFF;}
.tabberlive .tabbertab {background: #FFF;padding:5px;border:1px solid #CCC;border-top:0;}
.tabberlive .tabbertab h2 {display:none;}
.tabberlive .tabbertab h3 {display:none;}

En el código debemos hacer una modificación en el width: 200px; para adaptarla al área de nuestra sidebar

(3) Nuevamente guardamos los cambios, para expandir nuestra plantilla de artilugios. Buscando <div id='sidebar-wrapper'>, le agregamos justo antes este trozo de código:

<div id='tabsidebar-wrapper'>
<div class='tabber' id='tab1'>
<div class='tabbertab'>
<b:section class='sidebar' id='tabbertab1' maxwidgets='1' showaddelement='yes'/>
</div>
<div class='tabbertab'>
<b:section class='sidebar' id='tabbertab2' maxwidgets='1' showaddelement='yes'/>
</div>
<div class='tabbertab'>
<b:section class='sidebar' id='tabbertab3' maxwidgets='1' showaddelement='yes'/>
</div>
</div></div>

Guardamos los cambios y si todo ha salido bien debe verse esto en tu plantilla de diseño:

En la sidebar lo veremos de esta forma:

Para agregar un elemento, deberemos antes clickear en el número correspondiente y arrastrar el elemento que vas a colocar en el mísmo.

Esta operación la repetimos hasta completar los tres espacios disponibles:

Será la hora de ver el resultado. Se recomienda que los títulos no sean muy extensos, ya que se repartirán dependiendo el espacio que le hayas dado al with, por lo que verás algunos imperfectos, que luego puedes corregir.

Esto lo he aprendido en Gem@ BLOG, otros datos en Usuario Compulsivo. Suerte!.

Sitemap para el blog

2009-01-22T12:22:00.000-08:00

Laga me había preguntado en un comentario, ''¿Como haces el efecto deslizante para poner los links?. En realidad esto es el simple Sitemap, muy usado en varios blog, algo sumamente elegante y fácil de instalar, basta con unos sencillos pasos:

(1) Debemos poner la librería JQuery en nuestro blog, para ello utilizamos este fichero que nos brinda Pizcos (Fichero), copiamos su URL y los introducimos a nuestro blog, siempre antes de la etiqueta </head>:

<script src="URL ALOJAMIENTO/jquery.min.js" type="text/javascript"/>

(1.2) Seguido de este código pegamos este otro trozo:

<script type='text/javascript'>
$(document).ready(function()
{
$(".smbody").hide();
$(".smhead").click(function()
{
$(this).next(".smbody").slideToggle(600);
});
});
</script>

(2) Añadimos unas lineas de CSS para la apariencia, básicamente para ponerle los íconos:

.smhead {
background: url(URL ICONO CATEGORIAS) no-repeat left;
cursor: pointer;
color:#000;
padding:2px 0 2px 20px;
font-family: 'Comic Sans MS';
}
.smbody p{
background: url(URL ICONO SUBCATEGORIAS) no-repeat left ;
margin: 0 0 0 45px;
color:#000;
padding:2px 0 2px 20px;
font-family: 'Comic Sans MS';
}

(3) Iríamos a la plantilla y agregamos un nuevo elemento HTML:

<div class="smhead">Categoría</div><div class="smbody"><p><a href="http://URL">Nombre de enlace</a></p><p><a href="http://URL">Nombre de enlace</a></p><p><a href="http://URL">Nombre de enlace</a></p><p><a href="http://URL">Nombre de enlace</a></p><p><a href="http://URL">Nombre de enlace</a></p><p><a href="http://URL">Nombre de enlace</a></p></div>

En mi caso he puesto esa cantidad. Para repetir una categoría simplemente se repite el código completo, se puede poner un número indeterminado de enlaces o sub-categorías... Cualquier duda ya saben, no soy experto pero nos defendemos!.

Aquí puedes encontrar una colección de íconos 16x16 que puedes utilizar y son de libre distribución (Iconos Gratis).

Buscador para el blog

2009-01-20T15:46:00.000-08:00

Hace un tiempo, cuando comencé con mi blog, siempre me pregunté el porqué de que algunos blogs tenían esa barra que les permitía buscar y yo no la tenía. Pues en RecurS.O.S para tu blog e encontrado un excelente código HTML que podemos agregar normalmente al blog, aunque yo voy más allá y algo que aprendi en Pizcos Blog para darle un toque más personal y adaptada a nuestro blog.

(1) Para ponerlo el código es muy simple, en un elemento HTML:

<div id='busqueda'><form action='/search' id='busquedaform' method='get'>
<input class='txtField' id='s' name='q' type='text' value=''/>
<input class='btnSearch' id='busquedasubmit' type='submit' value=''/>
</form></div>

(2) Buscamos los ID's que facilita el código anterior para añadir un poco de CSS:

<div id='busqueda'><form action='/search' id='busquedaform' method='get'>
<input class='txtField' id='s' name='q' type='text' value=''/>
<input class='btnSearch' id='busquedasubmit' type='submit' value=''/>
</form></div>

(3) Para facilitarnos el trabajo, Pizcos, nos ayuda e inserta los ID's y confecciona el CSS que agregaremos antes la etiqueta ]]></b:skin>:

#busqueda {
width:233px;
height:60px;
background:url(URL ALOJAMIENTO IMAGEN DE FONDO) no-repeat;
}
#busqueda form {
padding:0;
margin:0;
}
#busqueda .txtField {
margin:20px 0 0 45px;
padding: 0 0 0 8px;
width:120px;
color:#000;
background:transparent;
font-size:11px;
border-style:none;
cursor:text;
}
#busqueda .btnSearch {
width:40px;
height:60px;
border-style:none;
float:right;
background:transparent;
cursor:pointer;
margin: 0;
}

Todo el código está ya listo para ser usado, solo hace falta cambiar la URL de fondo para comenzar a ver el efecto, si quieres ver uno online, visita Pizcos Blog.

Cambios de imágenes en fondo del blog

2009-01-17T18:50:00.000-08:00

Un excelente script con el que podemos poner el efecto Random en nuestro blog y jugar un poco con el fondo del mísmo. Lo único que tenemos que hacer para utilizarlo es poner este trozo de código HTML antes la etiqueta </head>:

<script type='text/javascript'>
var banner= new Array()
banner[0]="URL-de-la-imagen"
banner[1]="URL-de-la-imagen"
banner[2]="URL-de-la-imagen"
banner[3]="URL-de-la-imagen"
banner[4]="URL-de-la-imagen"
var random=Math.floor(5*Math.random());
document.write("<style>");
document.write("body {");
document.write(' background: #000 url("' + banner[random] + '") no-repeat center top; background-attachment:fixed;');
document.write(" }");
document.write("</style>");
</script>

Digo que es normalísimo que los fondos también aparescan en el panel de diseño en Blogger. Donde dice URL-de-la-imagen, la cambias por la correspondiente. Puedes añadir más imágenes modificandolo con el var random y contando al [0] como primero.

Acceso a panel (Nueva forma)

2009-01-14T17:28:00.000-08:00

Luego de quitar la fastidiosa Navbar de Blogger, a veces parece que la extrañamos porque nos hace mucha pereza tener que escribir por el navegador para volver al panel de Blogger.

Aquí quiero encajonar un truquillo sumamente fácil que nos comparte Rosa, sobre como acceder con un simple elemento que localizamos donde querramos en el blog, pero que solo puede ser visto mientras estamos loguedos, puesto que tampoco los demás podrán verlo!.

(1) Debemos verificar cual es nuestro número de ID del blog:

(2) Luego que ya lo tenemos lo único que debemos hacer es colocar este código en un nuevo elemento HTML y como dije ponerlo donde querramos que aparesca, en mi caso lo he puesto al final del blog:

<span class='item-control blog-admin'>
<img src="http://3.bp.blogspot.com/_8PJ-pgoBhWQ/SNmUcZtuboI/AAAAAAAAESU/9KpauxXah_o/s320-R/adminin.jpg" /><a href="http://blogger.com/home">Acceder</a>
|
<a href="http://www.blogger.com/post-create.g?blogID=Idnumber">Nueva Entrada</a>
|
<a href="http://draft.blogger.com/blog-options-basic.g?blogID=Idnumber">Configuración</a>
|
<a href="http://www.blogger.com/rearrange?blogID=Idnumber">Diseño</a>
|
<a href="http://www.blogger.com/html?blogID=Idnumber">Edición HTML</a>
|
<a href="http://www.blogger.com/logout.g">Salir</a>
</span>

Solo debes cambiar el Idnumber por el de tu blog y lísto.... Suerte!.

Fuente e imágenes: El escaparate de Rosa

Scroll en los elementos de página

2009-01-12T17:31:00.000-08:00

Este es un excelente método y tan fácil de instalar, si yo he podido no digo?. Se trata de esconder un poco esos elementos que ocupan mucho espacio en la sidebar, el problema mayor está cuando en algún momento hemos tenido un montón de enlaces que ponen el blog medio pesado y eso!. Acá la solución ;).

Lo primero es irnos a Edición/HTML y buscamos el código correspondiente a los elementos de la sidebar, se depositan en este línea: <div id='sidebar-wrapper'>.

El efecto puede usarse en cualquier elemento, lo único que nos interesa es buscar el ID que brinda Blogger, el ejemplo acontinuación es con los enlaces o links. Debemos buscar el siguiente trozo:

<b:widget id='BlogList1' locked='false' title='Mi lista de blogs' type='BlogList'/>.

En este caso el ID es BlogList1, pero insisto, puede usarse en cualquier otro elemento...

Ahora que ya tenemos el ID de nuestro gadget, lo único que queda es aplicar un poquillo de CSS, tan simple como ponerlo antes de ]]></b:skin>:

#BlogList1 ul{
height:200px;
overflow:auto;
}

Este sería el resultado, muy chulo ;)... Suerte!.

Botón añadir a favoritos!

2009-01-10T13:56:00.000-08:00

Este es otro script de los miles que hay, muy sencillo, solo se trata de poner un botoncillo en cualquier parte del blog que permita a tus lectores agregar tu espacio a favoritos, y así tener acceso más rápido a tu blog. Esto es excelente para blogs que tienen direcciones muy largas o difíciles de recordar.

- Plantilla, Edición/HTML y antes de la etiqueta </head> pegamos el siguiente código:

<script type='text/javascript'>

function bookmarksite(title,url){
if (window.sidebar)
window.sidebar.addPanel(title, url, "");
else if(window.opera && window.print){
var elem = document.createElement('a');
elem.setAttribute('href',url);
elem.setAttribute('title',title);
elem.setAttribute('rel','sidebar');
elem.click();
}
else if(document.all)// ie
window.external.AddFavorite(url, title);
}
</script>

-Ahora solo nos queda añadir el elemento HTML donde queramos que aparesca nuestro botón:

<a href="javascript:bookmarksite('TITULO DE TU BLOG', 'URL DE TU BLOG')"><img src="URL IMAGEN BOTON"/></a>

-Sustituye los valores resaltados por los tuyos. En la parte de la URL IMAGEN BOTON, puedes poner solo texto. Suerte!.

Poner otra página dentro de tu blog

2009-01-10T13:43:00.000-08:00

Esto resulta muy útil si tenemos más de un blog y queremos mostrarlos ambos en una mísma página, este es el código para ponerlo:

<iframe src="URL_PAGINA" width="100%" height="300"></iframe>

-Cambia la URL_PAGINA por la tuya correspondiente.

-Modifica el ancho en Width y alto en Height, en cuanto a Width, recomiendo que lo dejes en 100%, así se ajustará automáticamente al ancho del lugar donde lo coloques.

Comentarios a pie de página (Incrustado)

2009-01-09T17:37:00.000-08:00

Este es uno de mis trucos favoritos para la presentación de comentarios. Lo he visto hace mucho en La bloguería. Se trata de presentar los comentarios incrustado al pie de la entrada, mediante el uso normal de la ventana Pop Pup o Página individual, pero agregando algunos scripts y cambiando varios códigos en la plantilla que aunque paresca difícil, es uno de los más fáciles que he visto!.

Primeramente, como el trabajo es un poco largo y podemos cometer varios errores (Yo los tuve), es recomendable que nos descarguemos una copia previa de nuestra plantilla, si algo sale mal, de inmediato lo recuperamos todo y sin perder absolutamente nada!.

(1) Diseño/Edición HTML y expandimos los artilugios, para facilitar el proceso de búsqueda de códigos siempre me gusta utilizar el buscador (Ctrl+F). Buscamos este trozo de códigos:

<b:includable id='comments' var='post'>
<div class='comments' id='comments'><a name='comments'/>
<b:if cond='data:post.allowComments'><h4><b:if cond='data:post.numComments == 1'>1 <data:commentLabel/>:<b:else/><data:post.numComments/> <data:commentLabelPlural/>:</b:if></h4><dl id='comments-block'><b:loop values='data:post.comments' var='comment'><dt class='comment-author' expr:id='"comment-" + data:comment.id'><a expr:name='"comment-" + data:comment.id'/><b:if cond='data:comment.authorUrl'><a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a><b:else/><data:comment.author/></b:if><data:commentPostedByMsg/></dt><dd class='comment-body'><b:if cond='data:comment.isDeleted'><span class='deleted-comment'><data:comment.body/></span><b:else/><p><data:comment.body/></p></b:if></dd><dd class='comment-footer'><span class='comment-timestamp'><a expr:href='"#comment-" + data:comment.id' title='comment permalink'><data:comment.timestamp/></a><b:include data='comment' name='commentDeleteIcon'/></span></dd></b:loop></dl><p class='comment-footer'><a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a></p></b:if><div id='backlinks-container'><div expr:id='data:widget.instanceId + "_backlinks-container"'><b:if cond='data:post.showBacklinks'><b:include data='post' name='backlinks'/>
</b:if></div></div></div>
</b:includable>

Como es un poco largo, fíjate bien donde comienza y termina, sustituye completamente por este otro:

<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>

<div class='onepx'>
<dl id='comments-block' style='height: 1px;overflow:hidden;'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>
</div>

<div id='comment-parent' onmouseover='showcomment("hoverme", "comment-child");' style='margin-bottom: 50px;'>
<h3 id='hoverme' style='display:block;'>
<img alt='Deja aqui tu comentario' src='URL IMAGEN QUE OCULTA EL FORMULARIO' title='Deja aqui tu comentario'/>
</h3>



<div id='comment-child' style='border:none; display: none; height:750px; width: 440px; margin-bottom: 5px; background-image: url (AQUI LA URL IMAGEN FONDO FORMA COMENTARIOS); border: 2px solid red;'>
<iframe expr:src='data:post.addCommentUrl' height='100%' scrolling='yes' style='border:none;' width='100%'/>
<br/>
</div>

</div>
</b:if>
<div id='backlinks-container'>
<div expr:id='data:widget.instanceId + "_backlinks-container"'>
<b:if cond='data:post.showBacklinks'>
<b:include data='post' name='backlinks'/>
</b:if>
</div>
</div>
</div>
</b:includable>

Añade una imagen para ocultar el formulario, al pasar el mouse sobre la que elijas, saldrá automáticamente el editor. La parte del código background-image: url (AQUI LA URL IMAGEN FONDO FORMA COMENTARIOS);, la puedes cambiar por background: #f5f5f5;, por cualquier otro color que quieras. También puedes modificar el alto y ancho en height:750px; width: 440px;.

Ahora buscamos la etiqueta </body>, añadimos este código justo antes:

<script languange='javascript'>function showcomment(a,b){var jackbookdotcom = document.getElementById(a);jackbookdotcom.style.display = 'none';jackbookdotcom = document.getElementById(b);jackbookdotcom.style.display = 'block';}</script>

Ahora nueva vez vamos a localizar un código y sustituirlo por otro:

<span class='post-comment-link'><b:if cond='data:blog.pageType != "item"'><b:if cond='data:post.allowComments'><a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/>
</b:if></a></b:if></b:if></span>

Lo cambiamos por este otro:

<span class='post-comment-link'><b:if cond='data:blog.pageType != "item"'><b:if cond='data:post.allowComments'><a class='comment-link' expr:href='data:post.url + "#comments"' ><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a></b:if></b:if></span>

Hasta aquí es todo. Con estos sencillos pasos hemos dado un buena limpieza a ese feo formulario que Blogger nos proporciona.

Vista: La Bloguería

Ultimos comentarios personalizado y simple

2009-01-09T17:25:00.000-08:00

Este es otro script muy fácil que voy a tener en mis pruebas para ver los últimos comentarios que se dejan en el blog. Algo a destacar es que últimamente Blogger tiene un fallo con esto y es que cuando el blog pasa de los 5,000 comentarios, pues, el script deja de funcionar. Será hasta que los que mandan quieran!.

La instalación está fácil como irnos a Diseño/Panel y añadir un nuevo elemento HTML y pegamos en el este trozo de código:

<script style="text/javascript" src="http://lejaniaimposible.googlepages.com/comentarios.recientes.js"></script>
<script style="text/javascript">

var numcomments = 10;
var showcommentdate = true;
var showposttitle = true;
var numchars = 50;
var standardstyling = true;
</script>
<script src="URL_DEL_BLOG/feeds/comments/default?alt=json-in-script&
callback=showrecentcomments"></script>

Solo debes cambiar la URL_DEL_BLOG por tu dirección correspondiente y ya lo tienes, vaya que fácil no?.

Algunas explicaciones:

var numcomments = 10; Número de comentarios a mostrar.

var showcommentdate = true; Si vamos a mostrar la fecha. En True se muestra y en False no se muestra, eso queda a opción de cada cual.

var showposttitle = true; Aquí elegimos si queremos mostrar el nombre de la entrada, al igual que en la fecha True mostrar o False no mostrar.

var numchars = 50; El número de carácteres que mostraremos para cada comentario, es decir, el resumen.

var standardstyling = true; Acá es para elegir el estilo del texto. También pruebas entre True o False, aunque con True se ve mucho mejor!.

Hasta acá todo, mucha suerte!.

Actualización 25/01/2009: Ya funciona el script al pasar los 5,000 comentarios!.

Quitar la fastidiosa Navbar de Blogger

2009-01-09T13:45:00.000-08:00

Esta es una de las cosas más útiles si queremos darle un poco de lucimiento a nuestro blog con una plantilla propia o una que previamente hemos cargado. Ocultar esa barra, que aunque muchas veces es útil, como que le quita un poco de peso e imagen al blog!.

Nos vamos a la edición HTML de nuestra plantilla y buscamos la etiqueta <body>, antes de esta es donde debemos agregar el código para ocultar dicho elemento:

<style type="text/css">
#navbar-iframe {
height:0px;
visibility:hidden;
display:none;
}
</style>

Mucha suerte!.

Recoger y expandir (Forma sencilla)

2009-01-09T13:17:00.000-08:00

Este es otro de los truquillos que he aprendido en Vagabundia y quiero tambien guardarlos en este almacen para si alguien anda buscando y por descuído Google los trae hasta acá también pueda usarlo. Es sumamente fácil de poner y funciona de inmediato, además lo que más me gusta es que a diferencia de otros incómodos script, no es necesario esperar que cargue completamente la página para ver el efecto!.

Primeramente lo que debemos hacer, como es un script, ponerlo en la plantilla del blog, siempre antes de la etiqueta </head> pegamos este código:

<script type='text/JavaScript'>
function verocultar(cual) {
var c=cual.nextSibling;
if(c.style.display=='none') {
c.style.display='block';
} else {
c.style.display='none';
}
return false;
}
</script>

Para que funcione utilizamos un enlace de cualquier agrado, ya sea desde una imagen hasta un link simple:

<a onclick="return verocultar(this);"
href="javascript:void(0);">ENLACE</a><div style="display: none;">
....... el contenido a ocultar .......
</div>

Esto funciona en cualquier parte del blog, tanto en las entradas como en la sidebar, pero ojo, recuerda que si haces un cambio en tu plantilla debes siempre verificar que el script que pusimos antes de </head> esté allí, de lo contrario nunca funcionará!.

He aquí unos ejemplos, uno lo he puesto con un enlace de texto y el otro con una imagen, queda a elección de ustedes!:

Ver/Ocultar [+/-]

Click Ver/Ocultar

Cabe decir que dentro del script se puede poner cualquier cosa, ya sea una imagen, código o texto simple como el ejemplo que doy. Suerte!.

Surtido de plantillas para Blogger

2009-01-09T13:01:00.000-08:00

Acontinuación una lista de páginas webs donde puedes encontrar excelentes plantillas para Blogger, de muy buena calidad y totalmente gratis:

- B Templates

- Final Sense

- Blogger Templates

- Templates Blogger

- Randomnes F1

- Blog and Web

- Yanku-Template

- Templates Cove

- Falconhive

- Gisele Jaquenod

- Our BLOGGER Templates

- Layout for all

- eBlog Templates

- Blogger Buster

Comentarios en Ventana modal

2009-01-08T18:03:00.000-08:00

Otra forma muy estética y fácil de instalar en el blog es en forma de una ventana modal, muy parecida a la de LightWindow, pero más sencilla y parecida a la original de Blogger, pero que puedes hacerles unos toquecitos de color y bordes...

Este modelo lo encontré en mis visitas al blog de Pizcos y me pareció muy buena... En especial para los que no tienen mucho conocimiento, pues, como dije antes, es sumamente fácil de instalar y modificar, solo requiere sustituir unos códigos y agregar un HTML.

(1) Edición/HTML, expandimos los artilugios y buscamos este trozo de código:

<span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>

<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</span>

Lo sustituímos completamente por este:

<span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>

<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:onclick='"javascript:showcom(\"" + data:post.addCommentUrl + "&isPopup=true\");"' href='javascript:void(0);'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</span>

Ahora hacemos click a la vista previa. Si todo ha salido bien el blog debería verse sin menores contratiempos (Recuerda siempre hacer tu copia de seguridad antes de cualquier cambio).

(2) Vamos a Diseño/Agregar elemento HTML y agregamos este script, está alojado en un servidor, recomiendo que lo subas al tuyo para evitar cualquier cambio que lo afecte:

<script src="http://technojuice10.googlepages.com/compop.js" type="text/javascript"></script>

- Hasta aquí es todo. Ya tenemos los comentarios en una ventanita muy cuca, ahora podemos modificar tamaño, borde, color... Suerte!.

Comentarios con LightWindow

2009-01-08T18:00:00.000-08:00

Este es un truco que me encontre hace mucho tiempo en La Blogueria, inventado por Lacrax. Se trata de mostrar los comentarios de una forma más llamativa y elegante con una ventanita emergente muy cuca y fácil de instalar.

LightWindow es una ventana modal con la que podemos presentar cualquier archivo multimedia: imágenes, videos, flash, etc. Para conocer potenciales usos y saber cómo hacer diferentes configuraciones, visita la entrada de Vag abundia sobre LightWindow; además de explicarlo clara y detalladamente, ha tenido la amabilidad de presentarnos los archivos con las imágenes que incluyen ya alojadas en Imageshack y listos para su uso.

Antes de poner manos a la obra, les adelanto que para que funcione la instalación (al menos a mi me salió así), primero debes cambiar el formulario de comentarios a la pantalla completa, ya que uno de los códigos que hay que cambiar no aparecen con la entrada incrustada o la ventana emergente. Luego lo puedes cambiar al que desees.

Pasos a seguir para instalar LightWindow en los comentarios del blog:

1- Gracias a los datos que nos brinda JMiur y La Blogueria, sobre ponerlo en imágenes y videos, sacamos estos ficheros . Solo debes descargarlos y subirlos a tu alojamiento, e incluirlos en estas lineas, como siempre, antes de </head>:

La carpeta que nos descargamos incluye las imágenes. Debemos obviarlas y solo subir los ficheros pedidos en las lineas anteriores...

2- Expandimos nuestra plantilla de artilugios y localizamos estos códigos (Recomiendo buscarlos con Ctrl + f):

<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>

Sustituye las lineas resaltadas por estas:

<a class='lightwindow' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' params='lightwindow_width=500, lightwindow_height=500,lightwindow_loading_animation=false'>

Con estos sencillos pasos, hemos conseguido darle un toque rotundamente diferente a nuestro formulario de comentarios...

Opcional:

Si deseas cambiar el ancho y alto de la ventana, solo debes modificar los valores del último código que implementamos:

<a class='lightwindow' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' params='lightwindow_width=500, lightwindow_height=500,lightwindow_loading_animation=false'>

Andaba buscando pornerle un imagen de fondo, al que puse en el blog. Así que solo modifique el:

#lightwindow_contents {
overflow: hidden;
z-index: 0;
position: relative;
border: 10px solid #ffffff;
background: #ddd; ► Color de fondo. Puede ser imagen.
}

Para agregar la imagen de fondo, sustituye background: #ddd; por background: url() right 100% no-repeat;.

Nota: Al tener el otro formulario implementado en los comentarios, si estás en la página individual verás el otro; para ver el efecto LightWindow, debes ir a Inicio, y busca el link de comentarios en cualquiera de las entradas.

Agredesco a:

La Blogueria; por brindarme toda su ayuda y dedicar su tiempo en explicarnos detalladamente en su entrada...

Formulario de comentarios (Forma sencilla)

2009-01-08T17:43:00.000-08:00

Luego de tanto andar probando y buscando por todos los lados, sobre como configurar el formulario incrustado que no funciona en las plantillas que se han previamente modificado, acá aparece un script, gracias a Rosa, que lo he visto y al fin me ha funcionado.

Sencillamente solo hay que hacer dos movimientos:

(1) Localizamos esta trozo de código, con los artilugios expandidos:

<b:include data='post' name='comments' />

(2) Justo después agregamos esta otra línea de código:

<b:include data='post' name='comment-form'/>

(3) Guardamos nuestros cambios y observamos los resultados!. Suerte.

Presentación

2009-01-07T13:33:00.000-08:00

Básicamente este blog no pretendo darlo mucho a conocer, pero sí lo recomiendo a los amigos que deseen buscar alguna información sobre ayuda blogger. Cabe decir que estos trucos, enlaces, plantillas, modificaciones y general son encontrados en otros espacios de ayuda, pero los edito y les agrego, si se puede, algunas cosillas que crea también son importantes.

Si alguien cree que algo de lo publicado es muy suyo y piensa que he violado alguna licencia de su espacio, puede decirlo con tranquilidad y enseguida será retirado sin menores contratiempos. Si necesitas ayudita aún soy medio novato, pero puedo ayudarte a la medida de lo posible, siempre con todo el entusiasmo del mundo ya que todos iniciamos desde cero igual!.

Un saludo y suerte con tu blog, que tengas mucho éxito y puedas compartir por mucho tiempo en este maravilloso mundo blogosférico!.