herramientas

¡Gracias por tu compra! Estamos encantados de que hayas elegido nuestra plantilla de Blogger, y esperamos que eleve tu blog a nuevas alturas.

La mayoría de estas características solo se pueden usar en 'Vista HTML' modo, ni se puede cambiar a 'Vista de escritura' modo mientras se utilizan algunas de estas características.

En la vista del editor de publicaciones, haga clic en icono en la parte inferior derecha del título
Aparecerán dos opciones: Vista HTML y Vista de escritura
Seleccionar 'Vista HTML'.

Consejos: Uso Your_paragraph_here etiqueta para agregar párrafos al artículo.

Formato de escritura para : DonTicoMeSuena UI Themed 0.19.1
Plantilla Actualizada el : Oct 27, 2023

Imagen con Caption y Auto Lightbox

El título de esta imagen no se leerá en la descripción/snippet del artículo. También puede optar por mantener los subtítulos legibles en los fragmentos del artículo.

Todas las Publicaciones de Tipografía y Formato

Todas las imágenes en la publicación tendrán automáticamente una función lightbox, haga clic en esta imagen para probarla.

Agregado class='full' funciona para eliminar la imagen de margen y la pantalla, solo funciona para la vista móvil.

Formato de escritura:

.html

<table class='tr-caption-container'>
  <tbody>
    <tr>
      <td>
        <img alt='image_title_here' class='full' src='https://4.bp.blogspot.com/.../name.png'/>
      </td>
    </tr>
    <tr>
      <td class='tr-caption'>Your_caption_is_here</td>
    </tr>
  </tbody>
</table>

Imagen con Diseño de Cuadrícula

Formato de escritura:

.html

👨‍💻

<!--[ Grid Image ]-->
<div class='psImg grImg'>
  <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
  <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
  <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
  <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
</div>

Imagen con Mostrar Todas las Funciones

Se utiliza para ocultar algunas imágenes y se mostrará cuando el usuario haga clic en el botón 'Mostrar todo. Mostrar toda la función solo se puede activar una vez, las imágenes no se pueden ocultar nuevamente cuando la activa.

Mostrar Todo

Formato de escritura:

.html

👨‍💻

<!--[ Show All Image ]-->
<input class='inImg hidden' id='for-hideImage' type='checkbox'>
<div class='psImg hdImg'>
  <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
  <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
  <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
  
  <div class='btImg'>
    <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
    
    <!--[ Button image to activate ]-->
    <label for='for-hideImage' aria-label='Show all image'>Show All</label>
  </div>

  <!--[ Hide the rest image here ]-->
  <div class='psImg shImg'>
    <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
    <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
    <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
    <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/>
  </div>
</div>

Imagen con Diseño de desplazamiento

Igual que el diseño de imagen anterior, es solo que en la pantalla móvil las imágenes se organizarán en paralelo con la función de desplazamiento lateral adicional en la pantalla móvil.

También agregamos un efecto de desplazamiento suave a esta función. Intente abrir esta página en su dispositivo móvil:

Formato de escritura:

.html

👨‍💻

<!--[ Scroll Image ]-->
<div class='psImg scImg scrlH'>
  <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.jpg'/>
  <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.jpg'/>
  <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.jpg'/>
  <img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.jpg'/>
</div>

Imagen de Lazyload

Útil para retrasar la carga de imágenes para que la puntuación PageSpeed del blog sea mayor, la imagen solo se cargará cuando el usuario se desplace al área de la imagen. Todas las imágenes de este artículo usan Lazyload.

Formato de escritura:

.html

👨‍💻

<div>
  <img class='lazy' alt='image_title_here' data-src='https://4.bp.blogspot.com/.../name.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
  <noscript><img alt='image_title_here' src='https://4.bp.blogspot.com/.../name.png'/></noscript>
</div>

Manual Publicación Relacionada

Es importante tener en cuenta que esta función se escribe manualmente, no aparece automáticamente en cada página.

You may want to read this post :

Formato de escritura:

.html

👨‍💻

<div class='pRelate'>
  <!--[ Related title ]-->
  <b>You may want to read this post :</b>

  <ul>
    <li><a href='#'>Your_post_title_here</a></li>
    <li><a href='#'>Your_post_title_here</a></li>
    <li><a href='#'>Your_post_title_here</a></li>
  </ul>
