Ayuda para Blogger

Almacenar archivos

noreply@blogger.com (Abraham) — Thu, 20 Oct 2011 16:20:00 +0000

A los nuevos en este mundo de los blogs, a las personas que no saben cómo funciona una página, a las personas que ayer, se crearon un blog, y no saben muy bien para que sirve, o cómo utilizarla, o a las personas con experiencia las cuáles tienen varios años en esto pero les falta guardar sus archivos, y no saben donde, a los que quieren guardar librerias .js, etc, etc, etc....

Les traigo varios sitios web en los cuáles pueden subir sus archivos al internet, o como dicen:

"sube tus archivos a la nube"

Aquí les traigo algunas webs:

Dropbox:

Dropbox es un programa o un software, o un sitio en internet, en el cuál lo descargas (es muy fácil de descargar, se descarga en unos minutos) y tienes las carpetas public y photos. Si quieres subir un archivo a la nube lo haces muy fácil con dropbox, ya que solamente basta con tener internet en la casa; copiar y pegar el archivo o la carpeta que quieras en la carpeta public (pública) o en la carpeta phtos (para fotos). y se comienza a subir automáticamente. También dispone de 2Gb de espacio grátis. Comienza a investigar de él, ya que es muy bueno.

2. Google docs

Google docs es un sistema para subir archivos a la nube muy fácil, y por cierto de google, y tiene una capacidad máxima de 1024 MB, es decir, capacidad de 1Gb de espacio libre. Y como el producto anterior, gratis.

Aquí podemos ver documentos en línea, crear documentos en línea, cosa que no tiene dropbox. Y además de eso, no tienes que descargar ningún programa, y es fácil e intutivo.

3. Google sites

Google sites, hace la misma función de Google docs y dropbox, lo único, que no tiene las mismas posibilidades, es un poco complicado y no es muy fácil de usar. No entraré en detalles de esta web.

Solamente he puesto tres porque no me recuerdo de los otros. Pero les estaré informando. ¡Hasta la próxima entrada!

Instalar Ubuntu 11.10

noreply@blogger.com (Abraham) — Fri, 14 Oct 2011 12:03:00 +0000

El nuevo ubuntu ya salió a la luz en este mes de octubre, tiene algunos cambios en su interfaz más bonito que el ubuntu 11.04 (el que tengo) y bueno, ahora mismo lo estoy instalando en mi computadora, si lo quieren probar sino saben cómo es este sistema operativo, solamente descárguenlo desde la página oficial; y dan clic en el botón siguiente:

y luego eligen la opción:

Y luego lo descargan presionando el botón siguiente:

Cuando lo descarguen siguen las instrucciones que aparecen en la página de la imagen anterior, les advierto, puede durar hasta 10 horas si es por mí, bueno, dura siempre muchísimo para instalarse; pero es un buen sistema operativo, claro para ser grátis y en comparación a windows y a mac.

Ubuntu

noreply@blogger.com (Abraham) — Fri, 07 Oct 2011 15:18:00 +0000

No se si a ustedes le gusta, pero a mi me gusta, me agrada linux o ubuntu. Lo puse en una computadora (el Ubuntu 11.04, el que salió nuevo) y es muy bueno, lo hice por medio de internet.

Mi opinión es muy buena a cerca de este sistema operativo; ya que es muy fácil de usar, hermoso, bonito y elegante, y tiene una interfaz muy diferente a la de Windows o Mac.

Para más información visiten: http://www.ubuntu.com/ o http://www.ubuntu.com/ubuntu/why-use-ubuntu.

Bueno, hasta la próxima entrada.

Google Plus para TODO EL MUNDO

noreply@blogger.com (Abraham) — Tue, 20 Sep 2011 23:13:00 +0000

Estaba entrando a google, entonces yo siempre lo dejo conectado, con mi imagen de fondo, y demás cosas cuando se me ocurrió poner el doodle.

Esta viendo y vi la flecha de la siguiente imagen:

Entonces puse el mause encima de la flecha (como siempre hago) y vi que decía:
"Google + está abierto a todos".

Entonces ahora ya todo el mundo puede usar

Hasta la próxima entrada.

Nueva interfaz de usuario en blogger, gmail, etc.

noreply@blogger.com (Abraham) — Fri, 16 Sep 2011 02:50:00 +0000

