¿Cuántas entradas tiene tu blog?

Este truco consiste en un gadget que mediante un script, puede mostrarte la cantidad de entradas publicadas en tu blog.
Es una pequeña función que a pesar de que es lo único que muestra, se actualiza sólo. Es decir, una vez que publiquemos más entradas no hay que modificar nada.

Cantidad de entradas en gadget

Vamos a Blogger → Diseño → Elementos de la página → Añadir un gadget → Seleccionamos el tipo de gadget HTML/Javascript y pegamos el siguiente código:

Este blog tiene <script style="text/javascript">
function showpostcount(json) {
document.write(parseInt(json.feed.openSearch$totalResults.$t,10));
}</script>
<script src=http://tublog.blogspot.com/feeds/posts/default?alt=json-in-script&callback=showpostcount>
</script> entradas

Lo que hay que modificar es lo que está escrito en verde, allí tenes que asignar tu dominio blogspot; y lo que está escrito en rojo, allí tenes la opción de elegir si querés borrar o no el mensaje para que aparezca el número en una frase.
Por ejemplo "Este blog tiene ..... entradas"

Imagen flotante solo en una entrada particular

Para que se entienda mejor esto, paso a explicar. El "truco" consiste en hacer que una imagen (cualquiera) flote en la parte inferior, es decir, que esta imagen esté siempre presente en la entrada en la que vamos a insertar esta imagen.
Podemos ver el ejemplo en esta entrada en particular, donde la imagen que aparece abajo es sólo por esta entrada. Cuando entremos a otra entrada o página, la imagen desaparecerá.

Una imagen flotante en post

1) Vamos a Blogger.
2) Clickeamos en el botón Entrada Nueva [Para la anterior interfaz ir a Creación de entradas → Nueva entrada].
3) Vamos a pegar el siguiente código:

<img style="position: fixed; bottom: -1pt; right: 0pt;" src="URL de la imagen" />

En lo escrito en turquesa vamos a cambiar el right por left si queremos que la imagen flote en la izquierda. Esta opción es por supuesto opcional.
En lo escrito en verde, insertaremos la URL de la imagen.

Marquesinas al estilo Teoría Blogger

Estilo T.B.

<p style="border: 1px solid black; padding: 10px; background: none repeat scroll 0% 0% rgb(32, 134, 202); color: white; font-family: arial,helvetica; font-size: 14px; font-weight: bold;" title="teoriablogger.blogspot.com"><marquee scrolldelay="30" scrollamount="4" onmouseover="this.stop();" onmouseout="this.start();">Estilo T.B.</marquee></p>

Blanco y negro

<p style="border: 1px solid black; padding: 10px; background: none repeat scroll 0% 0% white; color: black; font-family: arial,helvetica; font-size: 14px; font-weight: bold;" title="teoriablogger.blogspot.com"><marquee scrolldelay="30" scrollamount="3" truespeed="1">Blanco y negro</marquee></p>

Negro y blanco

<p style="border: 1px solid black; padding: 10px; background: none repeat scroll 0% 0% black; color: white; font-family: arial,helvetica; font-size: 14px; font-weight: bold;" title="teoriablogger.blogspot.com"><marquee scrolldelay="30" scrollamount="4" onmouseover="this.stop();" onmouseout="this.start();">Negro y blanco</marquee></p>

Azul

<p style="border: 1px solid black; padding: 10px; background: none repeat scroll 0% 0% blue; color: white; font-family: arial,helvetica; font-size: 14px; font-weight: bold;" title="teoriablogger.blogspot.com"><marquee scrolldelay="30" scrollamount="4" onmouseover="this.stop();" onmouseout="this.start();">Azul</marquee></p>

Rojo

<p style="border: 1px solid black; padding: 10px; background: none repeat scroll 0% 0% red; color: white; font-family: arial,helvetica; font-size: 14px; font-weight: bold;" title="teoriablogger.blogspot.com"><marquee scrolldelay="30" scrollamount="4" onmouseover="this.stop();" onmouseout="this.start();">Rojo</marquee></p>

Verde

