Pages

Para contactar con esblogmanía: rolander50@hotmail.com

2 Columnas en blogger

Este truco consiste en poner dos columnas(de texto) en un post de Blogger, es un truco muy sencillo



Lo unico que tienes que hacer es en tu post irte a Edicion de HTML y escribir este codigo:

<div style="float: left; width: 45%">texto-columna-izquerda</div><div style="float: right; width: 45%">texto-columna-derecha</div><div style="clear: both"></div>

Escribes tu texto en donde dice texto-columna-izquierda y texto-columna-derecha el resultado queda asi:

Esta es la columna de la izquierda, como ven este truco funciona y espero que este que tambien les sirva...

Esta es la columna de la derecha, como ven este truco funciona y espero que este que tambien les sirva...

Ver videos de youtube con otro reproductor

Desde hace tiempo estaba buscando la forma de cambiar el reproductor que trae por defecto youtube por algo mas elegante. Hasta que por fin lo encontré de mano de elbalcondejaime.

Y queda así muy bonito y profesional por cierto.







Aquí les dejo mi código modificado
Solo debes de cambiar donde dice Aqui-el-id-del-videO por el id del video de youtube
mjbalcn


<object height="320" width="460">
<param name="movie" value="http://9016828547630256827-a-1802744773732722657-s-sites.googlegroups.com/site/esblogmania/tubeplayer.swf" />
<param name="FlashVars" value="Aqui-el-id-del-videO&autoPlay=false" />
<param name="allowFullscreen" value="true" />
<embed src="http://9016828547630256827-a-1802744773732722657-s-sites.googlegroups.com/site/esblogmania/tubeplayer.swf" width="460" height="320" FlashVars="videoId=Aqui-el-id-del-videO&autoPlay=false" allowFullscreen="true">
</embed>
</object>

Mas información en:
http://elbalcondejaime.blogspot.com/2010/01/un-reproductor-muy-elegante-para-los.html

Como poner google ads entre post en blogger

Este post esta dedicado para un amigo del blog.
Su nombre es: Joaquín
Su blog: http://judotucumanazo.blogspot.com/ (No lo debería de poner por que modifico un código de traducción y además no me ha enlazado pero que mas da es amigo del blog.)
Bueno sus duda es como poner publicidad entre los post de blogger mas bien dentro de los post. Aquí la solución.
InsertarAdSensePostBlogger

Para lograr ello, se debe hacer lo siguiente:
Ir a la Plantilla y entrar en Edición de HTML.
Marcar el check de Expandir plantillas de artilugios y ubicar la línea


<p><data:post.body/></p>

Reemplazar dicha línea por un código especial, el cual debe contener tu anuncio adsense y que puedes obtenerlo con la herramienta Adsense dentro de un post en Blogger, que creé para facilitarles las cosas. Para ello debes ingresar el código de tu anuncio adsense y darle click al botón generar.

Guardar los cambios en la plantilla.

La herramienta y el código funcionan correctamente, yo mismo lo he comprobado, si siguen los pasos debe funcionar sin problemas.

Puedes ver  10 Lugares para poner Adsense en Blogger si deseas poner la publicidad en otras posiciones del blog.

Buscador personalizado blogger

Este truco sirve para poner un buscador personalizado en tu barra lateral como gadget, puedes personalizar los colores a tu gusto.
Pasos:
1. Tienes que ir a tu panel de Blogger y darle click en "Añadir un gadget"
2. Añade un gadget tipo "HTML/Javascript"
3. Pega el siguiente código
<style> 
#search-btn { 
background-color:#A9D0F5; 
color:#FFFFFF; 
margin:0; 
font:bold 16px Arial; 
border:0; 
} 
#search-btn:hover { 
cursor:pointer; 
background-color:#2E9AFE; 
} 
#search-box { 
color:#2E9AFE; 
margin:0; 
font:bold 16px Arial; 
border:1px solid #CEE3F6; 
width:150px; 
} 
</style> 
<form id="searchthis" action="/search" style="display:inline;" method="get"> 
<input id="search-box" name="q" type="text"/> 
<input id="search-btn" value="Buscar" type="submit"/> 
</form>

El buscador se vera así:




4. Para personalizar los colores

#search-btn {

