[+/-] Entradas expandibles en Blogger

Un efecto bastante vistoso, pues puedes hacer que las entradas se muestren expandidas o contraídas, para ahorrar espacio o simplemente por estética o por simple decoración. Puedes configurarlo para que sean por defecto o solo en las paginas de etiquetas y búsquedas.

/!\ Actualizacion 21/01/10: Se actualizo en el paso 3, la solución al problema de las páginas individuales de Blogger

Leer la entrada completa

[+/-] Entradas relacionadas en Blogger

Las entradas relacionadas son bastante interesantes, pues explicaré como funciona. Según las etiquetas que coloques en cualquier post, el script revisará el feed de cada etiqueta y colocará una entrada por etiqueta en las entradas relacionadas, sin repetición de alguna.

Para conseguir el script, necesitas descargarte el archivo zip, que contiene el archivo Related.js. Y despues subirlo al host que quieras.

O simlemente puedes copiar la suguiente URL, pero estarás limitado a usarlo hasta que el autor lo borre:

http://ihgvgw.blu.livefilestore.com/y1pKG7FqNxUVmDTinnwGXOX3AIDx5f6vr13sp5Z0koXvbews0HfnTTXUxRZ-dc_ETvGH68SLPsnXP36ENA1D64J_g/related.js

[1] Despues debes ir a Diseño>Edicion HTML>Expandir plantillas de artilugios, donde hay que colocar la siguiente etiqueta antes de </head>:

<script type='text/javascript' src='URL'></script>

Donde:

URL es la URL del archivo Related.js

[2] Ahora tienes que localizar la parte que muestra las etiquetas de cada entrada, es decir despues de esta etiqueta:

<span class='post-labels'>

Lo que verás será algo parecido a esto:

<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop>
</b:if>
</span>
</div>

[3] Justo ahi deverás agregar lo que esta en rojo:

<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name +       &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10&quot;' type='text/javascript'></script>
</b:if>
</b:loop>
</b:if>
</span>
</div>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-post'>
<p style='text-align:center;'>Entradas Relacionadas:</p>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>
</b:if>

[4] Cabe rescatar que, la siguientes lineas son para mostrar las entradas relacionadas y puedes colocarlas donde te parezca:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-post'>
<p style='text-align:center;'>Entradas Relacionadas:</p>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>
</b:if>

[5] Para modificar el estilo, puedes auxiliarte del id del contenedor que es related-post:

/*        Entradas relacionadas       */
#related-post {

/*estilo*/

}

/!\ En esta entrada se asume que tienes conocimientos de como editar la plantilla. Si no sabes como o donde se modifica, revisa esta entrada: Donde editar el código HTML de nuestra plantilla.

[+/-] Aumentar y reducir el tamaño del texto de las entradas

Aumentar y reducir el tamaño de la fuente en las entradas, se puede realizar de mas de una manera. Existen varios métodos para lograrlo, aquí les explico el que yo utilizo.

[1] Debes ir a Diseño>Edicion HTML>Expandir plantillas de artilugios, donde tienes que agregarlo antes de la etiqueta </head>:

<!-- Start Text-Sizer -->
<script type='text/javascript'>//<![CDATA[
function ChangeSize(number,number) { if (document.all) { element = document.all['entrada'];} else { element = document.getElementById('entrada'); } var startSize = 12; var rateSize = 3;var numRate = 5; var startSizeLine = 14;var rateSizeLine = 3;var numRateLine = 5; var strActual = element.style.fontSize; var strLineActual = element.style.lineHeight; var intActual = parseInt(strActual.substring(0, strActual.indexOf("px"))); var intLineActual = parseInt(strLineActual.substring(0, strLineActual.indexOf("px"))); intActual += number; intLineActual += number; if (intActual < (startSize + ( (numRate + 1) * rateSize) ) && intActual > startSize-1){ element.style.fontSize = intActual + "px"; } if (intLineActual < (startSizeLine + ( (numRateLine + 1) * rateSizeLine) ) && intLineActual > startSizeLine-1){ element.style.lineHeight = intLineActual + "px"; } } function normalSize(){var strActual = element.style.fontSize;var strLineActual = element.style.lineHeight;var intActual = 12;var intLineActual = 14; element.style.fontSize = intActual + "px"; element.style.lineHeight = intLineActual + "px";}//]]></script>
<!-- End Text-Sizer -->

