2WebFacil » codigo fuente http://2webfacil.com Tips, tutoriales, ejemplos y descargas para personalizar tu web Wed, 15 Jun 2011 05:17:22 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Personalizar títulos en Blogger http://2webfacil.com/personalizar-titulos-en-blogger/ http://2webfacil.com/personalizar-titulos-en-blogger/#comments Wed, 29 Jul 2009 03:19:30 +0000 2webfacil http://2webfacil.com/?p=289 El título de una página es muy importante pues indica de manera directa el contenido de nuestro web, además es mostrado por los buscadores en los resultados de las búsquedas por lo cual es necesario tener títulos adecuados en nuestras páginas.

Sintaxis del título en una Página
El titulo en una página se encuentra encerrado entre los tags <title> los cuales se ubican entre los tags…

]]> El título de una página es muy importante pues indica de manera directa el contenido de nuestro web, además es mostrado por los buscadores en los resultados de las búsquedas por lo cual es necesario tener títulos adecuados en nuestras páginas.

Sintaxis del título en una Página
El titulo en una página se encuentra encerrado entre los tags <title> los cuales se ubican entre los tags <head> de nuestro HTML, entonces la sintaxis sería de la forma:

1

<title>Titulo de tu Web</title>

Observaciones
Es recomendable tener títulos diferentes por cada página, de esta manera los buscadores las reconocerán como páginas diferentes. Este es un error común por lo cual los buscadores solo devuelven un resultado para nuestra página obviando loas demás paginas.

Otro punto a tener en cuenta es no dejar paginas con titulo vacío o con los títulos por defecto como “Untitled Page 1″, esta muy improbable que los usuarios nos encuentren mediante los buscadores.

Personalizando los títulos en Blogger
Lo que haremos es cambiar los títulos concatenando el nombre de la página con el titulo del blog para las páginas internas y dejando intacto el titulo de la página principal. Entonces buscamos el titulo por defecto de nuestro blog:

1

<title><data:blog.pageTitle/></title>

Ahora lo reemplazamos por el siguiente código que cambiará los títulos para las páginas internas dejando intacto el titulo de la pagina principal.

1
2
3
4
5

<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/> - <data:blog.title/></title>
</b:if>

Este tip sencillo de implementar hará que todos los posts de nuestro blog sean indexados por los buscadores y por lo tanto obtener mayor cantidad de visitas.

Tags: , , , ,
]]> http://2webfacil.com/personalizar-titulos-en-blogger/feed/ 5 Publicar Código fuente en Blogger http://2webfacil.com/publicar-codigo-fuente-en-blogger/ http://2webfacil.com/publicar-codigo-fuente-en-blogger/#comments Mon, 27 Jul 2009 22:35:33 +0000 2webfacil http://2webfacil.com/?p=269 Para los que deseamos compartir información de como personalizar webs es muy importante publicar código fuente donde se resalten con colores la sintaxis para poder entenderlo rápidamente. Veamos como publicar código fuente en Blogger.

SyntaxHighlighter 2.0
SyntaxHighlighter es un script creado por Alex Gorbatchev para resaltar código fuente en páginas HTML hecho completamente en Javascript por lo cual la solución ideal para integrarlo…

]]> Para los que deseamos compartir información de como personalizar webs es muy importante publicar código fuente donde se resalten con colores la sintaxis para poder entenderlo rápidamente. Veamos como publicar código fuente en Blogger.

codigo-fuente-blogger

SyntaxHighlighter 2.0
SyntaxHighlighter es un script creado por Alex Gorbatchev para resaltar código fuente en páginas HTML hecho completamente en Javascript por lo cual la solución ideal para integrarlo con Blogger.

Instalando SyntaxHighlighter
Normalmente se debe alojar este script en nuestros servidores, pero como Blogger no permite subir archivos .js, utilizaremos la versión hosteada que nos brinda SyntaxHighlighter. Entonces lo primero es incluir la librería en nuestro template, para ello editamos nuestro template y colocamos el siguiente código justo antes de la etiqueta <head>.

<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="'text/javascript'"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js" type="'text/javascript'"></script>
<script type="'text/javascript'"></script>

Donde las dos primeras líneas incluyen las estilos y las dos siguientes los scripts para interpretar el código fuente. En mi caso he incluido la librería shBrushXml.js pues yo deseo publicar solo HTML. Pueden agregar otros lenguajes con solo agregar mas scripts, para una lista detallada de los scripts que puedes incluir pueden leer SyntaxHighlighter/Brushes.

Publicando Código Fuente
Ahora que ya tenemos instalado nuesro script, el siguiente paso es publicar código fuente, para ello debemos colocar el código que deseamos publicar entre los tags <pre> pero además debemos indicar que tipo de código estamos mostrando esto lo hacemos de la forma:

<pre class="brush: xml">
// codigo fuente
< /pre>

Nuevamente en mi caso utilizo XML para indicar que deseo publicar HTML. Entonces si por ejemplo deseamos publicar parte de un formulario en html, podriamos hacerlo de la siguiente forma:

<pre class="brush: xml"><form method="post">
   Nombre: <input id="nombre" name="nombre" type="text" />
   Email: <input id="email" name="email" type="text" />
   <input name="btsend" type="submit" value="Enviar" />
</form>
< /pre>

NOTA
Hay que tener en cuenta que para evitar errores de HTML al momento de publicar el código fuente debemos cambiar los caracteres < y > por sus equivalentes en HTML:

  • < por su equivalente &lt;
  • > por su equivalente &gt;

Además de ello pueden ver el ejemplo funcionando en nuestro blog de prueba en Blogger: http://2webfacil.blogspot.com/2009/07/codigo-fuente-en-blogger.html

Tags: , , , , ,
]]> http://2webfacil.com/publicar-codigo-fuente-en-blogger/feed/ 7