Imagenes en Autor Categoria y Comentario

Julio 20, 2008 a 2:29 am (Editar un blog)

Gracias a gemablog

 

Aplicar imágenes tipo iconos en los comentarios, autor, categoría, etiquetas ect…
Primeramente vamos a localizar el lugar donde haremos las modificaciones, nos situamos en este orden:

Panel/Diseño/Plantilla/Edición de HTML

Buscaremos en nuestra plantilla los CSS justo antes de ]]></b:skin> es el lugar idoneo para aplicar nuestro código.
A continuación copiaremos y pegaremos los códigos dependiendo de la parte que deseamos añadir una imagen tipo icono.

“Imagen en Categoría o Etiquetas”

.post-labels
{ padding-left:20px;
padding-top:5px;
background: url(url_de_la_imagen) center left no-repeat; }

“Imagen en Comentarios”

.comment-link
{
padding-left:20px;
padding-top:5px;
background: url(url_de_la_imagen) center left no-repeat; }

“Imagen en (Publicado por) o Autor del blog”

.post-author
{
padding-left:20px;
padding-top:5px;
background: url(url_de_la_imagen) center left no-repeat; }

(Donde dice url_de_la_imagen hay que añadir la url de la imagen seleccionada)

Dejar un comentario

Nociones HTML

Julio 20, 2008 a 12:59 am (Uncategorized)

Vamos a conocer algunas nociones básicas sobre el lenguaje HTML que nos enseñan en Web Taller

Este recurso es necesario para tener un conocimiento de como modificar nuestra plantilla del Blog y gestionar los cambios que creamos necesarios.

El HTML, de las siglas en inglés de Hyper Text Markup Language (lenguaje de marcación de hipertexto), es un lenguaje informático diseñado para estructurar textos y presentarlos en forma de hipertexto, que es el formato estándar de las páginas web.

Un documento escrito en HTML contendría básicamente las siguientes etiquetas :

<HTML> Indica el inicio del documento.
<HEAD> Inicio de la cabecera.
<TITLE> Inicio del título del documento.
</TITLE> Final del título del documento.
</HEAD> Final de la cabecera del documento.
<BODY> Inicio del cuerpo del documento.
</BODY> Final del cuerpo del documento.
</HTML> Final del documento.

 

CABECERA DEL DOCUMENTO

La etiqueta <HEAD></HEAD> delimita la cabecera del documento. Dentro de la cabecera es importante definir el título de la página por medio de la etiqueta <TITLE></TITLE>. Este título será el que aparezca en la barra de nuestro navegador de páginas Web.

Ejemplo :

<TITLE>Noticias para Blogs</TITLE>

Dentro de la cabecera de nuestro documento podemos incluir otras etiquetas adicionales. La etiqueta <META> indica al navegador de Internet las palabras clave y contenido de nuestra página Web.

Ejemplos :

<META name=”Ayuda para Blogs” content=”Recursos, Utilidades, Aplicaciones e Información para la creación de Blogs”>

Indica al navegador el nombre de la página y sus contenidos principales.

<META name=”keywords” content=”Blogs, Recursos, Informacion, Aplicaciones”>

Indica al navegador las palabras clave para los buscadores de Internet.

CUERPO DEL DOCUMENTO

La etiqueta <BODY></BODY> indica el inicio y final de nuestra pagina Web. Será entre el inicio y el final de esta etiqueta donde pongamos los contenidos de nuestra página, textos, gráficos, enlaces, etc…. Esta etiqueta tiene una serie de parámetros opcionales que nos permiten indicar la “apariencia” global del documento :

background= “nombre de fichero gráfico”
Indica el nombre de un fichero gráfico que servirá como “fondo” de nuestra página. Si la imagen no rellena todo el fondo del documento, esta será reproducida tantas veces como sea necesario.

bgcolor = “código de color”
Indica un color para el fondo de nuestro documento. Se ignora si se ha usado el parámetro background.

text = “código de color”
Indica un color para el texto que incluyamos en nuestro documento. Por defecto es negro.

link = “código de color”
Indica el color de los textos que dan acceso a un Hiperenlace. Por defecto es azul.

vlink = “código de color”
Indica el color de los textos que dan acceso a un Hiperenlace que ya hemos visitado con nuestro navegador. Por defecto es purpura.

