Blog and Web

Al realizar proyectos web existen muchas propiedades web comunes en las propiedades CSS y este par de esquemas, desarrollados por particletree.com y traducidos por blogyweb, pueden ser muy utiles y ahorrarnos algunas horas durante la maquetación y diseño web.

Esquema básico 1. Contiene las clases básicas de un arreglo CSS sin expandir sus propiedades. Descargar.

Esquema básico 2. Contiene las clases básicas de un arreglo CSS con sus propiedades expandindas a cada clase. Descargar.

Algo que puede ser de utilidad y a veces hasta necesario, es mostrar contenido de acuerdo a cada país y ahora veremos como hacerlo con php.

El código que tenemos que incluir en nuestra página inicial (que variara de acuerdo al país es el siguiente:

<?php

/* Detectamos el país de prosedencia mediante el navegador */

if (isset($pais) && ($pais <> '')) {$dgo_pais = substr($pais,0,5);} else {$dgo_pais = substr($_SERVER["HTTP_ACCEPT_LANGUAGE"],0,5);}switch ($dgo_pais) {

/* A continuación, de acuerdo al código de país en el navegador, definimos la página correspondiente. Puedes definir tantos como necesites o eliminar los que no. */

case "es-mx"://si el pais es mexicoinclude("pagina-mexico.php");break;

case "es-cl"://si el pais es chileinclude("pagina-chile.php");break;

case "es-co"://si el pais es colombiainclude("pagina-colombia.php");break;

case "es-ar"://si el pais es argentinainclude("pagina-argentina.php");break;

default://si es algun otro paisinclude("pagina-general.php");break;}?>

De este modo definimos los paises que necesitemos diferenciar y dejamos una general para el resto de los paises.

Una de las “funcionalidades” de este nuevo Blogger es la inclusión de un cuadro de estado al entrar en cada etiqueta que nos dice en que etiqueta estamos y nos da la opción de ver todas las entradas, pero si tenemos un blog pequeño o mostramos la totalidad de entradas en cada etiqueta, este cuadro se vuelve obsoleto y ahora veremos como ocultarlo.

1. Entra a la pestaña “Plantilla” o también llamada “Diseño” desde el escritorio y después a la opción “Edición de HTML”.



2. Buscamos el siguiente código:

   ]]></b:skin>

   Y justo antes colocamos lo siguiente:

    .status-msg-wrap {display:none;}

   Y con esto queda el atributo de oculto al cuadro de estado.

El nuevo Blogger incorpora tanto en la página principal, etiquetas y entradas idividuales un pie de navegación, es decir, enlaces a “Entrada más reciente”, “Entradas antiguas” y “Página principal” sin formato y sin estilo. En este artículo te mostraremos como personalizarlo.

1. Entra a la pestaña “Plantilla” o también llamada “Diseño” desde el escritorio y después a la opción “Edición de HTML”.



2. Activa la opción “Expandir plantillas de artilugios” y en el campo de texto busca el siguiente código:

   <DIV class='blog-pager' id='blog-pager'>
   <b:if cond='data:newerPageUrl'>
   
   <SPAN id='blog-pager-newer-link'>
   <A class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></A>
   </SPAN>
   </b:if>
   
   <b:if cond='data:olderPageUrl'>
   <SPAN id='blog-pager-older-link'>
   <A class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></A>
   </SPAN>
   </b:if>
   
   <b:if cond='data:blog.homepageUrl != data:blog.url'>
   <A class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></A>
   <b:else/>
   <b:if cond='data:newerPageUrl'>
   <A class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></A>
   </b:if>
   
   </b:if>
   </DIV>

   Este es el código encargado de mostrar los enlaces de navegación. Sí te das cuenta corresponden aca uno de los links:

   <data:newerPageTitle/> - Corresponde al texto “Entrada más reciente”
   <data:olderPageTitle/> - “Entradas antiguas”
   <data:homeMsg/> - “Página principal”