Estaba entrando a mi cuenta de google (Gmail) hace unos minutos y me encuentro con que ha cambiado la interfaz de usuario en blogger y en gmail.

He aquí, les presento una imagen de ello:

Bueno, solamente es para avisar, luego les seguiré informando sobre estos cambios.
Hasta la próxima entrada.

Cómo utilizar google plus sin que te deje.

noreply@blogger.com (Abraham) — Fri, 02 Sep 2011 00:12:00 +0000

Si eres uno de los que les gusta Google Plus y que está muy curioso para querer usarlo, entonces encontraste la solución, sí, si, la encontraste eres uno de los afortunados de los que encontraste esta entrada.

Estaba leyendo en un web-blog en el internet de dos formas de cómo usar Google Plus, y vi dos opciones, una que a mi no me gusto mucho porque era muy complicado y no me parecía bien.
Después seguí buscando y él decía:

Solamente, para poder usarlo solamente tienes que comentar en mi facebook y decirme tu correo de gmail (obligatoria mente de gmail) para poder usarlo.

Era algo así que decía. También decía que lo que el tenía que hacer era enviar una invitación a tu gmail para que lo puedas usar sin restricción alguna el Google plus.

Cómo obtenerlo.

Bueno, bueno, ya vasta del rodeos y vamos al grano. El punto es que solamente tienen que comentar en esta entrada o en cualquiera o enviarme un mensaje por correo electrónico, para que yo les pueda enviar la invitación a ustedes para que así lo puedan usar

Esta es la imagen que te aparece cuando ya te he enviado o te han enviado una invitación, de otra manera diría añadir al carro

Bueno esto fue todo por este día, hasta la próxima entrada.

Abrir en otra pestaña con el mause.

noreply@blogger.com (Abraham) — Sun, 28 Aug 2011 16:05:00 +0000

Algunas veces vemos enlaces (links), y no sabemos si se abre en otra pestaña, quizá porque no nos gusta que estamos viendo algo, y cuando estamos leyendo un blog, por ejemplo, damos un clic en un enlace y lo que sucede, es que en la misma página en la cuál nosotros dimos clic se abre la página la cuál nosotros elegimos en el enlace.

Para solucionar este problema, como dice esta entrada: "Abrir en otra pestaña con el mause,"
podemos lograr haciéndolo de las dos maneras siguientes:

Si este es tu caso, (dos [2] botones)

Nos ponemos justo encima del enlace en la cual queremos abrir en otra pestaña
damos clic derecho con el mause
Y nos vamos a la opción Abrir enlace en una pestaña nueva (En Google Chrome)

Esta última era la manera más difícil e incómoda. Otra manera más fácil; que claro, funciona solamente con un mause de 3 botones, y es la siguiente:

Si este es tu caso, (tres [3] botones)

Ponemos el mause encima del enlace y damos clic en el botón del medio (con el cuál podemos ir arriba y abajo con la rueda).

Y listo, lo hemos logrado

Chrome Web Store

noreply@blogger.com (Abraham) — Wed, 10 Aug 2011 17:02:00 +0000

Si son de los que les gusta usar google chrome, porque es muy útil y muy rápido, quizá complementar algunas utilidades con Chrome Web Store, no sería malo para nosotros. Una página útil, en la cual podrás poner aplicaciones, temas, juegos y más en tu navegador, Google Chrome

También una herramienta que me gustó mucho, y que también creo que les va a gustar sería:

Screen Capture (by Google) que traducido sería: captura de pantalla (google).

Esta herramienta, para capiturar la pantalla y cualquier parte de ella es muy útil y se pone en la parte de arriba de nuestro navegador:

Y podemos buscar muchas más aplicaciones parecidas aquí.

Hacer que te enlacen con la etiqueta textarea

noreply@blogger.com (Abraham) — Sun, 07 Aug 2011 12:00:00 +0000

Para poner este código hay que ir a: Este es el mismo truco anterior. La diferencia es que, tiene una caja contenedora de texto en donde se encuentra el código para que te enlacen. Miren el siguiente ejemplo:

Hay que hacer lo siguiente para poner el código en nuestro blog:

Hay que ir a Diseño
Ir a Elementos de página
Luego escoger la opcción añadir un gadget
Y luego es cogen un elemento html/javascript

El código es el siguiente:


<a href="DIRECCIONDETUBLOG"><img src="DIRECCIONDELAIMAGEN" title="NOMBRE DE TU BLOG"/></a><br/>
<textarea rows="2" cols="20" onclick="this.select();"><a href="DIRECCIONDETUBLOG" target="_blank" title="NOMBRE DE TU BLOG"><img border="0" alt="NOMBRE DE TU BLOG" src="DIRECCIONDELAIMAGEN"/></a><br/>

<a href="DIRECCIONDETUBLOG" target="_blank">NOMBRE DE TU BLOG</a></textarea>

Todo lo que tienen que hacer es editar lo que está de color rojo con mayúsculas.

Cómo hacer para que te enlacen

noreply@blogger.com (Abraham) — Fri, 05 Aug 2011 22:52:00 +0000

El truco que les voy a mostrar hoy es el que yo uso en este mismo blog, para que me enlacen, lo pueden ver en la columna lateral de la izquierda (o sidebar) Este truco lo he encontrado en Tuneando el Blog.

Este código se pone de la siguiente manera:

1ro- Vamos a Diseño | Edición HTML

2do- Añadir un gadget | y luego escogemos une elemento html/javascript.

Y añadimos en el elemento javascritp el siguiente código:

<img src="aquí la dirección de tu Imagen"/>

<form action="http://beta.blogger.com/add-widget" method="POST">

<input value="aquí la frase que verá como título del gadget quien se lleve tu botón (En el mío se ve Mi ayuda blogger)" name="widget.title" type="hidden"/>

<textarea style="display:none;" name="widget.content">



<a href="Aquí la dirección de tu blog"><img alt="Aquí el título de tu blog" src="aquí otra vez la dirección de tu Imagen"/></a>



</textarea>

<input

value = http://buzz.blogger.com name="infoUrl" type="hidden"/>

<input

value = name="logoUrl" http://www.blogger.com/img/icon_logo32.gif type="hidden"/>

<input value="Aquí es lo que se ve en el botón, en el mío se ve Pinchando aquí" name="go" type="submit"/>

</input

value></input

value></form>

Bueno, así de fácil es.

Lo que está marcado de rojo es lo que se tiene que editar para ponerlo en tu blog.

Entradas Relacionadas con miniatura

noreply@blogger.com (Abraham) — Mon, 01 Aug 2011 19:02:00 +0000

Este blog no tiene este sistema, pero si te interesa este post, sigue leyendo... Lo puedes cambiar a tu antojo, puedes poner cuantas miniautras tenga cada entrada y las personas que te visitan pueden ver el título de las miniautras de imágenes.

He aquí el link de esta página: Link Within

He aquí una imagen:

Este servicio lo pueden ver en Esta página.

Rellenamos este formulario con nuestros datos para poder avanzar a los pasos siguientes:

Agregan el elemento, se añade automáticamente después de que ustedes pinchen donde dice Instal widget.

Entonces les aparece el lugar donde dice: Seleccionar blog ahí eligen el blog donde quieren poner el elemento html.

Y si quieren hacerle caso a la página de ellos; arrastra el elemento que has puesto debajo de las entradas como muestra la siguiente imagen:

Actualización sobre la compatibilidad de exploradores

noreply@blogger.com (Abraham) — Fri, 15 Jul 2011 14:50:00 +0000

Tengo Buenas y malas noticias, leyendo en Blogger Buzz Decía de que ahora, el 1 de agosto (Es decir, el mes próximo), (...) :

Nuestro equipo ha estado pensando mucho últimamente acerca de la compatibilidad del navegador, y quería darle a conocer nuestro nuevo plan de seguir adelante. Para las aplicaciones web como Blogger para continuar evolucionando a un ritmo rápido, nuestro equipo de ingeniería tiene que hacer uso de las nuevas capacidades disponibles en los navegadores modernos. Por ejemplo, vistas dinámicas, que de antemano en marzo, y ambas requieren de fuentes Web avanzadas compatibles con navegadores HTML 5 . Los navegadores más antiguos simplemente no son capaces de ofrecerle la misma experiencia de alta calidad. Por esta razón, a partir del próximo mes Blogger.com sólo apoyará los navegadores modernos. A partir 01 de agosto , vamos a apoyar la liberación importantes, actuales y anteriores de Chrome, Firefox, Internet Explorer y Safari, de forma continua. Cada vez que una nueva versión es lanzada, vamos a empezar a apoyar la actualización y dejar de apoyar a la tercera versión más antigua. A partir del 01 de agosto, que se deja de dar soporte para los siguientes navegadores y sus predecesores: Firefox 3.5, Internet Explorer 7, y Safari 3. En estos navegadores antiguos puede tener problemas para usar ciertas funciones de Blogger, así como muchas otras aplicaciones de Google como Gmail, Google Calendar, Google Talk, Google Docs y Google Sites. Así que si ha pasado un tiempo desde su última actualización, le recomendamos para tomar ventaja de la mejora del rendimiento y la seguridad de los navegadores modernos tienen que ofrecer al instalar la última versión de su navegador preferido. Hay muchos para elegir:

A medida que el mundo se mueve más a la web, estos nuevos exploradores son más que una conveniencia moderna, son una necesidad para lo que depara el futuro.

Tomado de: Blogger Buzz.

La nueva interfaz de Blogger

noreply@blogger.com (Abraham) — Wed, 13 Jul 2011 16:25:00 +0000

Desde hace ya un tiempo deseaba tener la nueva interfaz de Blogger, siempre miraba Ciudad Blogger, Gema Blog, etc... Este nueva interfaz me fascina.

Hace unos días me la pusieron en Blogger en borrador, y bueno, me sorprendí en lo elegante que era; Antes de tenerla estaba leyendo en Ciudad blogger y en otros blogs, que comentaban que no tenía el editar html de la plantilla, y cosas así. Se me estaba quitando el deseo de tenerla, después de haber visto en Ciudad blogger y visto la entrada que el puso en el enlace anterior, vi que decía que ya lo tenía, es decir, el editar html.

Hace dos días entraba a mi cuenta de blogger (Siempre entraba con blogger in draft como predeterminado) y vi que me apareció la nueva apariencia y me alegré mucho, vi, Otra vez, El blog del potro, buscando una entrada sobre la nueva interfaz de blogger.

En ese momento encontré que tenía el editar la plantilla, el html, subir la plantilla, y me algeré muchísimo; (Estaba viendo las plantillas nuevas que tenían cuando eso)

Se lo recomiendo, es muy buena la nueva interfaz, ojalá que ustedes la tengan también, les dejo algunas imágenes:

Las imágenes que he puesto en esta entrada han sido tomadas de Ciudad Blogger

Expandir y contraer texto en un post, entrada o gadget html

noreply@blogger.com (Abraham) — Thu, 23 Jun 2011 20:47:00 +0000

Este truco es parecido a la entrada anterior. La entrada anterior explicaba cómo poner un botón o spoiler en una entrada, este es parecido a la entrada anterior; la diferencia es que este tiene un efecto deslizante con scriptaculous.

Se puede esconder texto, imágenes y video y sirve para ahorrar espacio a una entrada, post o un gadget html.
Miren los ejemplos siguientes:

Ejemplo de una imagen:

[+/-] Ver / Ocultar

Ejemplo de Texto:

[+/-] Ver / Ocultar

Ejemplo de un video:

[+/-] Ver / Ocultar

Vamos a Diseño
Edición HTML
Ctrl + f y buscar

Y antes de Pegamos 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-->

Antes de pegar lo anterior verifica si tu plantilla ya lo tiene, de ser así omite ese paso.
Lo que tienes que hacer para ponerlo en una entrada, post o elemento html tenemos que poner el siguiente código html:


<a href='#' onclick='Effect.toggle("expandir1","slide"); return false'>[+/-] Ver / Ocultar</a><div id='expandir1' style='display: none;'>Aquí va el contenido que se ocultará</div>

Tienes que tener en cuenta de que expandir1 deberás cambiarlo cada vez que vallas a poner uno nuevo.
ejemplo: expandir2, expandir3, etc... Lo que está marcado de rojo es el contenido, puede ser texto, imagen, video o tabla; cualquier cosa.

Fuente: Ciudad Blogger

Botón o Spoiler para para ocultar o mostrar contenido

noreply@blogger.com (Abraham) — Thu, 23 Jun 2011 19:07:00 +0000

Este truco es muy bueno, se lo recomiendo a todos. Bueno, sirve para crear un botón cualquiera, texto o imagen que cuando tienes un contenido muy largo o muy extenso, puedas poner un botón, texto o imagen que diga: Leer más, seguir leyendo, etc...

He aquí un ejemplo:

Podemos poner cualquier cosa dentro de este, un video, una imagen o un sonido; cualquier cosa.

