¿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"

Etiqueta hr

La etiqueta <hr> se indica cuando se quiere llevar a cabo una línea horizontal para separar un texto con otro. El uso frecuente de esta etiqueta en un solo post o página puede resultar desprolijo e innecesario.

Sintaxis

Para determinar esta línea horizontal vamos a escribir solo una etiqueta: <br/>. ¿Por qué no usamos dos etiquetas, la de incio y la de final? Porque esta etiqueta no encierra un contenido de ninguna manera.

<hr/>

El resultado de esta etiqueta nos da una barra horizontal como esta:

---

Atributos que más se usan

Atributos	Muestra de sitaxis
style	<hr style=""/>
id	<hr id=""/>
class	<hr class=""/>
width	<hr width=""/>
align	<hr align=""/>

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.

Propiedad text-shadow

La propiedad text-shadow, permite dar sombra a un determinado texto. Esta sombra se puede modificar en cuanto a posición, nitidez y color. Usar esta etiqueta es muy eficiente estéticamente y además es algo muy moderno.

Sintaxis

En esta propiedad, se pueden poner de 2 a 4 valores: Posición eje X, Posición eje Y, Nitidéz y Color.
Así usamos text-shadow con todos sus valores:

text-shadow: 1px 1px 3px #FF0400;

El primer valor se posiciona de modo horizontal. Y si pones el signo menos (-) la sombra se correrá hacia la izquierda.
El segundo valor hace que la sombra se posicione verticalmente. Si precede un signo menos a este valor, la sombra se irá hacia arriba.
El tercer valor hace que la sombra tenga una especie de "esfumado" o le quita nitidez al aumentar el valor. Este valor es opcional.
El cuarto valor hace que le de color a la sombra. Este valor es opcional.
Así usamos text-shadow en CSS:

<style>
span{
text-shadow:1px 1px 3px #FF0400;
}
</style>

Así usamos text-shadow en HTML:

<span style="text-shadow:1px 1px 3px #FF0400;">

Ejemplos

Ejemplo de texto con sombra nítida

<span style="text-shadow:1px 1px #FF0400;">Ejemplo de texto con sombra nítida</span>

Ejemplo de texto con sombra esfumado menor

<span style="text-shadow:1px 1px 1px #FF0400;">Ejemplo de texto con sombra esfumado menor</span>

Ejemplo de texto con sombra esfumado medio

<span style="text-shadow:1px 1px 3px #FF0400;">Ejemplo de texto con sombra esfumado medio</span>

Ejemplo de texto con sombra esfumado mayor

<span style="text-shadow:1px 1px 6px #FF0400;">Ejemplo de texto con sombra esfumado mayor</span>

Ejemplo de texto con sombra nítida sin color

<span style="text-shadow:1px 1px;">Ejemplo de texto con sombra nítida sin color</span>

Los colores que se ponen al final del valor de la propiedad pueden ser establecidos como Colores Hexagecimal, RGB o con el nombre.
Para tener una lista de colores y saber cómo se usa, haz click aquí.

Menú con cajas de redes sociales para tu blog

Atención! Como bien indica luego, este truco se aplica en un gadget (sidebar)

Como ya dijimos en posts anteriores, las redes sociales ya son una parte inevitable para incorporar a la actualidad a tu blog.
Entonces qué mejor que incorporarlos a tu blog, haciendo así, que los visitantes puedan acceder a ellas mediante un diseño cómodo, elegante y fácil.
Este truco se puede ver claramente a la derecha de Teoría Blogger:

Enlaces de redes sociales

Para esto vamos a instalar el CSS en la plantilla yendo a Blogger.com → Diseño → Edición de HTML → buscamos la etiqueta </head> y arriba de este pegamos las siguientes fórmulas CSS:

<style>
/* LINKS DE REDES SOCIALES */
#seguir-redes-sociales {width:100%;float:right;}
.redsocialmenu {background:transparent;border:1px solid #898989;padding:10px;margin-bottom:10px;}
.redsocialmenu:hover{background:#CCCCCC;border:1px solid #898989;padding:10px;}
.redsocialmenu a {text-decoration:none;font-weight:bold;color:#555555;}
.redsocialmenu a:hover {text-decoration:none;font-weight:bold; color:#4CA5FF;}
.redsocialmenu img{vertical-align:middle;margin-right:5px}
</style>

Modificar el CSS[+]

Si los colores generales de las cajas no te gustan, puedes optar por cambiarlos de la siguiente forma:
En lo que está escrito en verde se puede poner transparent (está predeterminado) o puedes asignarle un código de color o el nombre. Esto sirve para cambiar el color al fondo de las cajas.
En lo que está escrito en rojo pasa lo mismo que en el anterior, pero en este caso se modifica el fondo de las cajas cuando un pasa el cursor por arriba de este.
En lo que está escrito en violeta vamos a poner una vez más el color que querramos para cambiar el color del link en el que vamos a entrar.
En lo que está escrito en amarillo vamos a poner otra vez el código o nombre del color para modificar el color del link al pasar el cursor sobre este.

---

Ahora vamos a insertar las cajas de los links de las redes sociales en un gadget, entonces vamos a Diseño → Elementos de la página → Añadir un gadget → Elegimos el tipo de gadget HTML/Javascript → Ahora copiamos el siguiente código HTML:

<div id="seguir-redes-sociales">
<div class="redsocialmenu">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyzoSHZOKTR0_rMZAT1os2R-SkRiOgmoglocLTsuUxWiK8zS9HlUs35duOqdrMzOB8V2CL-dHwOmdGybBeTzIWXC0JBFIxmxJyEi_zC5uEAPWprcdGOKdRgqWAQfZCow537gnxVVqgIdQ/s0/social-connect-facebook.png" title="Hazte Fan!" alt="Facebook" /> <a href="URL de página en Facebook">Facebook</a>
</div>
<div class="redsocialmenu">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0Z5Fz__R2oUuyS_dxTPtImz-1H7G1014MZBDMomG7ZKpfNuioEbMCb_beBwkOUBqzWz8XIdFLXGE7sq2ULHxz47aaKMjdf3d6GRm4OdORm7JgTlqhswTWesDjB0Rir4XFJYvvxsEDljs/s0/social-connect-twitter.png" title="Sígueme!" alt="Twitter" /> <a href="URL de Twitter">Twitter</a>
</div>
<div class="redsocialmenu">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9IHn0uwL1gwzynncLWa3niJjktf3Jpkrd5ZqcPx0G47aBEIfVaQdx_HCMoM0QuOUvFlrB3iuQQNf1EdNlfw8Hzixk7gtH2j3Z8wnv8LeCMHa6KW-bi454h2-qdLzuJP212U2oijsO3aA/s1600/youtube-logo.png" title="Obsérvanos!" alt="Youtube" /> <a href="URL de usuario en Youtube">You Tube</a>
</div>
</div>

Como es posible deducir, en lo que está marcado en distintos colores va la URL de:

• La página en Facebook
• Tu usuario en Twitter
• Y tu canal en Youtube