Modificando link de entradas antiguas y recientes

Cobi 5/14/2021
Como todos sabemos cambiando parte de nuestra plantilla HTML, podemos mejorar, y personalizar visiblemente nuestro blog.

Hoy vamos a hablar de los link que nos aparecen tanto en las entradas recientes, inicio y entradas antiguas.
Estos link son muy importantes ya que facilitamos mucho a nuestro lector a seguir navegando por nuestro blog de forma sencilla y rápida.

Como siempre digo en todos los post que publico en los cuales pongo diferentes códigos HTML, en los que tenemos que modificar nuestra plantilla es hacer una copia de seguridad por si algo nos nos sale bien.

Podemos verlo en este otro post paso a paso.

Ahora bien ya que hemos salvado nuestra plantilla en un sitio seguro podemos modificarla.

 Para modificar este link de una forma sencilla por una imagen lo primero que tenemos que hacer es irnos a Plantilla > HTMl y buscamos los siguientes códigos.

Para modificar el link de entradas recientes

  <data:newerPageTitle/>

Lo sustituimos por: 

 <img src='Url de nuestra Imágen'/>

Para modificar el link Entradas antiguas

En el código buscamos:

     <data:olderPageTitle/>

Lo sustituimos por:

 <img src='Url de nuestra imágen'/>

Para modificar el link Página Principal

En el código buscamos:

     <data:homeMsg/>

Lo sustituimos por:

                    <img src='Url de nuestra imágen'/>

Personalización de botones
Tan solo tenemos que cambiar el texto subrayado en azul por la URL de la imagen que queramos poner.

https://milyunacosasutiles.blogspot.com/2017/02/modificando-link-de-entradas-antiguas-y.html

Read more...

Imágenes en tamaño real en Blogger

 A veces cuando subimos una imagen desde Blogger batallamos porque queremos la imagen más grande, en tamaño real, pero resulta que la medida más grande que nos aparece es de 400px de ancho.

Lo mismo sucede cuando queremos usar imágenes para la plantilla, si pegamos la URL de la imagen que nos da Blogger simplemente no se ve.

Primero veamos que cuando subimos una imagen Blogger nos da tres opciones de tamaño: Pequeñas, Medio y Grandes.

Las pequeñas tienen un ancho máximo de 200px; las medianas 320px; y las grandes 400px de ancho.

Tamaño chico (200px)

Tamaño mediano (320px)

Tamaño grande (400px)

Cualquiera que sea el caso Blogger nos arrojará un código dividido en tres partes, el primero es el contenedor que se encarga de alinear la imagen, el segundo es el enlace a la imagen y es justamente la que contiene la URL de la imagen en su tamaño original (cualquiera que sea la medida), y la tercera es el código de cómo se muestra la imagen dentro de la entrada.

<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/ZA1ny_dAs/S3dezx4UrTI/AAAD1o/WVXOYytI/s1600/Desierto.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/ZA1ny_dAs/S3dezx4UrTI/AAAD1o/WVXOYytI/s320/Desierto.png" /></a></div>

Tanto el segundo como el tercer código contienen dos URLs, una tiene la URL de la imagen en tamaño grande y la otra es una URL del tamaño pequeño.
Ambas son idénticas, excepto que una tiene el parámetro s1600 y la otra s320, eso significa que la primera URL abrirá la imagen con un ancho máximo de 1600px y la otra con un ancho máximo de 320px, esa es la imagen que se muestra en la entrada del blog.

Pero s1600 no es el tamaño original, es un tamaño grande, en realidad el tamaño original se establece con el parámetro s000
Por lo tanto, tomamos la segunda URL y cambiamos el s320 (o cualquier otro número que tenga) y lo sustituimos por s000

http://1.bp.blogspot.com/ZA1ny_dAs/S3dezx4UrTI/AAAD1o/WVXOYytI/s000/Desierto.png

De esta forma la imagen se mostrará en su tamaño original.

Tamaño real

¿Por qué lo cambiamos por s000 y no por s1600? porque habrá imágenes que sean más grandes que 1600px, por ejemplo imágenes que queramos poner como fondo del blog, y con el parámetro s000 obligamos que muestre la imagen con su tamaño exacto, sin limitaciones de ancho.

Entonces, el código de una imagen en tamaño real sería así:

<img src="http://1.bp.blogspot.com/ZA1ny_dAs/S3dezx4UrTI/AAAD1o/WVXOYytI/s000/Desierto.png" />