Para usarlo, tienes que poner el siguiente código, cada vez que lo quieras usar:


<div class="divspoiler">

<input type="button" value="Mostrar" onclick="if (this.parentNode.nextSibling.childNodes[0].style.display != '') { this.parentNode.nextSibling.childNodes[0].style.display = ''; this.value = 'Ocultar'; } else { this.parentNode.nextSibling.childNodes[0].style.display = 'none'; this.value = 'Mostrar'; }" />

</div><div><div class="spoiler" style="display: none;">

Aquí el contenio que queremos ocultar

</div></div>

También puedes poner una imagen y algo que diga Mostrar/Ocultar. Ejemplo:

Mostrar / Ocultar ▼▲

Podemos poner una imagen, texto o cualquier cosa, miren el siguiente código


<div class="divspoiler">

<a href="javascript:void(0);" onclick="if (this.parentNode.nextSibling.childNodes[0].style.display != '') { this.parentNode.nextSibling.childNodes[0].style.display = ''; } else { this.parentNode.nextSibling.childNodes[0].style.display = 'none';}" >Mostrar / Ocultar ▼▲</a>

</div><div><div class="spoiler" style="display: none;">

Aquí el contenio que queremos ocultar

</div></div>

Si prefieres, puedes usar una imagen:

Para poner el de la imagen pongan el siguiente código html:


<div class="divspoiler">

<img src="URL de la imagen" onclick="if (this.parentNode.nextSibling.childNodes[0].style.display != '') { this.parentNode.nextSibling.childNodes[0].style.display = ''; } else { this.parentNode.nextSibling.childNodes[0].style.display = 'none';}" />

</div><div><div class="spoiler" style="display: none;">

Aquí el contenio que queremos ocultar

</div></div>

Muy bueno ¿verdad? y práctico. Hasta la próxima entrada.

Fuente: Ciudad blogger

Caja contenedora elegante

noreply@blogger.com (Abraham) — Tue, 21 Jun 2011 22:22:00 +0000

Lo que vamos hacer hoy es algo parecido al Blockquote. Pero este es más elegante y está hecho con css3.
Este truco lo he visto en el blog de Gema, Gema blog. Gracias a ella he aprendido mucho.

Ahora, vamos a poner un ejemplo y un código en la plantilla antes de ]]></b:skin>, el siguiente código:


.bloque-color {

-webkit-border-radius: 31px;

-moz-border-radius: 31px;

border-radius: 31px;

-webkit-box-shadow: 4px 4px 6px #000000;

-moz-box-shadow: 4px 4px 6px #000000;

box-shadow: 4px 4px 6px #000000;

text-shadow: -1px -1px 0px #000000;

-webkit-transform: rotate(-17deg) scale(0.9) skew(-22deg,17deg);

-moz-transform: rotate(-17deg) scale(0.9) skew(-22deg,17deg);

-o-transform: rotate(-17deg) scale(0.9) skew(-22deg,17deg);

border: 1px solid #FFC0CB;

background: #696969;

padding: 9px;

opacity: 0.7;

font-family: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;

font-size: 12pt;

color: #FFF5EE;

text-align: center;

width: 300px;

height: 150px;

}

Nosotros lo podemos usar de la siguiente manera:

Lo podemos poner en un gadget html el código siguiente
Y lo podemos poner en una entrada como en el blockquote.

Para ponerlo, y funcione, tenemos que poner el siguiente:


<div class="bloque-color">

Aquí añadimos el contenido, puede ser texto, una imagen 
.

</div>

Este es el ejemplo que no nosotros pusimos, lo anterior. Esto es muy bueno, también como el blockquote.

Vieron, así de fácil es. Para poner una imagen dentro de esta caja contenedora vean esta entrada. Bueno, también les invito a que visiten el blog de Gema, dónde explica mejor lo que he tratado en esta entrada

Cómo usar la etiqueta Textarea

noreply@blogger.com (Abraham) — Mon, 20 Jun 2011 19:17:00 +0000

Esta etiqueta es muy útil para el envío de formularios, pero en esta ocación solamente diremos cómo es que funciona, y algunos ejemlos de esta etiqueta html.

Primero; Tenemos que saber que esta etiqueta es para poner texto que se pueda modificar, enviar, o solamente que sea solo lectura sin poder modificar nada. Con una ventaja: La ventaja es que cuando queremos poner códigos html en nuestra página web o blog y son muy largos estos códigos, podemos hacerlo del largo que nosotros queramos y tiene una barra para bajar hacia abajo.