background-color:#A9D0F5; este es el color del fondo del botón

color:#FFFFFF; este es el color del texto del botón

margin:0;

font:bold 16px Arial;

border:0;

}

#search-btn:hover {

cursor:pointer;

background-color:#2E9AFE; color de fondo del botón al estar el mouse encima

}

#search-box {

color:#2E9AFE; color de las letras del área de texto

margin:0;

font:bold 16px Arial;

border:1px solid #CEE3F6; color del borde del área de texto

width:150px; ancho del área de texto

}

Gravatar en blogger

Como Blogger esta celebrando su 10 aniversario están dándonos muy buenas sorpresas a todos, ahora nos regalan también la posibilidad de poner avatares en los comentarios

comentarios
Para mostrarlos en tu blog:
Debes ir a Configuración > Comentarios y activar la opción que dice ¿Mostrar imágenes de perfil en los comentarios?
com
Habilitarlos en plantillas antiguas:
Si tienes instalada una plantilla anterior a Julio 2009 entonces debes adaptarla para que puedas mostrar los avatares
1. Tienes que ir a Diseño > Edición de HTML y expandir los artilugios
2. Busca el código:


<dl id='comments-block'>

Y Reemplázalo por:

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>

3. Mas abajo debes buscar:

<a expr:name='data:comment.anchorName'/>

Y agrégale abajo:

<b:if cond='data:blog.enabledCommentProfileImages'>

<data:comment.authorAvatarImage/>

</b:if>

4. Guarda los cambios y listo!!!

Widget de "Últimos Post"

Bueno este truco yo no lo sabia y lo posteo por si alguien tampoco lo conocía.
Poner un widget o gadget con los últimos post de tu blog es muy fácil, no necesitas instalar ningún script, solamente tienes que añadirlo ya que esta en los gadgets de blogger.
Para instalarlo:
1. Irte a tu panel de Blogger a Diseño > Elementos de la pagina
2. Click en Añadir un gadget
3. Ahí vete a la opción de Destacados



4. búscalo mas abajo y selecciona el gadget que se llama Recent Posts hay dos gadgets que se llaman igual pero el que tiene las imágenes tiene un icono distinto, dice Recent Posts y abajo la palabra Advanced fíjate en el icono como el de la imagen:

5. Luego se te desplegara una ventana de configuración

la configuración es muy fácil e intuitiva, hay varias opciones interesantes que te permiten darle la apariencia que tu quieras a tu gadget, luego que ya lo configuraste solo lo guardas y listo!!!

Como eliminar la Navbar de Blogger

Pasos para ocultar la Navbar de Blogger:
1. Tienes que ir a tu panel de Blogger y luego ir a Diseño > Edición HTML
2. Tienes que buscar el código ]]></b:skin>
3. Justo arriba de ese código debes pegar lo siguiente

#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}
4. Guarda los cambios y listo, muy fácil verdad
navbar-blogger

Sexy Bookmarks para blogger en español

Conoces el famoso plugin de Wordpress "Sexy Bookmarks" ?
Bueno yo la primera ves que lo vi me pregunte si de alguna manera se podía integrar a Blogger, así que me puse a Googlear y después de un rato di con una web (no recuerdo cual) en la que mostraban el código para ponerlos en Blogger y lo probé, pero lo que no me gusto es que los iconos todos eran de webs en ingles (algo que no me serbia mucho) así que por eso me di a la tarea de crear una versión "Español" de los "Sexy Bookmarks" y he aquí el resultado
sexy-bookmarks-blogger

Para añadir los Sexy Bookmarks tienes que seguir estos pasos:

Recuerda: Siempre antes de editar tu plantilla es recomendable hacer un respaldo de ella al igual que tus widgets.
Para buscar códigos recuerda también usar el comando CTRL+F
1. Ir a Editar tu Plantilla HTML y expandir los artilugios
2. Ahora debes buscar el tag ]]></b:skin> y arriba de el debes pegar el siguiente código


/* Sexy-Bookmarks

-----------------------------------------------*/


div.sexy-bookmarks {


height:54px;


background:url('http://i754.photobucket.com/albums/xx182/zavaletaster/sharing.png');


position:relative;


width:400px;


}