Sólo ten en cuenta que la imagen que vaya dentro de tus entradas deben medir menos del ancho asignado para tus entradas (main-wrapper) de lo contrario la imagen se cortará y no se mostrará por completo.

http://www.ciudadblogger.com/2010/02/imagenes-en-tamano-real.html

Read more...

Tabla Extendida de Códigos de Caracteres en HTML (4 caracteres)

Contenido: 

1. Suplemento Latin
2. Latin Extendido-A
3. Latin Extendido-B
4. Modificadores de espaciado
5. Griego
6. Cirílico
7. Latin Extendido Adicional
8. Símbolos de acotación
9. Símbolos relativos a cartas
10. Símbolos de moneda
11. Flechas
12. Operadores matemáticos
13. Técnicos varios
14. Símbolos matemáticos
15. Elementos de bloque
16. Formas geométricas
17. Símbolos varios
18. Área de uso privado
19. Formas de presentación alfabética

• Suplemento Latin [Unicode U+0080 – U+00FF]
  

  Símbolo	Código	Hexadecimal	Entidad	Descripción
  	 	A0	 	Espacio sin retorno
  ¡	¡	A1	¡	Signo de exclamación de apertura
  ¢	¢	A2	¢	Centavo
  £	£	A3	£	Libra   [el signo de la Lira es ₤ (₤)]
  ¤	¤	A4	¤	Símbolo de Moneda
  ¥	¥	A5	¥	Símbolo del Yen
  ¦	¦	A6	¦	Barra partida
  §	§	A7	§	Signo de sección
  ¨	¨	A8	¨	Diéresis
  ©	©	A9	©	Signo de derecho de copia (copyright)
  ª	ª	AA	ª	Indicador de ordinal femenino
  «	«	AB	«	Marca de acotación doble ángulo izquierdo
  ¬	¬	AC	¬	Símbolo de No
  ­	­	AD	­	Guión suave
  ®	®	AE	®	Símbolo de Registrado
  ¯	¯	AF	¯	Acento de vocal larga (macrón)
  °	°	B0	°	Símbolo de Grados
  ±	±	B1	±	Símbolo de más-menos
  ²	²	B2	²	Superscript 2 (Símbolo de "al cuadrado")
  ³	³	B3	³	Superscript 3 (Símbolo de "al cubo")
  ´	´	B4	´	Acento agudo
  µ	µ	B5	µ	Símbolo de micro
  ¶	¶	B6	¶	Símbolo de párrafo
  ·	·	B7	·	Punto medio
  ¸	&#184	B8	¸	Cedilla
  ¹	&#185	B9	¹	Superscript 1
  º	&#186	BA	º	Indicador ordinal masculino
  »	&#187	BB	»	Marca de acotación doble ángulo derecho
  ¼	&#188	BC	¼	Fracción un cuarto
  ½	½	BD	½	Fracción un medio
  ¾	¾	BE	¾	Fracción tres cuartos
  ¿	¿	BF	¿	Cerrar interrogación
  À	À	C0	À	Letra mayúscula A con acento grave
  Á	Á	C1	Á	Letra mayúscula A con acento agudo
  Â	Â	C2	Â	Letra mayúscula A con acento circunflejo
  Ã	Ã	C3	Ã	Letra mayúscula A con tilde
  Ä	Ä	C4	Ä	Letra mayúscula A con diéresis
  Å	Å	C5	Å	Letra mayúscula A con anillo encima
  Æ	Æ	C6	Æ	Letra mayúscula AE
  Ç	Ç	C7	Ç	Letra mayúscula C con cedilla
  È	È	C8	È	Letra mayúscula E con acento grave
  É	É	C9	É	Letra mayúscula E con acento agudo
  Ê	Ê	CA	Ê	Letra mayúscula E con acento circunflejo
  Ë	Ë	CB	Ë	Letra mayúscula E con diéresis
  Ì	Ì	CC	Ì	Letra mayúscula I con acento grave
  Í	Í	CD	Í	Letra mayúscula I con acento agudo
  Î	Î	CE	Î	Letra mayúscula I con acento circunflejo
  Ï	Ï	CF	Ï	Letra mayúscula I con diéresis
  Ð	Ð	D0	Ð	Letra mayúscula Eth (Inglés, Islandés, Feroés y Escandinavo antíguos)
  Ñ	Ñ	D1	Ñ	Letra mayúscula N con tilde
  Ò	Ò	D2	Ò	Letra mayúscula O con acento grave
  Ó	Ó	D3	Ó	Letra mayúscula O con acento agudo
  Ô	Ô	D4	Ô	Letra mayúscula O con acento circunflejo
  Õ	Õ	D5	Õ	Letra mayúscula O con tilde
  Ö	Ö	D6	Ö	Letra mayúscula O con diéresis