</div>

Auto Publicación Relacionada

Publicaciones Relacionadas

Formato de Escritura:

.html

👨‍💻

<details class='sp toc' open=''>
  <summary data-show='Show all' data-hide='Hide all'>Related Posts</summary>  
  <div class='toC' id='aRel'></div>
</details>

Post-Romper

Puede usar esta función para separar párrafos o para abrir un nuevo capítulo en una publicación, aquí hay un ejemplo de cómo se ve:

Formato de escritura:

.html

👨‍💻

<!--[ To break paragraphs apart ]-->
<hr>

Párrafo con Indentación de Texto

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis comodo et. Mauris vel diam pelentesque lorem lacinia luctus.

Formato de escritura:

File_1698433054872

👨‍💻

<p class='pIndent'>Your_paragraph_is_here.</p>

Párrafo con tapa de gota

Mes una gran letra mayúscula utilizada como elemento decorativo al comienzo de un párrafo o sección. El tamaño del límite descendente suele ser de dos o más líneas.

El límite de caída cambiará el tamaño de la primera letra del párrafo para que baje una o más líneas. Muchos tipos de medios impresos usan límites de caída, como libros, revistas, periódicos, etc., porque pueden aumentar el atractivo visual.

Formato de escritura:

.html

👨‍💻

<p><span class='dropCap'>Y</span>our_paragraph_is_here.</p>

Blockquote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus.

— Anonymous

Formato de escritura:

.html

👨‍💻

<blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus.</blockquote>

Otro Estilo:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus. Nulla quam magna, pharetra in ultrices at, condimentum id tellus.

Sed suscipit sapien sed turpis ultrices viverra. Ut quis dui sed odio sollicitudin fermentum.

Aliquam vitae metus laoreet, dapibus enim sit amet, feugiat lorem. Sed in dui purus.

Formato de Escritura:

.html

👨‍💻

<blockquote class='s-1'>
  <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus. Nulla quam magna, pharetra in ultrices at, condimentum id tellus.
    <ul>
      <li>Sed suscipit sapien sed turpis ultrices viverra. Ut quis dui sed odio sollicitudin fermentum.</li>
      <li>Aliquam vitae metus laoreet, dapibus enim sit amet, feugiat lorem. Sed in dui purus.</li>
    </ul>
  </div>
</blockquote>

Cotización Social

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis comodo et. Mauris vel diam pelentesque lorem lacinia luctus. Nulla quam magna, pharetra en ultrices at, condimentum id tellus.

Formato de Escritura:

File_1698433054878

👨‍💻

<blockquote class='pu_blq' data-author='Anonymous'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus. Nulla quam magna, pharetra in ultrices at, condimentum id tellus.</blockquote>

Bloque de Nota

Esta característica sirve para agregar información importante, oraciones de advertencia o resaltar oraciones, hay dos estilos que puede intentar incluir:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis comodo et.

.html

👨‍💻

<p class='note'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et.</p>

Con Diferentes Colores:

¡Advertencia!Mauris vel diam pelentesque lorem lacinia luctus. Nulla quam magna, pharetra en ultrices at, condimentum id tellus. Sed suscipit sapien sed turpis ultra viverra.

.html

👨‍💻

<p class='note wr'>Mauris vel diam pellentesque lorem lacinia luctus. Nulla quam magna, pharetra in ultrices at, condimentum id tellus. Sed suscipit sapien sed turpis ultrices viverra.</p>

Tabla

La tabla de este tema se ha establecido de manera receptiva, por ejemplo, si el número de columnas o el ancho de la tabla excede el ancho de la pantalla, para no dañar el diseño, la tabla tendrá automáticamente una función de desplazamiento.

Abra este artículo en su dispositivo móvil y resalte la sección de la tabla a continuación:

Nombre	Posición	Oficina	Edad	Fecha de inicio	Salario
Tigre Nixon	Arquitecto de Sistemas	Edimburgo	61	2011/04/25	$320,800
Garrett Winters	Contador	Tokio	63	2011/07/25	$170,750
Cox Ashton	Autor Técnico Junior	San Francisco	66	2009/01/12	$86,000
Cedric Kelly	Desarrollador Senior de Javascript	Edimburgo	22	2012/03/29	$433,060
Satou Airi	Contador	Tokio	33	2008/11/28	$162,700