3. Personalización:Cambiar el texto por otro. Para remplazar el texto por otro de nuestro agrado sólo remplazamos la etiqueta correspondiente a cada enlace por nuestro texto, por ejemplo, para el link de entradas recientes sustituimos completamente “<data:newerPageTitle/>” por “Artílos más recientes” directamente.Cambiar texto por imagen. Para sustituir el texto por una imagen podemos seguir metodología anterior y remplazar cada etiqueta por su imagen correspondiente. A continuación te damos un ejemplo creado por Blogyweb y que puedes usar libremente con sólo remplazar el código inicial con este:

   

   <div class='blog-pager' id='blog-pager'>
   <b:if cond='data:newerPageUrl'>
   
   <span id='blog-pager-newer-link'>
   <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'> <img alt='data:newerPageTitle' src='http://bp0.blogger.com/_Zuzii37VUO4/Rf4lJS031KI/AAAAAAAAAfc/JItp8PeZF1U/s1600/botong_atras.gif' /></a>
   </span>
   </b:if>
   
   <b:if cond='data:olderPageUrl'>
   <span id='blog-pager-older-link'>
   <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'> <img alt='data:olderPageTitle' src='http://bp2.blogger.com/_Zuzii37VUO4/Rf4lEy031JI/AAAAAAAAAfU/iu3bL2eUbhM/s1600/botong_adelante.gif'/> </a>
   </span>
   </b:if>
   
   <b:if cond='data:blog.homepageUrl != data:blog.url'>
   <a class='home-link' expr:href='data:blog.homepageUrl'>
   <img alt='data:homeMsg' src='http://bp1.blogger.com/_Zuzii37VUO4/Rf4lMi031LI/AAAAAAAAAfk/m7Qpa985MY0/s1600/botong_home.gif'/> </a>
   <b:else/>
   <b:if cond='data:newerPageUrl'>
   <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
   </b:if>
   
   </b:if>
   </div>

   Dar formato a los links. Si lo único que quieres es darles un mejor formato a estos enlaces modifica los atributos de las siguientes clases:

   #blog-pager-newer-link - Para “Entrada más reciente”
   #blog-pager-older-link - Para “Entradas antiguas”
   #home-link - Para “Página principal”

Blogger coloca por defecto la fecha en todos los mensajes que publicas y es muy pobre el formato en que la encajona, te la muestra en una sola linea y toda la fecha bajo la misma clase CSS. Con este método podrás mostrar la fecha de forma más estética y tendrás mayor control sobre ella.

1. Lo primero que hay que hacer es cambiar el formato de la fecha. Vamos a la pestaña “Opciones” y a la opción “Formato”.



Ahora buscamos el campo “Formato de cabecera de fecha” y ahí seleccionamos el penúltimo formato de fecha, que es continuo y sin comas, algo así como “15 marzo 2007″ y guardamos con el botón de abajo “Guardar Valores”.



2. Una vez aqui, nos vamos a la pestaña “Plantilla” y a la opción “Edición de HTML”.Aqui buscamos la etiqueta </head> y justo antes pegamos el siguiente código:

   <script>
   function remplaza_fecha(d){
   var da = d.split(&#39; &#39;);
   dia = &quot;<strong class='fecha_dia'>&quot;+da[0]+&quot;</strong>&quot;;
   mes = &quot;<strong class='fecha_mes'>&quot;+da[1].slice(0,3)+&quot;</strong>&quot;;
   anio = &quot;<strong class='fecha_anio'>&quot;+da[2]+&quot;</strong>&quot;;
     document.write(dia+mes+anio);
   }
   </script>

   Este es el código que otorga a cada parte de la fecha, día, mes y año, una clase para poder personalizar su estilo.

3. Ahora activa la casilla “Expandir plantillas de artilugios” y en el campo de edición de texto busca el siguiente código:

   <data:post.dateHeader/>

   Busca bien, se encuentra en la mitad baja del código aproximadamente, este podría parecer el paso más ‘tedioso’ pero al final veras que es fácil

4. Ahora que lo encontraste, sustitúyelo con el siguiente código:

<div id='fecha'>
<script>remplaza_fecha('<data:post.dateHeader/>');</script>
</div>

5. Ahora buscamos el código

   ]]></b:skin>

   Y justo arriba de él pegamos los estilos siguientes:

   #fecha {
   display: block;
   margin:0 10px;
   float:left;
   padding: 5px;
   color: #464646;
   background: #e4e3ad;
   border:#d7d675 3px solid;
   text-transform:capitalize;
   }
   
   .fecha_dia {
   display: block;
   font-size: 16px;
   font-weight:bold;
   }
   
   .fecha_mes {
   display: block;
   font-size: 10px;
   }
   
   .fecha_anio {
   display: block;
   font-size: 10px;
   }

   Sí te das cuenta hay un estilo general para la fecha y uno para elemento de esta, tu puedes cambiarle los colores de fondo y de texto modificando estos estilos.

   El resultado final, con estos estilos, es el siguiente:

   

   Basado en el artículo de Lastword y adaptado por Blog&Web.