<p style="border: 1px solid black; padding: 10px; background:green; color: white; font-family: arial,helvetica; font-size: 14px; font-weight: bold;" title="teoriablogger.blogspot.com"><marquee scrolldelay="30" scrollamount="4" onmouseover="this.stop();" onmouseout="this.start();">Verde</marquee></p>

Naranja

<p style="border: 1px solid black; padding: 10px; background: none repeat scroll 0% 0% orange; color: white; font-family: arial,helvetica; font-size: 14px; font-weight: bold;" title="teoriablogger.blogspot.com"><marquee scrolldelay="30" scrollamount="4" onmouseover="this.stop();" onmouseout="this.start();">Naranja</marquee></p>

Amarillo

<p style="border: 1px solid black; padding: 10px; background: none repeat scroll 0% 0% yellow; color: black; font-family: arial,helvetica; font-size: 14px; font-weight: bold;" title="teoriablogger.blogspot.com"><marquee scrolldelay="30" scrollamount="4" onmouseover="this.stop();" onmouseout="this.start();">Amarillo</marquee></p>

Violeta

<p style="border: 1px solid black; padding: 10px; background: none repeat scroll 0% 0% blue; color: white; font-family: arial,helvetica; font-size: 14px; font-weight: bold;" title="teoriablogger.blogspot.com"><marquee scrolldelay="30" scrollamount="4" onmouseover="this.stop();" onmouseout="this.start();">Violeta</marquee></p>

Fuccia

<p style="border: 1px solid black; padding: 10px; background: none repeat scroll 0% 0% Fuchsia; color: white; font-family: arial,helvetica; font-size: 14px; font-weight: bold;" title="teoriablogger.blogspot.com"><marquee scrolldelay="30" scrollamount="4" onmouseover="this.stop();" onmouseout="this.start();">Fuccia</marquee></p>

Dorado

<p style="border: 1px solid black; padding: 10px; background: none repeat scroll 0% 0% Gold; color: white; font-family: arial,helvetica; font-size: 14px; font-weight: bold;" title="teoriablogger.blogspot.com"><marquee scrolldelay="30" scrollamount="4" onmouseover="this.stop();" onmouseout="this.start();">Dorado</marquee></p>

Marrón

<p style="border: 1px solid black; padding: 10px; background: none repeat scroll 0% 0% Brown; color: white; font-family: arial,helvetica; font-size: 14px; font-weight: bold;" title="teoriablogger.blogspot.com"><marquee scrolldelay="30" scrollamount="4" onmouseover="this.stop();" onmouseout="this.start();">Marrón</marquee></p>

Morado

<p style="border: 1px solid black; padding: 10px; background: none repeat scroll 0% 0% Purple; color: white; font-family: arial,helvetica; font-size: 14px; font-weight: bold;" title="teoriablogger.blogspot.com"><marquee scrolldelay="30" scrollamount="4" onmouseover="this.stop();" onmouseout="this.start();">Morado</marquee></p>

Plateado

<p style="border: 1px solid black; padding: 10px; background: none repeat scroll 0% 0% silver; color: white; font-family: arial,helvetica; font-size: 14px; font-weight: bold;" title="teoriablogger.blogspot.com"><marquee scrolldelay="30" scrollamount="4" onmouseover="this.stop();" onmouseout="this.start();">Plateado</marquee></p>

---

Agregar una caja marquesina en mi blog

Para hacerlo, simplemente debes copiar el objeto deseado y puedes pegarlo en:

• Una entrada: Blogger → Creación de entradas → Nueva entrada → Solapa Edición de HTML.
• Un gadget: Blogger → Diseño → Elementos de la página → Añadir un gadget → HTML/Javascript.
  

Personalizar tu caja

Para crear tu propia caja con los colores que quieras, cambia los códigos marcados en colores:

<p style="border: 1px solid black; padding: 10px; background: none repeat scroll 0% 0% rgb(32, 134, 202); color: rgb(255, 255, 255); font-family: arial,helvetica; font-size: 14px; font-weight: bold;"><marquee scrolldelay="30" scrollamount="3" onmouseover="this.stop();" onmouseout="this.start();">Texto phttp://www.blogger.com/img/blank.gifara exponer</marquee></p>

