Los mejores Códigos HTML para mejorar tus Entradas en Blogger

Recopilación de los mejores códigos HTML para adornar o mejorar nuestras entradas de paginas web en Blogger, estos códigos se utilizan para mejorar las publicaciones de entradas o paginas en Sitios Web agregando opciones de visualización atractivas para nuestros visitantes. Un listado de códigos html que se implementan en la opción Vista HTML de edición de entradas en blogger.

Códigos HTML funcionales para nuestras publicaciones en blogger que se irán añadiendo en el transcurso del tiempo. Algunos de estos códigos también  pueden implementarse en bloques Gadget de nuestro blog.

1º Colocar un fragmento de texto con Movimiento hacia Arriba y Abajo.

AQUI VA EL TEXTO QUE DESEAS MOSTRARHacia abajo***Hacia arriba

<marquee id="ejemplo" direction="up">AQUI VA EL TEXTO QUE DESEAS MOSTRAR</marquee><a href="javascript:void(0);" onclick="getElementById('ejemplo').direction='down';">Hacia abajo</a>***<a href="javascript:void(0);" onclick="getElementById('ejemplo').direction='up';">Hacia arriba</a>

2º Colocar un texto con Movimiento Horizontal.

 

AQUI VA EL TEXTO QUE DESEAS MOSTRAR

<div class="n"><p>    <b><font color="#000000" face="georgia" size="4"><marquee width="400" scrollamount="5" bgcolor="#FFFFFF">Aquí tu texto</marquee></font></b></p>

3º Insertar un botón de Imprimir Contenido Página Actual, para abrir la opción de impresión.

Imprimir Contenido

<h2><a href="javascript:print()"><span style="color: rgb(80, 219, 132);"><span style="font-family: Arial;"><span style="font-size: x-large;">Imprimir Contenido</span></span></span></a></h2>

4º Inserta una caja para colocar códigos HTML o texto.

AQUI VA LO QUE TU QUIERAS ENCERRAR

<div align="center"> <div id="preview" style= "BORDER-RIGHT: #000 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #000 1px solid; PADDING-LEFT: 2px; PADDING-BOTTOM: 2px; WORD-SPACING: 1px; OVERFLOW: scroll; BORDER-LEFT: #000 1px solid; WIDTH: 400px; PADDING-TOP: 1px; BORDER-BOTTOM: #000 2px solid; HEIGHT: 150px; TEXT-ALIGN: left"> <p> AQUI VA LO QUE TU QUIERAS ENCERRAR</p> </div></div>

5º Lograr un efecto de subrayado cuando pasas el mouse sobre un enlace url.

Hola Amigo
Como Estas
Prueba

<STYLE type="text/css">
<!--
A:link {COLOR: black; TEXT-DECORATION: none}
A:visited {COLOR: gray; TEXT-DECORATION: none}
A:active {TEXT-DECORATION: none}
A:hover {COLOR: red; TEXT-DECORATION: underline} -->
</STYLE>
<p>
<p><a href="#"target="_blank">Hola Amigo</a><br>
<a href="#"target="_blank">Como Estas</a><br>
<a href="#"target="_blank">Prueba</a><br>
</p>

6º Cambiar de imagen al pasar el mouse por encima con enlace URL.

 

<a href="URL-DEL-ENLACE" target = "_ blank" onmouseout="document['fpAnimswapImgFP1'].src=document['fpAnimswapImgFP1'].imgRolln" onmouseover="var img=document['fpAnimswapImgFP1'];img.imgRolln=img.src;img.src=img.lowsrc?img.lowsrc:img.getAttribute?img.getAttribute('lowsrc'):img.src;"><img border="0" dynamicanimation="fpAnimswapImgFP1" id="fpAnimswapImgFP1" lowsrc="URL-SEGUNDA-IMAGEN" name="fpAnimswapImgFP1" src="URL-PRIMERA-IMAGEN" vspace="3" /></a>

7º Hacer un área de texto para resaltar contenido.

  Tu texto aquí