div.sexy-bookmarks span.sexy-rightside {


width:17px;


height:54px;


background:url('http://i754.photobucket.com/albums/xx182/zavaletaster/sharing.png') no-repeat right bottom;


position:absolute;


right:-5px;


}


div.sexy-bookmarks ul.socials {


margin:0 !important;


padding:0 !important;


position:absolute;


bottom:0;


left:10px;


}


div.sexy-bookmarks ul.socials li {


display:inline-block !important;


float:left !important;


list-style-type:none !important;


margin:0 !important;


height:29px !important;


width:48px !important;


cursor:pointer !important;


padding:0 !important;


}


div.sexy-bookmarks ul.socials a {


display:block !important;


width:48px !important;


height:29px !important;


font-size:0 !important;


color:transparent !important;


}


.sexy-rss, .sexy-rss:hover, .sexy-meneame, .sexy-meneame:hover, .sexy-apezz, .sexy-apezz:hover, .sexy-bitacoras, .sexy-bitacoras:hover, .sexy-enchilame, .sexy-enchilame:hover, .sexy-facebook, .sexy-facebook:hover, .sexy-twitter, .sexy-twitter:hover, .sexy-mail, .sexy-mail:hover {


background:url('http://i754.photobucket.com/albums/xx182/zavaletaster/icons.png') no-repeat !important;


}


.sexy-rss {


background-position:left top !important;


}


.sexy-rss:hover {


background-position:left bottom !important;


}


.sexy-meneame {


background-position:-50px top !important;


}


.sexy-meneame:hover {


background-position:-50px bottom !important;


}


.sexy-apezz {


background-position:-100px top !important;


}


.sexy-apezz:hover {


background-position:-100px bottom !important;


}


.sexy-bitacoras {


background-position:-150px top !important;


}


.sexy-bitacoras:hover {


background-position:-150px bottom !important;


}


.sexy-enchilame {


background-position:-200px top !important;


}


.sexy-enchilame:hover {


background-position:-200px bottom !important;


}


.sexy-facebook {


background-position:-250px top !important;


}


.sexy-facebook:hover {


background-position:-250px bottom !important;


}


.sexy-twitter {


background-position:-300px top !important;


}


.sexy-twitter:hover {


background-position:-300px bottom !important;


}


.sexy-mail {


background-position:-350px top !important;


}


.sexy-mail:hover {


background-position:-350px bottom !important;


}



3. Ahora debes buscar el siguiente código




<div style='clear: both;'/> <!-- clear for photos floats -->

</div>


Cuando lo hayas encontrado debajo de esos códigos debes pegar este otro


<!-- Ini Sexy-Bookmarks -->

<br/>


<div class='sexy-bookmarks'>


<ul class='socials'>


<li class='sexy-rss'><a href='URL DE TU FEED' target='_blank' title='Subscribete al RSS'/></li>


<li class='sexy-meneame'><a expr:href='&quot; http://meneame.net/submit.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Meneame'/></li>


<li class='sexy-apezz'><a expr:href='&quot; http://apezz.com/submit.html?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Apezz'/></li>


<li class='sexy-bitacoras'><a expr:href='&quot; http://bitacoras.com/anotaciones/&quot; + data:post.url' target='_blank' title='Bitacoras'/></li>


<li class='sexy-enchilame'><a expr:href='&quot; http://enchilame.com/submit.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Enchilame'/></li>


<li class='sexy-facebook'><a expr:href='&quot; http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Facebook'/></li>


<li class='sexy-twitter'><a expr:href='&quot; http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Twitter'/></li>


<li class='sexy-mail'><a expr:href='&quot; mailto:?subject=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Enviaselo a un amigo'/></li>


</ul>


<span class='sexy-rightside'/></div>


<!-- Fin Sexy-Bookmarks -->

No te olvides de reemplazar donde dice URL DE TU FEED por la dirección RSS de tu Blog

El demo lo puedes ver aqui (si eres usuario de Wordpress puedes descargar el plugin de ahí mismo).

Emoticones en Blogger, Parte 2

En esta segunda parte del post de Como poner Emoticones en Blogger explicare el funcionamiento del Script así aprenderás a editarlo tu mismo y podrás poner tus propios emoticones y también podrás editar los símbolos para poner los emoticones.
Desde donde se ejecuta el Script:
Si te fijas en el Código del Script(clic para ver) todo el código esta escrito entre estos tags:

<script type='text/javascript'> 

//<![CDATA[ 
//]]> 
</script>

Esos tags nos permiten escribir cualquier script dentro del blog, esto hace que el script se ejecute directamente desde el mismo blog, la gran ventaja de escribirlo adentro del blog es que así no alojas el script en otro servidor y no estas sujeto a que si se cae el servidor o si tiene problemas de trafico y se pone lento no afectara la carga de tu blog o en peor de los casos eliminan el script, ya no tendrás acceso a el, en pocas palabras, no dependes de ninguna otra web.
Guardar los Emoticones y alojarlos tu propio servidor de imágenes:
Bien, ahora si quieres depender 100% de ti mismo lo que debes hacer es guardar los emoticones y subirlos a tu propio servidor de imágenes.
Puedes guardar todos los emoticones dándoles clic derecho y guardarlos en tu PC para luego así subirlos a tu servidor de imágenes favorito, todos los emoticones son estos:
Luego de que ya subiste los emoticones a tu propio servidor puedes substituir la url de cada emoticón del script por la url de tus emoticones.
Fíjate en el script, comprende varias líneas como esta:
d[i].innerHTML = d[i].innerHTML.replace(/\:\-\)/gi, ' <img src="http://i754.photobucket.com/albums/xx182/zavaletaster/emoticon0.gif" style="border:0; margin:0; padding:0;" id="new" /> ');
en esa parte debes cambiar la url del emoticón:
por tu propia url.
Como editar los símbolos para poner los Emoticones:
Para poder editar los símbolos de los emoticones debemos aprender un poquito de javascript y de la sintaxis del script, no es tan difícil como parece, fíjate la sintaxis básica es esta:
d[i].innerHTML = d[i].innerHTML.replace(/\:\-\)/gi, ' <img src="http://dir-de-tu-emoticon.gif" /> ');
la funcion .replace funciona de la siguiente manera:
.replace(cadena a buscar, cadena a reemplazar);
la cadena a buscar:
debe ser escrita entre dos plecas / / in clinadas a la derecha, por ejemplo si quisiera buscar la palabra gato y reemplazarla por la palabra perro tendría que escribir asi:
.replace(/gato/, "perro" );
la cadena a buscar tiene dos atributos la g(de global) y la i(de incase-sensitive)
si dejamos solo /gato/
entonces solo se substituirá la primera palabra gato en todo el texto
si escribimos /gato/g
quiere decir que se substituirán todas las palabras gato encontradas en el texto
si escribimos /gato/i
quiere decir que se buscaran todas las palabras gato y no importara si tienen mayúsculas o minusculas, de ahí "incase-sensitive" que seria algo como "no sensible a mayúsculas".
En este caso si se encuentraran estas tres palagras: Gato, gato, gAto
pues se substituirían todas ya que no importa las mayúsculas al contrario del caso de /gato/g en el que la similitud debe ser exacta al igual que la coincidencia de mayusculas y minusculas.
Ahora bien ya que aprendimos un poco a como utilizar vamos a aplicarlo directamente al código de los emoticones:
fijate en esta linea:
d[i].innerHTML = d[i].innerHTML.replace(/\:\-\)/gi, ' <img src="http://dir-de-tu-emoticon.gif" /> ');
en medio del / /gi hay un montón de símbolos raros, esto se debe a que si en la cadena a reemplazar hay símbolos que no son letras hay que especificarlos poniéndoles antes una pleca inclinada a la izquierda "\"
fijate bien en el ejemplo:
/\:\-\)/gi
si eliminas todas las \ en medio te quedara el símbolo del emoticón = : - )
así pues si en el caso de este emoticón = : - D
/\:\-D/gi
Fíjate que antes de la "D" no hay una "\" por que la "D" no es un símbolo.
También recuerda que la "i" en el / /i hace que sea insensitivo a las mayúsculas, eso quiere decir que no importa si se escribe
: - D o si se escribe : - d
con la "D" mayúscula o minúscula, siempre será reemplazado por la <img src="" /> del emoticón
Edita los símbolos de los emoticones por los que tu quieras
Ahora bien tu puedes editar los símbolos de los emoticones por lo que tu quieras, puedes simplificar los símbolos
de esto /\:\-\)/gi que es igual a : - )
a esto /\:\)/gi que es igual a : )
Podrías intentar simplificarlos de esa manera aunque en realidad yo deje el script de manera que los símbolos sean un poco mas complejos porque recuerda que dentro del código HTML de cada post hay símbolos que pueden llegar a ser muy parecidos a los símbolos de los emoticones y podrías llegar a tener problemas por ejemplo que en alguna parte del código de una imagen o de algún video que pongas en el blog te salga una sorpresiva carita feliz en vez del video o la imagen
Recuerda también que hay muchas otras formas de simbolizar los emoticones, no solo con esa clase de símbolos, también puedes ponerlos de esta manera
a esto /\:feliz\:/gi de esa forma cada vez que es cribas :feliz: entre los dos puntos será sustituido por el emoticón, tienes un montón de variantes que puedes aplicar, ahora todo depende de tu imaginación.
Para terminar una breve aclaración:
Fíjate en esta imagen, todo lo que esta en rojo debe ser igual la parte de arriba que la parte de abajo
ejemplo script
La parte de arriba en azul corresponde al 'post-body' que serian todos los elementos del cuerpo del post
La parte de abajo en verde corresponde al 'comment-body' que son todos los elementos del cuerpo de los comentarios
la razón de que tiene que ser igual lo que esta en rojo es quizá un poco obvia pero: porque asi sean los mismos emoticones y códigos para cuando escribes un post que para cuando se escriben en el comentario