Formato de escritura:

.html

👨‍💻

<div class='table'>
  <table style='white-space:nowrap; min-width:100%;'>
    <thead>
      <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Start date</th>
        <th>Salary</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Tiger Nixon</td>
        <td>System Architect</td>
        <td>Edinburgh</td>
        <td>61</td>
        <td>2011/04/25</td>
        <td>$320,800</td>
      </tr>
      <tr>
        <td>Garrett Winters</td>
        <td>Accountant</td>
        <td>Tokyo</td>
        <td>63</td>
        <td>2011/07/25</td>
        <td>$170,750</td>
      </tr>
      <tr>
        <td>Ashton Cox</td>
        <td>Junior Technical Author</td>
        <td>San Francisco</td>
        <td>66</td>
        <td>2009/01/12</td>
        <td>$86,000</td>
      </tr>
      <tr>
        <td>Cedric Kelly</td>
        <td>Senior Javascript Developer</td>
        <td>Edinburgh</td>
        <td>22</td>
        <td>2012/03/29</td>
        <td>$433,060</td>
      </tr>
      <tr>
        <td>Airi Satou</td>
        <td>Accountant</td>
        <td>Tokyo</td>
        <td>33</td>
        <td>2008/11/28</td>
        <td>$162,700</td>
      </tr>
    </tbody>
  </table>
</div>

white-space:nowrap; especifica que el texto es una sola línea, no se envolverá a la siguiente línea y continuará hasta   se encuentra la etiqueta.
min-width:100%; define el ancho mínimo de la tabla, puede cambiarlo a px unidades por ejemplo 500px. Cámbialo a 0 si desea que el ancho de la tabla se determine automáticamente.

Tabla Manual de Contenido

Contenidos

Imagen con Caption
Manual Publicación Relacionada
Post-Romper
Blockquote

Con subpartida:

Título_title

El uso manual de Tabla de contenido es más complicado que la versión automática, debe agregar un atributo de ID diferente en cada etiqueta de encabezado y escribirlo en la lista de contenido.

Este es un ejemplo de etiqueta de encabezado con ID personalizado:

<h2>Your_Heading</h2>
    
<h3>Sub_Heading_1</h3>

<h2 id='heading'>Your_Heading</h2>
    
<h3 id='subHeading'>Sub_Heading_1</h3>

Formato de escritura:

.html

👨‍💻

<details class='sp toc' open=''>
  <summary data-show='Show all' data-hide='Hide all'>Contents</summary>  
  <div class='toC'>
    <ol>
      <li><a href='#heading'>Your_Heading</a></li>
      ...
      ...
      ...
    </ol>

    <!--[ Sample ToC with subheading ]-->
    <ol>
      <li><a href='#heading'>Your_Heading</a>
        <ol>
          <li><a href='#subHeading'>Sub_Heading_1</a></li>
          ...
          ...
          ...
        </ol>
      </li>
    </ol>
  </div>
</details>

Eliminar open='' atributo para cerrar automáticamente la Tabla de contenido cuando la página se carga por primera vez.
Puede cambiar el título o la frase 'Mostrar todo/Ocultar todo' en la sección marcada.

Tabla Semi Automática de Contenido

Tabla de Contenidos

La opción más fácil de mostrar Tabla de contenido. Esta función mostrará todas las etiquetas de encabezado en su publicación (tres niveles h2 - h4), así que asegúrese de escribir etiquetas de encabezado en orden. Leer: Error Común

Código para especificar la ubicación del widget ToC semiautomático:

.html

👨‍💻

<details class='sp toc'>
  <summary data-show='Show all' data-hide='Hide all'>Table of Contents</summary>  
  <div class='toC' id='autoToc'></div>
</details>

Highlighter Syntax

Se utiliza para definir líneas de código de computadora (HTML, CSS, Javascript, etc.) en publicaciones.

.html

👨‍💻

<!--[ Change data-text to .html, .css, .js or any language ]-->
<div class='pre pu notranslate' data-text='.html'>
  <pre style='white-space:pre-wrap; max-height:none;'>Your_code_is_here</pre>