Read more...

Transformación de Texto con HTML en mayúsculas, minúsculas, etc.

CSS Transformación de Texto

Como convertir todos los caracteres en minúsculas en html?
Cómo convertir todas las letras en mayúsculas en html?

Explicación

Propiedad :

Transformar Texto
Uso:

text-transform: capitalize;
text-transform: lowercase;
text-transform: uppercase;
text-transform: none;

Definición:

Usando este atributo/etiqueta podemos transformar el texto sin editarlo.
Toma los valores siguientes.
a)capitalize : Esto hará que la primera letra de cada palabra sea mayúscula.
b)uppercase : Te mostrará todas las letras como mayúsculas.
c)lowercase : Mostrará todas las letras como minúsculas.
d)none : Esto eliminará cualquier transformación del texto.

Ejemplo 1:

<font style="text-transform: capitalize;">probando transformación de texto</font>

Resulta:

Probando Transformación de Texto

Ejemplo 2:

<font style="text-transform: uppercase;">probando transformación de texto </font>

Resulta:

PROBANDO TRANSFORMACIÓN DE TEXTO

Ejemplo 3:

<font style="text-transform: lowercase;">ProBando TRANSformación de TEXTO </font>

Resulta:

probando transformación de texto

Ejemplo 4:

<font style="text-transform: none;">ProBando TRANSformación de TEXTO </font>

Resulta:

ProBando TRANSformación de TEXTO

https://www.hscripts.com/es/tutoriales/css/transformacion-de-texto.php

Read more...

Cómo publicar un comentario en un blog con un enlace incluido el uso de las etiquetas HTML negrita, inclinada etc

Instrucciones para el uso de las etiquetas HTML en los comentarios
Para poner una palabra en negrita hay que escribir, antes y después de la palabra o el párrafo que se quiere editar, los indicadores de que el texto está editado (son lo que se llaman etiquetas HTML), en este caso: <b>negrita</b>

• Para la cursiva: <i>cursiva</i>

• Para subrayar: <u>subrayar</u>

• Para tachar: <s>tachar</s>

• Para ocultar un texto hasta que se pasa el raton por encima: <spoiler>ocultar un texto</spoiler>

• Para indicar el texto como cita de alguien: <blockquote>Para indicar el texto como cita de alguien: </blockquote>

• Para poner un enlace a algún sitio de la web:

<a href="dirección del sitio web con el html:/… etcétera, y no os olvidéis de encerrarla entre comillas"<texto que quieras que se lea en vez de la dirección web, en mi caso ha sido la palabra enlace</a>

También se pueden combinar estas etiquetas para hacer que un párrafo esté en negrita y además esté oculto, por ejemplo:

Para presentar esta frase que tiene palabras en negrita, cursiva y tachada y además se mantiene oculto habría que escribir:

<spoiler>Para presentar esta frase que tiene palabras en <b>negrita</b>, <i>cursiva</i> y <u>tachada</u> y además se mantiene oculto</spoiler>

http://arturoycompania.blogspot.com/p/instrucciones-para-comentar.html

Cómo publicar un comentario en un blog con un enlace incluido

Información del autor
Este artículo te dirá cómo usar etiquetas HTML para publicar un enlace relevante en un sitio web o blog.

Pasos

1 Lee la publicación del blog. Lee qué puedes y qué no puedes publicar en los comentarios del blog.


2 Revisa si los comentarios aceptan etiquetas HTML. Generalmente, el dueño del sitio web o del blog publicará instrucciones sobre qué se puede y qué no se puede poner en los comentarios.


3 Empieza a crear tu respuesta y publícala como un comentario.


4 Inserta la URL del sitio web en el comentario.

5 Usa este código HTML, el cual agregará la URL del sitio web o blog de tu elección. El código HTML es el que está entre paréntesis: (<a href="URL">link text</a>).


6 Edita tu comentario. Revisa que no haya ningún error gramatical. Léelo y revisa la gramática una vez más antes de publicarlo.

Consejos
Asegúrate de que el enlace sea relevante o puede que te prohíban entrar o comentar en ese sitio web.

https://es.wikihow.com/publicar-un-comentario-en-un-blog-con-un-enlace-incluido

Read more...