Primero vamos a explicar cómo es que funciona cada uno de los elementos que lleva eta etiqueta (<textarea></textarea>):

rows="n".Donde n es el número de filas
cols="n". Donde n es el número de columnas
name="nombre". Asigna un nombre identificador único al campo.
wrap="off / soft / hard". Se usa para indicar el texto que el texto se debe justificar (ajustar al ancho de la ventana. Off valor por defecto, no hay ajuste del texto enviándose este tal y como fue escrito. Soft, ajusta el texto a la ventana, además envia este como una cadena continua. Hard, ajusta el texto a la venta enviando el texto como separando la palabra y líneas donde sea necesario.
readonly. No deja que el texto escrito en el área de texto pueda ser modificado por las personas que vean la página (sin embargo ese contenido será enviado con el resto del formulario).
disable. Desactiva el elemento. Impidiendo que el texto que contiene se ha modificado, y además tampoco es enviado con el formulario.

Ejemplo:


<form>

   <textarea name="opinion2" rows="2" cols="55" readonly>

   Este texto no se puede modificar, hecho por: Abraham Santos, de abraham-ayudab.blogspot.com

  </textarea>

</form>

Este ejemplo se viera así:

¿Ya vieron? ¿verdad que es muy útil?

Bueno hasta la próxima entrada.

Blockquote

noreply@blogger.com (Abraham) — Mon, 20 Jun 2011 02:02:00 +0000

El Blockquote o bloque con cita (Traducido), es uno de los elementos más usados en los blogs. Por ejemplo:

Un blog que trate sobre artistas o modelos, el artista o modelo dice algo, y esto lo resaltamos, ¿pero cómo?.

¡Aquí está la respuesta!. Si te has dado cuenta, cuando pones el blockquote o cita donde están las comillas cuando vas a poner una entrada, le das un clic y escribes. Pero... ¿qué pasa?, Cuando publicas la entrada, lo que aparece es un texto en cursiva separado con una separación de varios espacios.

Y ya. Lo que vamos hacer es personalizarlo.

De la siguiente manera:

Nos vamos a diseño
Pinchamos donde dice edición html
Hacemos el conjunto de teclas: Ctrl + F

Y buscamos el siguiente código:

.post blockquote {

    font: italic 13px georgia;

    margin: 1em 20px;

}

Esto, si no le hemos cambiado nada. Es decir, así es que aparece por defecto. Y lo podemos cambiar por este:


.post blockquote {

color:#fff;

width:350px;

margin-top: 10px;

font-size:100%;

padding-left: 18px;

padding-right: 18px;

padding-top: 18px;

padding-bottom: 18px;

background-image:url(url-imagen-fondo);

font: normal helvetica, sans-serif;

}

Y puede quedar como la imagen siguiente. Es la que yo uso.

También hay otras, que tienen unas comillas cuando comienzan. Este es el código de ellas:


.post blockquote {

color: #0f5718;

font-size: 90%;

display: block;

margin-right: 20px;

line-height: 140%;

margin-left: 20px;

padding-top: 50px;

padding-right: 20px;

padding-bottom: 4px;

padding-left: 70px;

font-family: Verdana,Arial,Helvetica,sans-serif;

background-color: transparent;

background-image: url(url-imagen-comillas);

background-repeat: no-repeat;

}

He aquí dos imágenes:

Para más códigos y demás cosas visiten Gema Blog de aquí fue que yo hice esta entrada, es decir, basándome en ella.

Poner una pequeña biografía en cada post

noreply@blogger.com (Abraham) — Sun, 19 Jun 2011 22:55:00 +0000

Como ya habrás visto, este blog tiene una biografía mía al final de cada entrada o post. Yo le puse una foto de un violín como avatar porque me gusta la música (es obvio), y para hacerlo hagan lo siguiente:

Van a su escritorio o panel de control en blogger
Dan clic en diseño
Edición html
Marquen la casilla Expandir plantillas de artilugios

Y busquen el siguiente código html:


<span class='post-author vcard'>

<b:if cond='data:top.showAuthor'>

<data:top.authorLabel/>

<span class='fn'>

<data:post.author/>

</span>

</b:if>

</span>

Borran el código anterior, y ahora busquen la siguiente linea:


<div class='post-footer'>

Luego, debajo de esta linea agregan el siguiente código:


<div class='acercadelautor'>

<img border='0' src='URL del avatar' style='float:left; margin:0 10px 10px 0;width:80px; height:80px;'/><span style='font-style:italic; font-size:10px;'>ESCRITO POR</span> <strong><data:post.author/></strong>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vulputate pellentesque nisl, id vulputate leo mollis quis. Maecenas mattis, justo et sagittis iaculis, ligula ipsum ullamcorper lectus, at vehicula odio sapien eu ante.</p>

</div>

Y eso fue todo. Agreguen cualquier cosa, cambien el tamaño de la imagen o avatar que ustedes quieran poner.

Alguna pregunta, por favor comentar

Imagen de fondo a una entrada

noreply@blogger.com (Abraham) — Mon, 06 Jun 2011 01:37:00 +0000

Yo creo, que ustedes han pensado:

¿Cómo yo puedo poner una imagen de fondo en una entrada? ¡Pues aquí está solución!

Ahora he aquí las instrucciones:

Creamos una entrada nueva
Nos vamos a edición HTML

Y ponemos el siguiente código:

<div style="background-image: url(URL de tu imagen); padding: 5px;">

 Aqui el Contenido

</div>

Para cambiar la imagen de fondo, tienen que cambiar por lo que está marcado de rojo cambiarlo por la url o dirección de la imagen que vallan a poner.

Lo recomendable sería que ustedes pongan una imagen que no sea molesta a la vista.

Cómo poner un avatar o imagen a personas anónimas

noreply@blogger.com (Abraham) — Thu, 02 Jun 2011 17:54:00 +0000

Algunas veces nos hemos dado cuenta, que hay personas que ponen un comentario en nuestro blog o página web, y no tienen un avatar o imagen que los identifique. Es una imagen que se coloca si el que comenta
no tiene avatar se le pone una imagen default

¡Esta es la solución!

Para hacer este truco tienen que seguir los primeros pasos:

Antes de ]]></b:skin>