</div>

La adición de código de color en la sintaxis se puede escribir manualmente, pero también proporcionamos características automáticas de sintaxis de color.

Cambiar data-text='.html' para definir otro formato de código, es decir. data-text='.css', data-text='.js', data-text='.php', etc
Valor white-space:pre-wrap; útil para deshabilitar el desplazamiento lateral, el código largo se conservará y dará una pequeña función de desplazamiento para mantenerlo legible.
max-height:none; define la altura máxima de la sintaxis no está establecida (automática), cambie el valor de none por ejemplo 400px para especificar la altura máxima de la sintaxis es de solo 400 píxeles.
Usar code_here para agregar color rojo/de almacenamiento.
Usar code_here para agregar color azul.
Usar code_here para agregar color verde.
Usar code_here para agregar color gris.
Usar code_here para agregar un bloque de color azul.

Alighlighter Sintaxis de Color Automático

Después de Sintaxis se resalta automáticamente /colorando usando Destacar.js

<!DOCTYPE html>
<html dir='ltr' lang='en'>
  <head>
    <title>Sample Page</title>
  </head>

  <!--[ <body> open ]-->
  <body>
    <p>Sample content here!</p>
  </body>
  <!--[ </body> close ]-->
</html>

Código para colorear sintaxis:

.html

👨‍💻

<!--[ Add a classname hl to automatically color syntax ]-->
<div class='pre hl notranslate' data-text='.html'>
  <pre style='white-space:pre-wrap; max-height:none;'>Your_code_is_here</pre>
</div>

Errores Comunes:

Esta característica detecta automáticamente el idioma y resalta los colores. Pero en algunos casos, es posible que no detecte automáticamente el lenguaje de código, en ese momento debe agregar un nombre de clase según el idioma, es decir, si es html, tienes que agregar html o language-html junto con hl.

Un Ejemplo:

.html

👨‍💻

<!--[ Add a classname hl to automatically color syntax ]-->
<div class='pre hl language-javascript notranslate' data-text='.js'>
  <pre style='white-space:pre-wrap; max-height:none;'>Your_code_is_here</pre>
</div>

Limitaciones del uso de Automatic Colored Syntax Highlighter:

No puede agregar ninguna etiqueta en sus Códigos preformateados. Por ejemplo, agregaría , eso ya no va a ser bloqueado con color azul.

Highlighter de Sintaxis Multifuncional

Codebox Writing Format

👨‍💻

Your_code_is_here

Formato de Escritura:

File_1698433054898

👨‍💻

<!--[ Replace data-text with any name to show, data-file with filename, data-lang with file extension, data-time with countdown in seconds ]-->
<div class='pre pu notranslate' data-time='5' data-text='Codebox Writing Format' data-file='Typography Codebox' data-lang='.html'>
  <pre style='white-space:pre-wrap; max-height:none;'>Your_code_is_here</pre>
</div>

MultiTabs Syntax Highlighter

<!DOCTYPE html>
<html dir='ltr' lang='en'>
  <head>
    <title>Sample Page</title>
  </head>

  <!--[ <body> open ]-->
  <body>
    <p>Sample content here!</p>
  </body>
  <!--[ </body> close ]-->
</html>