Modifica el código en color rojo para asignar el color del fondo.
Modifica el código en color verde para asignar el color de la letra
Modifica el texto en color azul para asignar un texto que quieras que sea expuesto.

Video explicativo

Ver video en Teoría Blogger videos | Ir a Teoría Blogger videos

Entrada borrador, publicada ¿Programada?

Muchos bloggers no saben cómo hacer para cambiar el orden de la lista de entradas que ofrece el mismo Blogger. Sin embargo, no sólo existe esta función para cambiar el orden de las entradas, sino que también para programar una.

¿Qué significa programar una entrada en Blogger?

Una entrada programada crear una entrada normalmente, terminarla y ponerle fecha y hora de publicación, por ejemplo:
Son las 13:20hs del día 15 de octubre y terminé de escribir una entrada, pero la programo para que se publique automáticamente el 21 de octubre a las 15:20hs.

Programar entradas

Primero hay que crear la entrada y terminarla en Blogger → Botón Crear nueva entrada.
Ahora hacemos click en el enlace spoiler Opciones de entrada que se encuentra debajo del editor de textos:

Allí cambiamos el día actual por una fecha futura, por el día que quieres que se publique automáticamente. También puedes cambiar la hora a publicar. Cuando tengas determinado ambos campos, haz click en Publicar Ahora nos dirigimos a la lista de entradas, haciendo click en el título de tu blog.
Veremos que tendremos el post que acabamos de programar en la lista entradas como una entrada programada:

Asignar tooltips para enlaces con efectos

Antes de ver este post te recomiendo ver este que se relaciona: Atributo title

Con este truco te vamos a enseñar a crear un tooltip con códigos jquery y al pasar por un enlace o texto, el tooltip se mostrará con un efecto y persiguiendo al cursor, como podemos ver en el laboratorio de T.B..

Tooltip Jquery en tu blog

Vamos a Blogger → Diseño → Edición de HTML y bucamos el siguiente código: ]]></b:skin> y arriba pegamos el siguiente código arriba:

#easyTooltip{
padding:4px 9px;
border:2px solid #2086CA;
background:#fff;
color:#2086CA;
font-family:arial;
}

Ahora vamos a pegar el siguiente código abajo del mismo (]]></b:skin>):

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<!-- Comienzo de código Tooltip -->
<script type='text/javascript'>
$(document).ready(function(){
$(&quot;a.tooltip&quot;).easyTooltip();
});
</script>
<script type='text/javascript'>
//<![CDATA[
(function($){$.fn.easyTooltip=function(options){
var defaults={xOffset:20,yOffset:30,tooltipId:"easyTooltip",clickRemove:false,content:"",useElement:""};
var options=$.extend(defaults,options);
var content;
this.each(function(){
var title=$(this)
.attr("title");
$(this)
.hover(function(e){content=(options.content!="")?options
.content:title;
content=(options.useElement!="")?$("#"+options.useElement)
.html():content;$(this)
.attr("title","");
if(content!=""&&content!=undefined){$("body")
.append("<div id='"+options.tooltipId+"'>"+content+"</div>");
$("#"+options.tooltipId)
.css("position","absolute")
.css("top",(e.pageY-options.yOffset)+"px")
.css("left",(e.pageX+options.xOffset)+"px")
.css("display","none")
.fadeIn("fast")}},function(){$("#"+options.tooltipId)
.remove();$(this)
.attr("title",title)});$(this)
.mousemove(function(e){$("#"+options.tooltipId)
.css("top",(e.pageY-options.yOffset)+"px")
.css("left",(e.pageX+options.xOffset)+"px")});
if(options.clickRemove){$(this)
.mousedown(function(e){$("#"+options.tooltipId)
.remove();$(this)
.attr("title",title)
})}})}})(jQuery);
//]]>
</script>
<!-- fin de código de Tooltip -->

Y ahora vamos a aprender cómo hacer un tooltip en un enlace, cada vez que queramos publicar uno. Siempre que quieras publicar un tooltip, debes agregarle a la etiqueta <a> el atributo title y el contenido adentro: title="Contenido del tooltip" y ademas debes agregar el atributo class con el contenido tooltip dentro: class="Tooltip".
El enlace con tooltip se puede añadir en cualquier parte del blog (ya sea en una entrada, gadget o texto en la plantilla).