Ponemos el siguiente código:

#comments-block .avatar-image-container.avatar-stock img {

display:none;

}
#comments-block .avatar-image-container.avatar-stock {

background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-bd0-8l9HrVIkZAud7brabjSdZmv5HqlTBTso2AUlte6qi5kCGpBhBUYz_6xXE8WMvpg_8Qb6L8ZzUoP5DeAXMkS4NBuwC8RmsyA8NIFWoBeSPEipkLJdLOKPOzqE4oSWqDb254IUapQ/s104/default_avatar3%255B1%255D.gif) no-repeat scroll 50% 50%;

}

Cómo poner una imagen con edición html

noreply@blogger.com (Abraham) — Thu, 02 Jun 2011 13:27:00 +0000

Para poner una imagen, (No dándole en la entrada: Insertar Imagen, sino, con edición HTML) con la edición html hacer lo siguiente:

Tenemos que usar la etiqueta: <img> esta etiqueta tiene algo raro... No tiene etiqueta de cierre, es decir no existe un </img> . Esto es algo muy básico, que todos nosotros tenemos que aprender...

Ahora, para poner una imagen hacemos lo siguiente

<img alt="Imagen" title="Imagen"src="http://urldemiimagen.com" height="pixeles de altura que yo quiera" widht="pixeles de anchura que quiera">

Ahora, vamos a desglosar completamente esto:

Ya sabemos que hace la etiqueta img; ahora tenemos que saber que hace la etiqueta alt, lo que esta marcado de azul. Esto es una alternetiva a alguien que tenga un navegador que no pueda cargar imágenes o que se vea texto en vez de imágenes. Por ejemplo, miren el blog de Rosa. Me he dado cuenta que sus imágenes ya no se ven, solamente el texto que ella a puesto en alt y title.

Cuando usamos la etiqueta alt y no se ve la imagen, se ve un texto. Ese texto es: Imagen, como en nuestro caso...

Ahora vamos por src, que está marcado de rojo. Ahí pondremos la dirección de la imagen o url de la imagen, dentro de las comillas.

Ahora height, marcado de morado, sirve para definir la anchura en píxeles en Número. Por ejemplo:

height="20". Ya creo que todo está claro.

Ahora lo de widht, lo que está marcado de verde, define la altura en pixeles. Es igual que como vimos en hegiht