/* Standar CSS */
::selection{color:#fff;background:var(--linkC)}
*, ::after, ::before{-webkit-box-sizing:border-box;box-sizing:border-box}
h1, h2, h3, h4, h5, h6{margin:0;font-weight:700;font-family:var(--fontH);color:var(--headC)}
h1{font-size:1.9rem}
h2{font-size:1.7rem}
h3{font-size:1.5rem}
h4{font-size:1.4rem}
h5{font-size:1.3rem}
h6{font-size:1.2rem}
a{color:var(--linkC);text-decoration:none}
a:hover{opacity:.9;transition:opacity .1s}

{
  "@context": "https://schema.org",
  "@type": "WebSite",
  "url": "https://plus-ui.fineshopdesign.com/",
  "name": "Plus UI",
  "alternateName": "Plus UI",
  "potentialAction": {
    "@type": "SearchAction",
    "target": "https://plus-ui.fineshopdesign.com/search?q={search_term_string}",
    "query-input": "required name=search_term_string"
  }
}

Código de Escritura:

.html

👨‍💻

<div class='pre tb'>
  <!--[ Active function ]-->
  <input class='prei hidden' id='preT-1' type='radio' name='preTab' checked>
  <input class='prei hidden' id='preT-2' type='radio' name='preTab'>
  <input class='prei hidden' id='preT-3' type='radio' name='preTab'>
  <!--[ Header/title ]-->
  <div class='preH tbHd scrlH'>
    <!--[ Change atribute data-text='...' to replace title ]-->
    <label for='preT-1' data-text='HTML'></label>
    <label for='preT-2' data-text='CSS'></label>
    <label for='preT-3' data-text='JS'></label>
  </div>

  <!--[ Content ]-->
  <div class='preC-1'>
    <pre>Your_code_is_here</pre>
  </div>
  <div class='preC-2'>
    <pre>Your_code_is_here</pre>
  </div>
  <div class='preC-3'>
    <pre>Your_code_is_here</pre>
  </div>
</div>

El checked el atributo define la primera pestaña que aparece de forma predeterminada.
Asegúrate de id='...' y for='...' los atributos tienen el mismo valor. ID debe ser único, no puede haber dos ID idénticos en una página.
Cambiar data-text='HTML' atributo en la sección resaltada para cambiar el nombre de la pestaña.

Alternar Mostrar /Ocultar

Se utiliza para crear widgets interactivos que el usuario puede abrir y cerrar bajo demanda. De forma predeterminada, este widget está cerrado, mostrará el contenido cuando el usuario presione el botón de comando.

Cualquier contenido puede ser incluido en este widget.

Spoiler:

Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.

.html

👨‍💻

<details class='sp'>
  <summary data-show='Show all' data-hide='Hide all'>Spoiler:</summary>
  <p>Your_text_is_here.</p>
</details>

Alternar Contenido o Acordeón

Define el contenido adicional que los usuarios pueden abrir y cerrar a pedido en grupos, generalmente utilizado para una lista de preguntas o Preguntas Frecuentes (Preguntas Frecuentes).

Accordion_first_title

Epcot es un parque temático en Walt Disney World Resort con emocionantes atracciones, pabellones internacionales, fuegos artificiales galardonados y eventos especiales de temporada.

Accordion_segund_title

Epcot es un parque temático en Walt Disney World Resort con emocionantes atracciones, pabellones internacionales, fuegos artificiales galardonados y eventos especiales de temporada.

Acordeón_tercero_título

Epcot es un parque temático en Walt Disney World Resort con emocionantes atracciones, pabellones internacionales, fuegos artificiales galardonados y eventos especiales de temporada.

Acordeón_forth_title

Epcot es un parque temático en Walt Disney World Resort con emocionantes atracciones, pabellones internacionales, fuegos artificiales galardonados y eventos especiales de temporada.

.html

👨‍💻

<!--[ Accordion start ]-->
<div class='showH'>
  <!--[ Accordion line 1 ]-->
  <details class='ac'>
    <summary>Title_is_here</summary>
    <div class='aC'>
      <p>Your_text_is_here.</p>
    </div>
  </details>
  
  <!--[ Accordion line 2 ]-->
  <details class='ac alt'>
    <summary>Title_is_here</summary>
    <div class='aC'>
      <p>Your_text_is_here.</p>
    </div>
  </details>

  ...
  
  ...
</div>

Usa el nombre de la clase alt (marcado en el código anterior) para cambiar el estilo del icono.
El número de widgets de acordeón que puede agregar es ilimitado.

esquema de Preguntas Frecuentes en Microdatos

.html

👨‍💻

<!--[ Accordion start ]-->
<div class='showH' itemscope='' itemtype='https://schema.org/FAQPage'>
  <!--[ Accordion line 1 ]-->
  <details class='ac' itemscope='' itemprop='mainEntity' itemtype='https://schema.org/Question'>
    <summary itemprop='name'>Title_is_here</summary>
    <div class='aC' itemscope='' itemprop='acceptedAnswer' itemtype='https://schema.org/Answer'>
      <p itemprop='text'>Your_text_is_here.</p>
    </div>
  </details>
  
  <!--[ Accordion line 2 ]-->
  <details class='ac alt' itemscope='' itemprop='mainEntity' itemtype='https://schema.org/Question'>
    <summary itemprop='name'>Title_is_here</summary>
    <div class='aC' itemscope='' itemprop='acceptedAnswer' itemtype='https://schema.org/Answer'>
      <p itemprop='text'>Your_text_is_here.</p>
    </div>
  </details>

  ...
  
  ...
</div>

Enlace Externo

Notifica a los usuarios si el enlace conducirá a otro sitio.

Sample_external_enlace
Muestra_link_alt

.html

👨‍💻

<a class='extL' href='#' rel='noreferrer' target='_blank'>Sample_external_link</a>
<a class='extL alt' href='#' rel='noreferrer' target='_blank'>Sample_link_alt</a>

Botón Enlace

Botón

.html

👨‍💻

<a class='button' href='url_is_here'>Title_link</a>

Estilo alternativo:

Botón

.html

👨‍💻

<a class='button ln' href='url_is_here'>Title_link</a>

Con iconos:

Descargar
Demo

.html

👨‍💻

<a class='button' href='url_is_here'><i class='icon dl'></i>Title_link</a>
<a class='button' href='url_is_here'><i class='icon demo'></i>Title_link</a>

con <svg> iconos:

¡Whatsapp me!
¡Compre ahora!

.html

👨‍💻

<a class='button' href='url_is_here'>
  <svg viewBox='0 0 64 64' style='fill:#fff; margin-right:12px;'><path d='M6.9,48.4c-0.4,1.5-0.8,3.3-1.3,5.2c-0.7,2.9,1.9,5.6,4.8,4.8l5.1-1.3c1.7-0.4,3.5-0.2,5.1,0.5 c4.7,2.1,10,3,15.6,2.1c12.3-1.9,22-11.9,23.5-24.2C62,17.3,46.7,2,28.5,4.2C16.2,5.7,6.2,15.5,4.3,27.8c-0.8,5.6,0,10.9,2.1,15.6 C7.1,44.9,7.3,46.7,6.9,48.4z M21.3,19.8c0.6-0.5,1.4-0.9,1.8-0.9s2.3-0.2,2.9,1.2c0.6,1.4,2,4.7,2.1,5.1c0.2,0.3,0.3,0.7,0.1,1.2 c-0.2,0.5-0.3,0.7-0.7,1.1c-0.3,0.4-0.7,0.9-1,1.2c-0.3,0.3-0.7,0.7-0.3,1.4c0.4,0.7,1.8,2.9,3.8,4.7c2.6,2.3,4.9,3,5.5,3.4 c0.7,0.3,1.1,0.3,1.5-0.2c0.4-0.5,1.7-2,2.2-2.7c0.5-0.7,0.9-0.6,1.6-0.3c0.6,0.2,4,1.9,4.7,2.2c0.7,0.3,1.1,0.5,1.3,0.8 c0.2,0.3,0.2,1.7-0.4,3.2c-0.6,1.6-2.1,3.1-3.2,3.5c-1.3,0.5-2.8,0.7-9.3-1.9c-7-2.8-11.8-9.8-12.1-10.3c-0.3-0.5-2.8-3.7-2.8-7.1 C18.9,22.1,20.7,20.4,21.3,19.8z'/></svg>
  <span>WhatsApp me!</span>
</a>
<a class='button' href='url_is_here'>
  <svg class='line' viewBox='0 0 24 24' style='stroke:#fff; margin-right:12px;'><g transform='translate(2.000000, 2.500000)'><path d='M0.7501,0.7499 L2.8301,1.1099 L3.7931,12.5829 C3.8701,13.5199 4.6531,14.2389 5.5931,14.2359094 L16.5021,14.2359094 C17.3991,14.2379 18.1601,13.5779 18.2871,12.6899 L19.2361,6.1319 C19.3421,5.3989 18.8331,4.7189 18.1011,4.6129 C18.0371,4.6039 3.1641,4.5989 3.1641,4.5989'></path><line x1='12.1251' y1='8.2948' x2='14.8981' y2='8.2948'></line><path d='M5.1544,17.7025 C5.4554,17.7025 5.6984,17.9465 5.6984,18.2465 C5.6984,18.5475 5.4554,18.7915 5.1544,18.7915 C4.8534,18.7915 4.6104,18.5475 4.6104,18.2465 C4.6104,17.9465 4.8534,17.7025 5.1544,17.7025 Z'></path><path d='M16.4347,17.7025 C16.7357,17.7025 16.9797,17.9465 16.9797,18.2465 C16.9797,18.5475 16.7357,18.7915 16.4347,18.7915 C16.1337,18.7915 15.8907,18.5475 15.8907,18.2465 C15.8907,17.9465 16.1337,17.7025 16.4347,17.7025 Z'></path></g></svg>
  <span>Buy now!</span>
</a>

Añadir style='fill:#fff; margin-right:12px;' o style='stroke:#fff; margin-right:12px;' atributo para dar al icono SVG un color blanco.

Dos botones en una sola línea:

Demo Descargar

.html

👨‍💻

<div class='btnF'>
  <a class='button ln' href='url_is_here'>Demo</a>
  <a class='button' href='url_is_here'><i class='icon dl'></i>Download</a>
</div>

Descargar Enlace

Para proporcionar información de archivo descargada a los usuarios.

archivo_name.zip 200kb

.html

👨‍💻

<div class='dlBox'>
  <!--[ Change data-text='...' atribute to add new file type ]-->
  <span class='fT' data-text='zip'></span>
  <div class='fN'>
    <!--[ File name ]-->
    <span>file_name.zip</span>
    <span class='fS'>200kb</span>
  </div>
  
  <!--[ Download link (change href='...' atribute to add link download) ]-->
  <a class='button' aria-label='Download' href='url_is_here' rel='noreferrer' target='_blank'><i class='icon dl'></i></a>
</div>

Con imagen de fondo en lugar de texto:

acerca de_me.png 10kb

.html

👨‍💻

<div class='dlBox'>
  <!--[ Change data-text='...' atribute to add new file type ]-->
  <span class='fT lazy' data-text='zip' data-style='background-image: url(//3.bp.blogspot.com/.../title.png)'></span>
  <div class='fN'>
    <!--[ File name ]-->
    <span>about_me.png</span>
    <span class='fS'>10kb</span>
  </div>
  
  <!--[ Download link (change href='...' atribute to add link download) ]-->
  <a class='button' aria-label='Download' href='url_is_here' rel='noreferrer' target='_blank'><i class='icon dl'></i></a>
</div>

Cuadro de Descarga de Cuenta Atrás

Esta función mostrará una cuenta regresiva antes de que el usuario descargue cualquier archivo.

Esta característica requiere un enlace de descarga directa de archivos en la nube. Puede usar Google Drive para obtener el enlace de descarga directa de un archivo.

Con Imagen:

acerca de_me.webp 1 De enero de 2022 165KB 1080×1080 .webp

Sin Imagen:

acerca de_me.webp 1 De enero de 2022 165KB 1080×1080 .webp

Formato de escritura:

<div class='dldCo' id='download1'>
  <div class='dldBx'>
    <div class='dldTp'>
      <div class='dldIm' data-text='.png' style='background-image:url(image_url_here)'>
        <svg class='dldSv' viewBox='0 0 34 34'>
          <circle class='b' cx='17' cy='17' r='15.92' />
          <circle class='c dldPg' cx='17' cy='17' r='15.92' />
        </svg>
      </div>
      <div class='dldIn'>
        <span data-text='Name'>Music_Wallpaper.png</span>
        <span data-text='Category'>Music</span>
        <span data-text='Size'>3.05MB</span>
        <span data-text='Resolution'>1920×1080</span>
        <span data-text='Extension'>.png</span>
      </div>
    </div>
    <button onclick='download("#", "10", "false", "#download1")' class='dldBt dldDl'><svg class='line' viewBox='0 0 24 24'><polyline points='8 17 12 21 16 17'/><line x1='12' x2='12' y1='12' y2='21'/><path d='M20.88 18.09A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.29'/></svg></button>
    <button class='dldBt dldRt'><svg class='line' viewBox='0 0 24 24'><polyline points='23 4 23 10 17 10'/><path d='M20.49 15a9 9 0 1 1-2.12-9.36L23 10'/></svg></button>
  </div>
  <div class='dldSl'>
    <div class='dldMe'></div>
  </div>
</div>

Reproductor de Música

Reproductor de música que se puede utilizar para reproducir canciones utilizando archivos de audio, es decir. MP3.

Live Fast

Alan Walker & A$AP Rocky

00:00

03:52

Formato de escritura:

.html

👨‍💻

<div id='musicPlayer'></div>
<script>
  /*<![CDATA[*/
  /* Music Player Tracks */
  var playerTracks = [{
      name: "Track_title_here",
      artist: "Artist_names_here",
      cover: "https://raw.githubusercontent.com/.../name.jpg",
      source: "https://raw.githubusercontent.com/.../name.mp3"
    },
    {
      name: "Track_title_here",
      artist: "Artist_names_here",
      cover: "https://raw.githubusercontent.com/.../name.jpg",
      source: "https://raw.githubusercontent.com/.../name.mp3"
    },
    {
      name: "Track_title_here",
      artist: "Artist_names_here",
      cover: "https://raw.githubusercontent.com/.../name.jpg",
      source: "https://raw.githubusercontent.com/.../name.mp3"
    },
    {
      name: "Track_title_here",
      artist: "Artist_names_here",
      cover: "https://raw.githubusercontent.com/.../name.jpg",
      source: "https://raw.githubusercontent.com/.../name.mp3"
    }
  ];
  /*]]>*/
</script>

Perezoso YouTube Video

Útil para retrasar la carga de videos de Youtube después de que el usuario se desplaza por la página.

.html

👨‍💻

<!--[ Lazy youtube ]-->
<div class='ytShdw'>
  <div class='lazyYt' data-embed='Youtube_video_ID'>
    <div class='play'>
      <svg viewbox='0 0 213.7 213.7'><polygon class='t' points='73.5,62.5 148.5,105.8 73.5,149.1'></polygon><circle class='c' cx='106.8' cy='106.8' r='103.3'></circle></svg>
    </div>
  </div>
</div>

Retraso de carga de iframe con defer.js función:

.html

👨‍💻

<!--[ Lazysize iframe ]-->
<div class='ytShdw'>
  <div class='videoYt'>
    <iframe title='Lazy Iframe' class='lazy' data-src='//www.youtube.com/embed/xxxxxxxxxxx' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture' allowfullscreen></iframe>
  </div>
</div>

Cambie la sección marcada con el video de ID de Youtube que desea mostrar.
El ID de video se puede encontrar en la url de video de Youtube, por ejemplo: youtube.com/watch?v=axRAL0BXNvw.

Post Referencia

Para escribir una lista de referencias o notas al pie debajo de la publicación

Fuente:
www.ejemplo.com

.html

👨‍💻

<p class='pRef'>Source:<br> www.example.com</p>

Subtítulo de Encabezado

Para cambiar el Subtítulo del encabezado en una publicación o página en particular.

.html

👨‍💻

<style>/*<![CDATA[*/
  /* To change Header Subtitle */
  .headH .headSub{max-width:none}
  .headH .headSub::before{content:"Typography"}
/*]]>*/</style>

Notice

herramientas

Imagen con Caption y Auto Lightbox

Imagen con Diseño de Cuadrícula

Imagen con Mostrar Todas las Funciones

Imagen con Diseño de desplazamiento

Imagen de Lazyload

Manual Publicación Relacionada

Auto Publicación Relacionada

Post-Romper

Párrafo con Indentación de Texto

Párrafo con tapa de gota

Blockquote

Bloque de Nota

Tabla

Tabla Manual de Contenido

Tabla Semi Automática de Contenido

Highlighter Syntax

Alighlighter Sintaxis de Color Automático

Highlighter de Sintaxis Multifuncional

MultiTabs Syntax Highlighter

Alternar Mostrar /Ocultar

Alternar Contenido o Acordeón

esquema de Preguntas Frecuentes en Microdatos

Enlace Externo

Botón Enlace

Descargar Enlace

Cuadro de Descarga de Cuenta Atrás

Reproductor de Música

Perezoso YouTube Video

Post Referencia

Subtítulo de Encabezado

Publicar un comentario