Cómo poner cursiva, negrita, subrayado, tamaño, tipo de letra y color del texto en HTML

Cómo poner cursiva, negrita y subrayado en HTML

Las cursivas, el subrayado y las negritas se utilizan para ofrecer una lectura más atractiva a un contenido digital. A continuación verás que todo post de un blog debe contener una negrita, una cursiva o un subrayado. Todas las agencias seo saben que esto además es positivo para tu posicionamiento seo. Os explicamos cómo y cuándo se debe utilizar estos formatos.

Cómo poner cursivas en HTML

Existen varias etiquetas para poner en cursiva un texto: <i> y <em>. Estas etiquetas deben ir siempre acompañadas de un cierre, por ejemplo:

<i>Así es como se pone un texto en cursiva<i>

<em>Y así también se pone un texto en cursiva</em>

Al igual que con otras etiquetas, em, además de mostrar un texto en cursiva, también está señalando a los buscadores que esa parte del contenido es relevante. La cursiva también es empleada para resaltar otras fuentes, nombres propios o bien palabras en otros idiomas:

En Estados Unidos al fútbol se le llama soccer.

Cómo poner negritas en HTML

Para poner negritas hay dos etiquetas que también han de tener su cierre: <b> y <strong>. Ejemplo:

<b>Así es como se pone un texto en negrita</b>

<strong>Y así también se pone un texto en negrita</strong>

Las dos etiquetas tienen la misma función pero la strong le da más fuerza de cara a los buscadores, por lo que sería aconsejable utilizar más esta etiqueta.

Cómo poner subrayado en HTML

Para poder subrayar un texto en html sólo existe una etiqueta: <u>. Y como el resto, debe tener también su etiqueta de cierre:

<u>Así es como se pone un texto con subrayado</u>

El subrayado se utiliza para resaltar muy bien un texto y a diferencia de la negrita, se emplea más en situaciones de frases largas, ya que en negrita quedaría muy cargante.

¡No olvides que estos recursos son de complemento y ayuda y se deben utilizar sólo en caso de necesidad y no ser demasiado agresivo con los buscadores!

Tamaños de letra

Para definir distintos tamaños de letra, en HTML se utiliza el elemento lleno,donde x es un número que puede variar entre 1 y 6, siendo 1 el tamaño mayor.

Se escribirián así:

<H1>Tu TEXTO </H1>
<H2>Tu TEXTO </H2>
<H3>Tu TEXTO </H3>
<H4>Tu TEXTO </H4>
<H5>Tu TEXTO </H5>
<H6>Tu TEXTO </H6>

No hay que olvidar poner el cierre a cada elemento utilizado.

Cambiar el color a los TEXTOS HTML.

<font color="red">Este texto está en ROJO</font>

Este texto está en ROJO

<span style="color: #0105FF;">Texto en AZUL</span>

Texto en AZUL

<div class="sinlink"><br/><center><font size='4'><font color="Yellow">Texto AMARILLO</font></center></div>

Texto AMARILLO

Otra forma de cambiar los tamaños de letra es utilizar el elemento con el atributo VALOR, que es un número entre 1 y 7. El valor por defecto del texto es 3. La gran diferencia de esta notación respecto a la anterior es que no se produce un salto de párrafo después de cada cambio, por lo que pueden hacerse cosas como esta:

<font size=3>Tu TEXTO...</font>

Tu TEXTO...

Cambiar el tipo de LETRA.

<FONT FACE="arial">ARIAL.</FONT>

ARIAL.

<FONT FACE="times new roman">TIMES NEW ROMAN</FONT>

TIMES NEW ROMAN

<FONT FACE="courier new"> COURIER NEW</FONT>

COURIER NEW

<FONT FACE="courier">COURIER</FONT>

COURIER

<FONT FACE="roman">ROMAN</FONT>

ROMAN

<FONT FACE="small fonts">SMALL FONTS</FONT>

SMALL FONTS

<FONT FACE="tahoma">TAHOMA</FONT>

TAHOMA

<FONT FACE="impact">IMPACT</FONT>

IMPACT

Por supuesto, este atributo es compatible con todos los demás ya conocidos, como color y tamaño.

<FONT FACE="impact" SIZE=6 COLOR="red">

IMPACT

https://www.snsmarketing.es/blog/como-poner-cursiva-negrita-y-subrayado-en-html/
https://solamentecodigoshtmlbybcn.jimdo.com/tama%C3%B1os-y-tipos-de-letras-html/

Read more...