Bueno espero sea de utilidad todo esto que escribí porque me tomo un poquito de tiempo, también espero haberme dado a entender lo mejor posible... 

...Si alguien tiene alguna duda pues comenten que intentare resolverlas lo mejor posible, bueno nos vemos hasta la próxima, hahaha

Emoticones para comentarios en blogger

Poner emoticones en tu blog en realidad es sencillo, lo complicado realmente es crear el Script para hacerlo, pero aquí en esta mini guía pongo a disposición de todos un Script que he creado y depurado, es el mismo que utilizo en este blog así que los emoticones que pondremos son los siguientes:
Antes de empezar quiero hacer una aclaración: El Script del código lo pongo en un archivo de texto que pueden descargar, no pongo el código aquí escrito en blog porque al poner los códigos del Script habrían partes en las que ustedes verían en vez de código los emoticones, espero darme a entender
Bueno empecemos:
PASO 1
Debes ir a tu plantilla de blogger: Diseño > Edición HTML y darle click a Expandir plantillas de artilugios una vez estando ahí tienen que buscar </head>
Un truco para buscar códigos en la plantilla de blogger es presionar Ctrl+F esto despliega una pequeña ventanita donde introduces lo que quieres buscar
Bueno una vez lo hayas encontrado tienes que pegar encima del </head> el código de Script que he puesto dentro de este archivo de texto
El código es grande(no te asustes) lo único que tienes que hacer es pegarlo y LISTO!!! ya tienes los emoticones
PASO 2
Ahora que ya tienes instalado el Script hace falta poner encima del formulario de comentarios de tu blog los códigos con la indicación de los emoticones, para que se vea así:
emoticones-tabla
Para hacer esto, tienes que insertar una tabla HTML con los emoticones y el símbolo a utilizar, yo me he tomado la molestia también de hacer la tabla que igual que el Script esta en un archivo de texto
Cuando ya tengas el cogido de la tabla tienes que ir a tu plantilla y con los artilugios expandidos buscar el siguiente código:

<p><data:blogCommentMessage/></p>

Ahí justo debajo de ese código debes pegar todo lo que esta adentro del archivo de texto de la tabla

PASO 3
Guarda los cambios en tu plantilla y ya puedes utilizar tus emoticones, tanto en los posts como en los comentarios
SI QUIERES MODIFICAR EL SCRIPT PARA CAMBIAR TUS PROPIOS EMOTICONES O SI QUIERES CAMBIAR LOS SIMBOLOS PARA ESCRIBIR LOS EMOTICONES PUEDES APRENDELO EN LA SEGUNDA PARTE DEL POST: APRENDE A COMO MODIFICAR EL SCRIPT DE LOS EMOTICONES