<textarea>Tu texto aquí</textarea>

8º Crear Texto con un link en otra ventana.

  Tu texto aquí

<a href="URL O LINK" target="_blank">Tu texto aquí</a>

9º Una imagen a la izquierda con texto al lado derecho.

texto que quieres que acompañe a la imagen

<div><img style='float:left;margin-top: 15px; margin-right:15px; margin-bottom:15px; margin-left:20px;'src="URL DE LA IMAGEN" /> texto que quieres que acompañe a la imagen</div>

10º Insertar PopUp, abrir enlace en una nueva ventana dando clic a una imagen.

<center>
<a href="javascript:void(0);" onclick="window.open('URL ENLACE QUE ABRIRA',  'popup', 'top=100, left=200, width=853, height=480, toolbar=NO, resizable=NO, Location=NO, Menubar=NO,  Titlebar=No, Status=NO')" rel="nofollow"><img src="URL DE IMAGEN" />
</a>
</center>

11º Spoiler, darle clic en el botón spoiler y leer el contenido.

AQUI-SU-CONTENIDO

<div id="flippy"><button>Spoiler</button></div>
<div id="flippanel">
AQUI-SU-CONTENIDO
</div>

12º Inserta una marquesina con el texto horizontal.

AQUI TU TEXTO

<div class=»n»><p><b><font color=»#000000″ face=»georgia» size=»4″><marquee width=»400″ scrollamount=»5″ bgcolor=»#FFFFFF»>AQUI TU TEXTO</marquee></font></b></p> 

13º Abrir Url en ventana Completa (Fullscreen).

<a class="btn btn-fullscreen" id="gameFullscreenButton" onclick="window.open('URL FULLSCREEM')" title="Pantalla Completa"><svg aria-hidden="true" class="icon icon-fullscreen" height="32" viewbox="0 0 28 32" width="28"><path d="M0 11.25V3.5C0 2.669.669 2 1.5 2h7.75c.412 0 .75.337.75.75v2.5c0 .412-.338.75-.75.75H4v5.25c0 .412-.337.75-.75.75H.75a.753.753 0 0 1-.75-.75zm18-8.5v2.5c0 .412.337.75.75.75H24v5.25c0 .412.337.75.75.75h2.5c.413 0 .75-.338.75-.75V3.5c0-.831-.669-1.5-1.5-1.5h-7.75a.752.752 0 0 0-.75.75zM27.25 20h-2.5a.752.752 0 0 0-.75.75V26h-5.25a.752.752 0 0 0-.75.75v2.5c0 .413.337.75.75.75h7.75c.831 0 1.5-.669 1.5-1.5v-7.75a.752.752 0 0 0-.75-.75zM10 29.25v-2.5a.752.752 0 0 0-.75-.75H4v-5.25a.752.752 0 0 0-.75-.75H.75a.752.752 0 0 0-.75.75v7.75c0 .831.669 1.5 1.5 1.5h7.75c.412 0 .75-.337.75-.75z"></path></svg></a>

14º Crear tabla de contenido Ordenado 3 filas. 

Titulo 1	Titulo 2	Titulo 3
Division 1	Division 2	Division 3
Division 1	Division 2	Division 3
Division 1	Division 2	Division 3

<table cellpadding="0" cellspacing="0" style="text-align: left;">
    <tbody>
        <tr>
            <th>Titulo 1</th>
            <th>Titulo 2</th>
            <th>Titulo 3</th>
        </tr>
        <tr>
            <td>Division 1</td>
            <td>Division 2</td>
            <td>Division 3</td>
        </tr>
        <tr>
            <td>Division 1</td>
            <td>Division 2</td>
            <td>Division 3</td>
        </tr>
        <tr>
            <td>Division 1</td>
            <td>Division 2</td>
            <td>Division 3</td>
        </tr>
    </tbody>
</table>

15º Caja para colocar códigos HTML (Parseado)

COLOCAR CODIGO HTML AQUI

<pre><code>COLOCAR CODIGO HTML AQUI</code></pre>