Código completo

<a href="http://teoriablogger.blogspot.com" id="tooltip" title="Obtiene ayuda para tu blog">Teoría Blogger</a>

Agrandar o achicar textos en blog

Seguramente este truco ya lo haz visto, no sólo en algunos blogs, sino también en algunos periódicos virtuales.
Se trata de dos enlaces (en este caso botones) que hacen que las letras del blog completo se achiquen o agranden, según los que indique el botón, para gente con alguna discapacidad visual. Además incluye un botón que hace que las letras vuelvan al tamaño original.

El ejemplo del truco, puedes encontrarlo en el Laboratorio de T.B (2)

Poner botones para agrandar o achicar letra en el blog

Hay un detalle que no mencioné, y es que este truco posee efectos de jquery.
Para instalar el Script del truco debemos ir a Blogger → Diseño → Edición de HTML → Buscamos la etiqueta </head> presionando ctrl+f → Cuando hayamos encontrado la etiqueta </head>, pegamos el siguiente código arriba de la etiqueta:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

<!-- más trucos jquery en teoriablogger.blogspot.com -->
<script type='text/javascript'>
$(function(){$(&#39;input&#39;).click(function(){
var ourText = $(&#39;#content-wrapper&#39;);
var currFontSize = ourText.css(&#39;fontSize&#39;);
var finalNum = parseFloat(currFontSize, 10);
var stringEnding = currFontSize.slice(-2);
if(this.id == &#39;a&#39;) {finalNum *= 1.1;}
else if (this.id == &#39;achicar&#39;){finalNum /=1.1;}
else if (this.id == &#39;reiniciar&#39;){finalNum =13;}
ourText.animate({fontSize: finalNum + stringEnding},500);});});
</script>

Si ya haz utilizado un código Jquery antes, no agregues el código que está escrito en rojo.
El próximo paso es agregar los botones al blog, a los botones los vamos a alojar en un gadget. Vamos a Blogger → Diseño → Elementos de la página → Elegimos la opción HTML/Javascript y pegamos los códgios siguientes:

<div id='resizefont'>
<input id="agrandar" title="teoriablogger.blogspot.com" type="button" value="A+" />
<input id="reiniciar" title="teoriablogger.blogspot.com" type="button" value="A" />
<input id="achicar" title="teoriablogger.blogspot.com" type="button" value="A-" />
</div>

Debes saber que estos botones sólo achican o agrandan palabras o letras, no imágenes o objetos de video o algo por el estilo.

Quitar el número de entradas por categorías

Para ver este truco debes tener el gadget que ofrece Blogger, el gadget de Etiquetas. En este gadget se puede ver la lista de las etiquetas publicadas, y el número de entradas que hay en cada una, a la derecha.

Quitar el número de entradas publicadas por etiqueta

Para sacarlo nesecitamos de dicho gadget. Entonces vamos a Blogger → Diseño → Elementos de la página → Añadir un gadget → Elegimos el gadget: Etiquetas. Y si el gadget ya lo tienes añadido, haces click en el correspondiente gadget y en editar.

Allí hacemos click en la gaceta, Mostrar cantidad de entradas por etiqueta.

Ver video explicativo

Quitar cartel de etiquetas

A muchos bloggers les molestan detalles que ya vienen por defecto en Blogger como el pequeño cartel que dice "Mostrando entradas con la etiqueta imágenes. Mostrar todas las entradas" eso es una notificación de que está o ya buscó entradas que tienen la etiqueta que seleccionamos.
A continuación, un recuadro de cómo hacer para quitarlo, con un truco demasiado fácil.

Quitar cartelito de etiqueta

Para quitarlo necesitamos ir a Blogger → Diseño → Edición de HTML → y damos clic a la casillaExpandir plantillas de artilugios y presionamos ctrl+f para buscar en la página en la que estás.
Busca el sigiente código:

<b:include data="top" name="status-message">

Cuando hayas encontrado ese código, seleccionalo y reemplazalo por el siguiente:

<!--<b:include data='top' name='status-message'/>--></b:include>

Guardar cambios y Ver Blog!!!

Plantilla de entrada

La plantilla de entrada es un texto o un objeto que viene predeterminado a la hora de escribir un post. Por ejemplo si la plantilla de entrada es "Este post fue escrito por...", cada vez que entres al editor de textos (siempre entrando en Creación de entradas → ), se mostrará esta frase.
Si tu blog es un blog que en sus entradas cambia muy poco su contenido, te recomendamos que uses esta posibilidad que ofrece Blogger.

Tener un texto predeterminado en el editor de textos

Ve a Blogger → Configuración → Formato y abajo de todo de la página encuentra: Plantilla de entrada, con un campo de texto amplio.
Ahí escribes el texto que quieras. Además puedes escribir dándole formato: añadiendo códigos HTML.

Teniendo en cuenta el ejemplo de la imagen, cuando abrimos el editor de entradas (llendo a Creación de entradas → Nueva entrada) apareció el texto tipeado en las configuraciones:

Efectos de transparencia en imágenes con Jquery

Este truco jquery, consiste en que al pasar el mouse por encima de una imagen, la misma se pondrá en un estado de semi transparencia.
Pero como el script de tipo jquery siempre nos sorprende, este efecto lo hace como si tuviera una "transición".
Para ver cómo quedan los efectos para las imágenes, Haz click aquí.

Obtener efectos de semitransparencia en imágenes

Para esto, ve a Blogger → Diseño → Edición de HTML y busca la etiqueta </head> (presiona ctrl+f) y arriba de esta etiqueta pega esto:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(&quot;.post img&quot;).fadeTo(&quot;slow&quot;, 1.0);
$(&quot;.post img&quot;).hover(function(){
$(this).fadeTo(&quot;slow&quot;, 0.5);
},function(){
$(this).fadeTo(&quot;slow&quot;, 1.0);
});
});
</script>
<script type='text/javascript'>
$(document).ready(function(){
$(&quot;.latest_img&quot;).fadeTo(&quot;slow&quot;, 1.0);
$(&quot;.latest_img&quot;).hover(function(){
$(this).fadeTo(&quot;slow&quot;, 0.5);
},function(){
$(this).fadeTo(&quot;slow&quot;, 1.0);
});
});
</script>

Cuando hayas guardado los cambios observa cómo funciona, pasando el mouse sobre una imagen.

Nota:
Este truco sólo funciona en la parte de las entradas y no en el sidebar (o sea en un gadget).

Títulos en HTML

Así como hay etiquetas que modifican y decoran los textos, también existen etiquetas para los títulos (y para muchas cosas más).
En HTML, los títulos, subtitulos y más, se definen con las siguientes etiquetas:<h1>, <h2>, <h3>, <h4>.

Crear Títulos y subtítulos en los posts.

Encabezado 1:

Ejemplo

<h1>Agrega el texto</h1>
Encabezado 2:

Ejemplo

<h2>Agrega el texto</h2>

Encabezado 3:

Ejemplo

<h3>Agrega el texto</h3>
Encabeazado 4:

Ejemplo

<h4>Agrega el texto</h4>
Encabezado 5:

Ejemplo

<h5>Agrega el texto</h5>
Encabezado 6:

Ejemplo

<h6>Agrega el texto</h6>

Modificar estilos de encabezados

La etiqueta de los encabezados se puede modificar como todos, en códigos CSS.
Para tomar como ejemplo un encabezado, tomaremos el encabezamiento de nivel 2:

h2 {
font-size: 22px;
text-transform:uppercase;
font: Verdana;
color: #2F8EFF;
text-shadow: 1px 1px 1px #3F3F3F;
}

Ya implementado este código CSS en Blogger → Diseño → Edición de HTML → Entre las etiquetas <![CDATA[/* y ]]>, en el blog se debe ver así:

Título 2

EL DATO:
Si estás avanzado en el tema, debes saber que no se debe implementar la etiqueta <h1> porque buscadores como Google, lo marcan como Spam y eso dificulta la probabilidad de visitas.
Si no sos avanzado en el tema, ¡NO TE PREOCUPES! esto es por si algún curioso avanzado intenta agregar esa etiqueta a todos los títulos de la plantilla.