Y por último, el atributo title, el que está marcado de naranja en negrita. Este atributo, como alt permite que cuando pongamos el cursor encima de la imagen, podamos ver un texto que diga algo, también en caso de que la imagen no se pueda ver. Muy útil cuando pierdes todas las imagenes que has puesto en tu blog.

Y ya, esto es todo ahora vamos a poner una imagen para que ustedes vean cómo se vería una imagen si no tuviera una imagen, con la etiqueta alt y title:

Algunas etiquetas HTML.

noreply@blogger.com (Abraham) — Wed, 01 Jun 2011 19:27:00 +0000

Hay personas (que yo he visto) que no saben ni lo más mínimo de lo que es el HTML o javascript. Estos conceptos son muy básicos a la hora de hacer un blog.

En algunos lugares... Entras a Diseño, configuración, comentarios, hay un lugar que dice: Mensaje del formulario de comentarios, aquí dice: "Puedes utilizar algunos códigos HTML, como , , <a>", De esto vamos a explicar, hoy. Estes etiquetas suelen ser (en el caso de blogger):

<a>, , y . Estas son las más usadas. Por ejemplo:

Cuando ponemos un texto en negrita (Negrita) utilizamos la etiqueta . Esto lo hacemos sin darnos cuenta. Lo que pasa es que blogger ha hecho de que las personas que no saben ni lo más mínimo del html, puedan hacer un blog.

Ahora, vamos a enseñarles que hacen las etiquetas, y cómo se ponen las etiquetas:

Para poner un texto en negrita, hacemos de la siguiente manera: (Si es en una entrada, en un gadget html, o en cualquier lugar que puedaa leer los comandos html)

Para poner Texto en Negrita Negrita

¿Qué es esto lo de ? esta es la etiqueta de cierre. Es para que el navegador sepa cuando termina el texto en negrita

Para poner un Enlace se hace de la siguiente manera: <a href="http://abraham-ayudab.blogspot.com">Enlace</a>

Ya vimos que no es tan sencillo como parece, ¿he? Vamos a entender lo que hizimos: cuando ponemos las comillas dobles estamos identificando que lo que estamos poniendo dentro de ellas, que es una dirección de enlace. Después cuando ponemos un > después de las comillas escribimos el texto que nosotros queremos que aparezca, en vez de el enlace.

También nosotros podemos hacerlo sin texto. Por ejemplo <a href="http://abraham-ayudab.blogspot.com"></a>. Solamente va a quedar la dirección pero sigue siendo un hiper vínculo (Hiper viínculo: Enlace que al tocarlo te lleva a una dirección). Y cerramos con la etiqueta </a> para decirle al navegador que ya terminamos la etiqueta <a>.

Ahora, para poder poner texto en cursiva, tenemos que hacerlo de la siguiente manera:

Cursiva. Lo mismo que nosotros hicimos en el de poner texto en negrita.

Ahora, para poner texto subrayado tenemos que hacer de la siguiente manera:

Subrayado

Para poner todos juntos (b, u, e i):

Texto a poner.= Texto a poner.

Y eso era todo. Después enseñaré cómo poner una imágen con edición html

Flecha ir arriba.

noreply@blogger.com (Abraham) — Sun, 29 May 2011 18:07:00 +0000

Lo que voy a tratar hoy es cómo poner una flecha a la derecha de la página para poder ir arriba como está en este blog. Muy Útil cuando tienes muchos comentarios o para desplazarte en tu blog.

Lo que aremos será poner el siguiente código antes de </body>

Vamos a diseño---> Edición html---> Ctrl + F
Buscamos </body> y justo antes pondremos el siguiente código:

<a href='#'><img border='0' src='Url de tu imágen' style='position: fixed; bottom: 0; right: 0;'/></a>

Que el mause tire estrellitas

noreply@blogger.com (Abraham) — Sat, 28 May 2011 16:31:00 +0000

Para hacer que el mause tire estrellitas por debajo de él, de cualquier color. Tenemos que poner el código siguiente justo encima de </head>

Pinchen aquí para el código.

Hay un lugar que dice var colour="#6C82B5", ustedes le cambian el color que ustedes quieran.
Pinchando aquí, ustedes pueden tener una paleta de colores, cada uno con sus respectivos códigos html.

Copian el texto del penúltimo enlace, y allí ustedes lo copian como ya dije justo encima de </head>.