[2] Ahora tienes que ir a Diseño>Edicion HTML>Expandir Plantillas de Artilugios y encontrar el siguiente código:

<div class='post-body entry-content'>

Y cambiarla por la siguiente:

<div class='post-body entry-content' id='entrada' style='font-size:12px;line-height:14px'>

[3] Despues puedes agregar el siguiente código en un gadget HTML, o en la plantilla misma:

<p id='control_txtszr' style="font-family:verdana">
 <a href='#' onclick='javascript:ChangeSize(1,1);return false'>
   <span style='font-size:20px'>+A|</span>
 </a>
 <a href='#' onclick='javascript:normalSize();return false'>
   <span style='font-size:13px'>A|</span>
 </a>
 <a href='#' onclick='javascript:ChangeSize(-1,-1);return false'>
   <span style='font-size:11px'>A-</span>
 </a>
</p>

[4] Por ultimo, puedes modificar el estilo con las siguientes instrucciones CSS:

#control_txtszr {
color:{color del texto}
font:{tipo de fuente}
position:{absolute o relative}
top:{pixeles de espacio hacia arriba}
left:{pixeles de espacio hacia la izquierda}
right:{pixeles de espacio hacia derecha}
bottom:{pixeles de espacio hacia abajo}
}

/!\ En esta entrada se asume que tienes conocimientos básicos de colores en RGB o Hexadecimal. Si no los tienes aún, revisa esta entrada: Colores en RGB o Hexadecimal.

/!\ En esta entrada se asume que tienes conocimientos de como agregar un gadget. Si no sabes como agregar un gadget, revisa esta entrada: como insertar o crear/eliminar o mover un gadget.

/!\ En esta entrada se asume que tienes conocimientos de como editar la plantilla. Si no sabes como o donde se modifica, revisa esta entrada: Donde editar el código HTML de nuestra plantilla.

[+/-] Propiedades del Fondo (Background) en CSS

El código en CSS(Hoja de estilos en cascada), es bastante interesante, los bordes en CSS son bastantes sencillos de manipular y además le dan un aspecto mas personalizado al web/blog.

Existen varias opciones para colocar un fondo en alguna página en específico, la primera es en la que se introducen todos los datos en una misma linea:

En CSS:

background:{imagen}{repeticion}{posicion}{fijacion}{color};

En JavaScript:

background="{imagen}{repeticion}{posicion}{fijacion}{color}";

Un ejemplo:

background:url(http://www.blogger.com/img/icon_logo32.gif) no-repeat top left fixed blue;

La segunda es colocar de manera separada las propiedades del fondo:
En CSS:

background-color: {color};
background-image: {imagen};
background-repeat: {repeticion};
background-attachment: {fijacion};
background-position: {posicion};

En JavaScript:

backgroundColor="{color}";
backgroundImage="{imagen}";
backgroundRepeat="{repeticion}";
backgroundAttachment="{fijacion}";
backgroundPosition="{posicion}";

La propiedad:
Imagen, esta será la imagen que cubrirá parte o el total del objeto especificado. Se puede definir de la siguiente manera:

url( URL DE LA IMAGEN )

Un ejemplo:

url(http://www.blogger.com/img/icon_logo32.gif)

Posicion, básicamente esta propiedad es una propiedad de la propiedad imagen, es decir, no sirve de nada si no se ha especificado una imagen de fondo al objeto. Tiene seis opciones que se pueden combinar entre sí, las cuales son:

Alineacion Horizontal:
left (izquierda)
right (derecha)
center (centro)

Alineacion Vertical:
top (arriba)
bottom (abajo)
center (centro)

Pero cabe rescatar que la primer palabra debe ser la especificación de la posición vertical y la segunda debe ser la horizontal:

top right

Repeticion, esta propiedad tambien es una propiedad de la propiedad imagen, así que no servirá de nada que la coloques si no has especificado alguna imagen de fondo, esta propiedad tiene tres opciones:

repeat-y (Repetir verticalmente)
repeat-x (Repetir horizontalmente)
no-repeat (No repetir)

Un ejemplo:

repeat-x

Fijacion, esta propiedad es la ultima de las propiedades de la propiedad imagen y no sirve sin especificar alguna imagen de fondo antes, esta propiedad tiene solo dos opciones:

scroll (desplazamiento).-La imagen de fondo se mueve cuando el resto de la barra de desplazamiento se desplaza
fixed (fijada).-La imagen de fondo no se mueve cuando la barra de desplazamiento se desplaza

Un ejemplo:

fixed

Color, se define como el color que cubrirá el fondo total de algún objeto y si existe una imagen de fondo este color estará por debajo de la imagen. Los colores se pueden definir en Ingles, Hexadecimal o en RGB.
Un ejemplo:

#CEFF99

Linea 0

Linea 1

Linea 2

Linea 3

Linea 4

Linea 5

Linea 6

Linea 7

Linea 8

Linea 9

Linea 10

Linea 11

Linea 12

---

Repeat

---

Position

---

Color

---

Attachment

[+/-] Mostrar entradas recientes de cualquier blog

Puedes utilizar trucos como: mostrar comentarios recientes, entradas relacionadas y este. Para conseguir una mejor eficacia en cuanto a lo que buscan los lectores o lo que les interesa, ya que si solo colocas las puras entradas en la portada solo verán esas entradas, pero ¿...y las demás?

Es por eso que siempre se debe colocar algo de "Auto-publicidad" hacia tus otras entradas ya sea con los hacks anteriores o con el mismo Archivo del blog. Este hack mostrará las entradas recientes de cualquier blog y en cualquier blog (de blogger).

[1] Primero tienes que descargarte el siguiente archivo y alojar el archivo que contiene(entr_rec.js) en internet, ya sea en SkyDrive, Geocities o en el host que quieras:

Descargar

/!\ En esta entrada se asume que tienes conocimientos de como editar la plantilla. Si no sabes como o donde se modifica, revisa esta entrada: Donde editar el código HTML de nuestra plantilla.

[2] Despues hay que indexarlo al blog. Entra en Diseño>Edicion HTML>Expandir las plantillas de artilugios y coloca la siguiente linea antes de la etiqueta </head>:

<script src='URL DEL ARCHIVO' type='text/javascript'></script>

Donde el texto color:
Rojo: Es la url del archivo anterior (esta la proporciona el host).

[3] Despues hay que aplicarlo. Coloca el siguiente código justo despues de cualquier etiqueta </b:widget>:

<b:widget id='HTML101' locked='false' title='Entradas recientes' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
<ul><div id='dataPost'/></ul>
</div>

<script type='text/javascript'>
var uP = {
nPost : 10
};

var cP = {
// private variable to store the total results
totCount : 0,
// the number of elements for each json call
increment : 10,
// this is the place to define the blog name for subsequent retrieval data
web : &quot;santyweb.blogspot.com&quot;,

listPosts: function(json, tag) {

var text=&quot;&quot;;

for (var i = 0; i &lt; json.feed.entry.length; i++) {
var entry = json.feed.entry[i];

text += &quot;<li>&quot; + &quot;&lt;a href=&#39;&quot; + cb.getLink(entry, &quot;alternate&quot;)
+ &quot;&#39;&gt;&quot; + cb.getTitle(entry) + &quot;</li>&quot;;
}
var p = document.createElement(&#39;span&#39;);
document.getElementById(tag).appendChild(p);
p.innerHTML = text;
},

callPostJson: function(json) {
this.listPosts(json, &quot;dataPost&quot;);
},

getCo : function(json) {
this.totCount = cb.getTotalResults(json);
var count = (uP.nPost &lt; 0) ? this.totCount : uP.nPost;
var i=1;
while(i&lt;=count) {
var incr = (count-i &lt; this.increment) ? count-i+1 : this.increment;
cb.search( cP.web, &quot;posts&quot;, i, incr, &#39;cP.callPostJson&#39;);
if (incr==0) incr=incr+1;
i = i+incr;
}
}
};

cb.search( cP.web, &quot;posts&quot;, 1, 2, &#39;cP.getCo&#39;);

</script>
</b:includable>
</b:widget>

Donde el texto color:
Rojo: Es el numero de entradas que se mostrarán en el gadget.
Amarillo: Es la url del blog del que quieres mostrar las ultimas entradas.

[4] Por ultimo puedes moverlo a donde quieras en la pestaña Diseño de tu blog.

[+/-] Recuperar links de "Mas entradas","Entradas antiguas" y "Pagina principal"

En varias plantillas que son acopladas a Blogger, los links de navegación se pierden en el proceso, o simplemente los autores no los agregan por cualquiera que sea la razón.

/!\ En esta entrada se asume que tienes conocimientos de como editar la plantilla. Si no sabes como o donde se modifica, revisa esta entrada: Donde editar el código HTML de nuestra plantilla.

En esta ocasión explicaré como es que deben de agregarse de nuevo los links de navegación:

[1] Tienes que ir a Diseño>Edición de HTML>Expandir plantillas de artilugios y localizar la siguiente linea:

<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'>

[2] Y colocar justo después de esa linea:

<b:includable id='nextprev'>
  <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 + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'>Entradas mas recientes.</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 + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'>Más entradas</a>
      </span>
    </b:if>

    <b:if cond='data:blog.homepageUrl != data:blog.url'>
      <a class='home-link' expr:href='data:blog.homepageUrl'>Inicio</a>
      <b:else/>
      <b:if cond='data:newerPageUrl'>
        <a class='home-link' expr:href='data:blog.homepageUrl'>Inicio</a>
      </b:if>
    </b:if>

  </div>
  <div class='clear'/>
</b:includable>

[3] Y por ultimo necesitarás colocar el texto en rojo:

      <b:include data='post' name='post'/>
      </b:if>
      <b:if cond='data:blog.pageType == &quot;item&quot;'>
        <b:include data='post' name='comments'/>
      </b:if>
      <b:if cond='data:post.includeAd'>
        <data:adEnd/>
        <data:adCode/>
        <data:adStart/>
      </b:if>
    </b:loop>
    <data:adEnd/>
  </div>

  <!-- navigation -->
  <b:include name='nextprev'/>

[+/-] Mostrar los comentarios mas recientes

Pues retomando el tema de los comentarios, no se si has notado el gadget de comentarios que tengo en el blog. Pues es muy fácil de insertar en el y además también puedes agregarle estilo a cualquier parte del comentario.

/!\ En esta entrada se asume que tienes conocimientos de como editar la plantilla. Si no sabes como o donde se modifica, revisa esta entrada: Donde editar el código HTML de nuestra plantilla.

Antes que nada tienes que alojar donde prefieras el archivo rec_comm.js, que esta dentro de el archivo zip.

[1] Para colocarlo en tu blog necesitas ir a Diseño> Edición HTML>Sin expandir plantillas de artilugios y después colocar el siguiente código antes de </head>:

<script src="rec_comm.js" type='text/javascript'></script>

Donde el texto color:
Rojo: es la URL del archivo rec_comm.js

/!\ En esta entrada se asume que tienes conocimientos de como agregar un gadget. Si no sabes como agregar un gadget, revisa esta entrada: como insertar o crear/eliminar o mover un gadget.

[2] Después tienes que agregar un gadget HTML con el siguiente contenido:

<script type="text/javascript">
//Numero de comentarios a mostrar
var numcomments = 10;
//Mostrar fecha del comentario
var showcommentdate = false;
//Mostrar el titulo de la entrada
var showposttitle = false;
//Numero de letras o caracteres a mostrar
var numchars = 50;
//Mostrar con estilo por defecto
var standardstyling = false;
//Mostrar el autor con link
var link_1 = false;
//Texto que va despues del autor
var msg_1 = 'comenta';
//Texto que va antes del titulo de la entrada
var msg_2 = 'sobre';
//Mostrar el comentario con link (eliminar el "Leer mas" si es false)
var link_2 = false;
var msg_3 = '(leer mas)';
</script>
<script src="http://TUBLOG.blogspot.com/feeds/comments/default?alt=json-in-script&
callback=showrecentcomments"></script>

Donde el texto color:
Rojo: es el nombre de tu blog

Si no quedo muy claro como se tiene que utilizar aquí va la explicación:

//Numero de comentarios a mostrar
var numcomments = 10;
El número que coloques es el mismo número de comentarios que mostrará el gadget.

//Mostrar fecha del comentario
var showcommentdate = false;
Las opciones pueden ser:
false: El gadget no mostrará la fecha en que se publicó el comentario
true: El gadget si mostrará la fecha en que se publicó el comentario

//Mostrar el titulo de la entrada
var showposttitle = false;
Al igual que en la opción anterior:
false: El gadget no mostrará el titulo de la entrada donde se publicó el comentario.
true: El gadget si mostrará el titulo de la entrada donde se publicó el comentario.

//Texto que va antes del titulo de la entrada
var msg_2 = 'sobre';
Si se esta mostrando el titulo de la entrada este mensaje se verá antes del titulo.

//Numero de letras o caracteres a mostrar
var numchars = 50;
El número que coloques es el mismo número de letras o cualquier caracter que mostrará el gadget de cada comentario. Excepto cuando el comentario tiene menos letras que las especificadas.

//Mostrar con estilo por defecto
var standardstyling = false;
Para esta opción existen solo dos opciones:
false: El gadget muestra los comentarios sin el estilo por defecto, es decir, puedes modificar el estilo como quieras (Paso 3).
true: El gadget muestra los comentarios con un estilo por defecto

//Mostrar el autor con link
var link_1 = false;
true: Si el autor del comentario dejó una URL esta será mostrada junto con el comentario.
false: Si el autor dejo o no dejó una URL esta no será mostrada junto con el comentario.

//Texto que va después del autor
var msg_1 = 'comenta';
Este será el texto que estará después del autor, de la fecha o después del titulo de la entrada según sea el caso.

//Mostrar el comentario con link (eliminar el "Leer mas" si es false)
var link_2 = false;
false: El link de Leer Mas o el que tengas, por defecto, no se mostrará y el link estará en el comentario.
true: El link de Leer Mas o el que tengas, por defecto, si se mostrará

var msg_3 = '(leer mas)';
Este será el texto del link que estará después del comentario. Eso si la opcion anterior esta en True

[3] Para modificar el estilo de los comentarios (en caso de que no se este mostrando el estilo por defecto) necesitarás colocar el siguiente código antes de ]]></b:skin>:

/* Estilo de: fecha, msg_1, msg_2 (y tambien del autor y post, si no son links)*/
.bbrecpost { 
  color:white !important
}

/* Estilo del links(si estan activados): autor y post */
.bbrecpost a { 
  text-decoration:underline !important;
  color:#FFFFDD !important
}

/* Estilo del texto comentario */
.bbrecpostsum { 
  color:white !important;
  font-weight:bold !important;
}

/* Estilo de msg_3 */
.bbrecpostsum a { 
  text-decoration:none !important;
  color:white !important
}

/* Estilo del Contenedor de cada comentario */
.bbrecontenedor {
  border-bottom:1px dotted #DBD17E;
  font-family:arial;
  font-size:11px;
}

[+/-] Ampliar imágenes con mouse y CSS

Ya habíamos explicado un código para ampliar imágenes con el mouse y Javascript y gracias a el comentario de Italo Disco Style, que preguntaba si se podía traducir a ese código Javascript a CSS. Lo cual dio resultado a lo siguiente.

El inconveniente aqui es que no usaremos javascript, por lo que necesitaremos definir cada uno de los ID de cada imagen.

El código CSS es el siguiente:

#img {
  width:300px; /* Este es el ancho de la imagen pequeña */
  height:400px; /* Este es el alto de la imagen pequeña */
  background: url(URL DE LA IMAGEN REDUCIDA) no-repeat top left;
  border:none;
}

#img:hover {
  width:410px; /* Este es el ancho de la imagen grande */
  height:546px; /* Este es el alto de la imagen grande */
  background: url(URL DE LA IMAGEN GRANDE) no-repeat top left;
}

El código HTML es el siguiente:

<img id='img'/>

Lo que cabe rescatar es que para cada imagen en la que utilices este efecto deverás colocarle un id='img1',id='img2', es decir que incremente cada imagen y lo mismo con el CSS, #img1, #img2.