El código de color es un numero compuesto por tres pares de cifras hexadecimales que indican la proporcion de los colores “primarios”, rojo, verde y azul. El codigo de color se antecede del símbolo #.

Dejar un comentario

Post Expandibles

Julio 20, 2008 a 12:59 am (Uncategorized)

En primer lugar ingresamos a Personalizar – Plantilla – Edición de HTML y hacemos click en Expandir plantilla de artilugios y realizamos una copia de seguridad de la plantilla, para poder corregir cualquier error que cometamos sin perder la información que contenía el Blog.

 

Buscamos en la plantilla el </head> y colocamos antes del mismo el siguiente código

 

<script type=’text/javascript’ src=
‘http://www.anniyalogam.com/widgets/hackosphere.js’ />

 

A continuación buscamos:

 

<b:includable id=’post’ var=’post’>
<div class=’post uncustomized-post-template’
<a expr:name=’data:post.id’/>
<b:if cond=’data:post.title’>
<h3 class=’post-title’>
<b:if cond=’data:post.url’>
<a expr:href=’data:post.url’><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>
<div class=’post-header-line-1′/>
<div class=’post-body’>
<p><data:post.body/></p>
<div style=’clear: both;’/> <!– clear for photos floats –>
</div>

 

 

Reemplazamos por:

 

<b:includable id=’post’ var=’post’>
  <div class=’post uncustomized-post-template’ expr:id=’”post-” + data:post.id’>
    <a expr:name=’data:post.id’/>
    <b:if cond=’data:post.title’>
      <h3 class=’post-title’>
      <b:if cond=’data:post.url’>
        <a expr:href=’data:post.url’><data:post.title/></a>
      <b:else/>
        <data:post.title/>
      </b:if>
      </h3>
    </b:if>

   <div class=’post-header-line-1′/>

   <div class=’post-body’>

     <b:if cond=’data:blog.pageType == “item”‘>

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

     <b:else/>
        <style>#fullpost {display:none;}</style>
        <p><data:post.body/></p>
        <span id=’showlink’>
          <p><a href=’javascript:void(0);’ expr:onclick=’”javascript:showFull(\”post-” + data:post.id + “\”);”‘>Continuar Leyendo…</a></p>
        </span>
        <span id=’hidelink’ style=’display:none’>
          <p><a href=’javascript:void(0);’ expr:onclick=’”javascript:hideFull(\”post-” + data:post.id + “\”);”‘>Volver al Resumen…</a></p>
        </span>
        <script type=’text/javascript’>
          checkFull(“post-” + “<data:post.id/>”);
        </script>
     </b:if>

     <div style=’clear: both;’/> <!– clear for photos floats –>
   </div>

 

 

Ahora cada vez que realizemos un post en el que necesitemos utilizar el truco, debemos colocar en HTML <span id=”fullpost”>al finalizar la parte que quieras dejar como resumen .

Luego al finalizar el post por completo colocas </span> 

Dejar un comentario

Aprovechando el espacio

Julio 20, 2008 a 12:54 am (Uncategorized)

Para reducir entradas en el blog tenemos 3 recursos

1. Textarea: Es muy util cuando intentamos poner un texto extenso en el post y queremos ocupar menos espacio.
2. IFrame: Utilidad para colocar un archivo HTML o una dirección Web en una entrada.
3. Overflow: Si tienes que poner una lista de cosas, imagenes, etc. , puedes utilizar esta propiedad.

Los ejemplos se pueden ver aqui

Dejar un comentario

Favicom para el blog

Julio 20, 2008 a 12:47 am (Editar un blog)

En esta direccion explica como hacerlo todo, pero esta el problema de subir el ico.

Tengo pendiente ver como se sube el .ico a una web para poder actualizar el blog.

Se debe hacer con un programa que suba desde tu equipo a tu alojamiento web el fichero.

 

Navegando me he encontrado esto:

Blogger no permite añadir imágenes en formato ico. por lo que debemos convertir la imagen generada a otro formato permitido por ejemplo PNG.
Lo podéis hacer en Convertico y ahora ya si, ya podemos añadir la url de nuestra imagen al código que nos proporcionan para la plantilla.

Dejar un comentario