Publicidad Cabecera
Página Principal

Componentes de la Plantilla Blogger: Zheard Store Lite:

DanNy
DanNy
Publicar un comentario
Top Comentarios
Comentarios recientes
Plantilla blogger zheard store lite 2024 descargar

A continuación presentamos los componentes de la plantilla: Zheard Store Lite para que puedas explotar al máximo el potencial de tu blog Blogger

Tabla de Contenidos:
  1. Alertas
    1. Variantes de Alertas
    2. Alertas con fondo de color
    3. Alertas con un contorno con estilo
    4. Alerta con descripción y fondo sólido
    5. Alerta con descripción y borde con estilo
  2. Botones
    1. Variantes de Botones
    2. Botones deshabilitados
    3. Botones con íconos
  3. Tablas
    1. Tabla con cabecera personalizada
    2. Tabla con filas sombreadas
    3. Tabla con efecto Hover en sus filas
    4. Tabla efecto Sticky
  4. Panel Acordeón:
  5. Etiqueta: Blockquote
  6. Eticquetas "Pre" y "code"
  7. Publicación relacionada Manual
  8. Media
  9. Publicar Referencia
  10. Adicionales
    1. Tabla de Contenidos

Alertas

Las alertas son tarjetas que pueden realzar un contenido especial, un anuncio, un mensaje.

Variantes de Alertas

Las alertas tienen 2 variantes:

Publicidad al centro 1
A simple default alert—check it out!
A simple outlined alert—check it out! 
<div class="zheard_store_alert">
  <div class="alert_message">
    A simple default alert—check it out!
  </div>
</div>

<div class="zheard_store_alert alert_outline">
  <div class="alert_message">
    A simple outlined alert—check it out!
  </div>
</div>

Alertas con fondo de color

Variantes de alertas con fondo de cuatro estilos diferentes:

A simple info alert—check it out!
A simple warning alert—check it out!
A simple success alert—check it out!
A simple error alert—check it out! 
<div class="zheard_store_alert alert_info">
  <div class="alert_message">
    A simple info alert—check it out!
  </div>
</div>

<div class="zheard_store_alert alert_warning">
  <div class="alert_message">
    A simple warning alert—check it out!
  </div>
</div>

<div class="zheard_store_alert alert_success">
  <div class="alert_message">
    A simple success alert—check it out!
  </div>
</div>

<div class="zheard_store_alert alert_error">
  <div class="alert_message">
    A simple error alert—check it out!
  </div>
</div>

Alertas con un contorno con estilo

Variantes de alertas con un estilo de contorno personalizado. Aquí 4 estilos:

Leer también
A simple info alert—check it out!
A simple warning alert—check it out!
A simple success alert—check it out!
A simple error alert—check it out! 
<div class="zheard_store_alert alert_info alert_outline">
  <div class="alert_message">
    A simple info alert—check it out!
  </div>
</div>

<div class="zheard_store_alert alert_warning alert_outline">
  <div class="alert_message">
    A simple warning alert—check it out!
  </div>
</div>

<div class="zheard_store_alert alert_success alert_outline">
  <div class="alert_message">
    A simple success alert—check it out!
  </div>
</div>

<div class="zheard_store_alert alert_error alert_outline">
  <div class="alert_message">
    A simple error alert—check it out!
  </div>
</div>

Alerta con descripción y fondo sólido

Puede utilizar alertas con contenido descriptivo:

Info A simple info alert—check it out!
Warning A simple warning alert—check it out!
Success A simple success alert—check it out!
Error A simple error alert—check it out! 
<div class="zheard_store_alert alert_info">
  <div class="alert_message">
    <strong>Info</strong>
    A simple info alert—check it out!
  </div>
</div>

<div class="zheard_store_alert alert_warning">
  <div class="alert_message">
    <strong>Warning</strong>
    A simple warning alert—check it out!
  </div>
</div>

<div class="zheard_store_alert alert_success">
  <div class="alert_message">
    <strong>Success</strong>
    A simple success alert—check it out!
  </div>
</div>

<div class="zheard_store_alert alert_error">
  <div class="alert_message">
    <strong>Error</strong>
    A simple error alert—check it out!
  </div>
</div>

Alerta con descripción y borde con estilo

Puede utilizar alertas con contenido / descripción y un contorno con estilo:

Info A simple info alert—check it out!
Warning A simple warning alert—check it out!
Success A simple success alert—check it out!
Error A simple error alert—check it out! 
<div class="zheard_store_alert alert_info alert_outline">
  <div class="alert_message">
    <strong>Info</strong>
    A simple info alert—check it out!
  </div>
</div>

<div class="zheard_store_alert alert_warning alert_outline">
  <div class="alert_message">
    <strong>Warning</strong>
    A simple warning alert—check it out!
  </div>
</div>

<div class="zheard_store_alert alert_success alert_outline">
  <div class="alert_message">
    <strong>Success</strong>
    A simple success alert—check it out!
  </div>
</div>

<div class="zheard_store_alert alert_error alert_outline">
  <div class="alert_message">
    <strong>Error</strong>
    A simple error alert—check it out!
  </div>
</div>

Botones

Los Botones son elementos que al hacer click activan accciones o que permiten la usuario interactuar de diferentes maneras en el blog.

Variantes de Botones

Tenemos 4 variantes diferentes

Default Button Outline Button Unelevated Button Raised Button 
<a class="zheard_store_button" href="#">Default Button</a>
<a class="zheard_store_button outline" href="#">Outline Button</a>
<a class="zheard_store_button unelevated" href="#">Unelevated Button</a>
<a class="zheard_store_button raised" href="#">Raised Button</a>

Botones deshabilitados

Botenes desactivados o que no permiten una acción:

Default Button Disabled Outline Button Disabled Unelevated Button Disabled Raised Button Disabled Rounded Button Disabled 
<a class="zheard_store_button disabled" href="#">Default Button Disabled</a>
<a class="zheard_store_button outline disabled" href="#">Outline Button Disabled</a>
<a class="zheard_store_button unelevated disabled" href="#">Unelevated Button Disabled</a>
<a class="zheard_store_button raised disabled" href="#">Raised Button Disabled</a>
<a class="zheard_store_button unelevated rounded disabled" href="#">Rounded Button Disabled</a>

Botones con íconos

Puedes agregar íconos a los botones, agregando un ícono SVG:

Download 
<a class="zheard_store_button unelevated rounded" href="#">
  <svg viewbox="0 0 24 24">
    <path d="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z"></path>
  </svg>
  Download
</a>

Tablas

Aquí un ejemplo de tipos de tablas que podemos adicionar a nuestros artículos del blog.

No. Nombre Género Ciudad Aficiones
1 Zheard Andrich Hombre Lima - Peru Viajar en el tiempo
2 Sin datos. Sin datos. Sin datos. Sin datos.
3 Sin datos. Sin datos. Sin datos. Sin datos.
4 Sin datos. Sin datos. Sin datos. Sin datos.
5 Sin datos. Sin datos. Sin datos. Sin datos. 
<div class="zheard_store_table">
  <table>
      <thead>
          <tr>
              <th>No.</th>
              <th>Nombre</th>
              <th>Género</th>
              <th>Ciudad</th>
              <th>Aficiones</th>
          </tr>
      </thead>
      <tbody>
          <tr>
              <th>1</th>
              <td>Zheard Andrich</td>
              <td>Hombre</td>
              <td>Lima - Peru</td>
              <td>Viajar en el tiempo</td>
          </tr>
          <tr>
              <th>2</th>
              <td>Sin datos.</td>
            <td>Sin datos.</td>
              <td>Sin datos.</td>
            <td>Sin datos.</td>
          </tr>
          <tr>
              <th>3</th>
             <td>Sin datos.</td>
            <td>Sin datos.</td>
             <td>Sin datos.</td>
            <td>Sin datos.</td>
          </tr>
          <tr>
              <th>4</th>
            <td>Sin datos.</td>
          <td>Sin datos.</td>
           <td>Sin datos.</td>
            <td>Sin datos.</td>
          </tr>
          <tr>
              <th>5</th>
           <td>Sin datos.</td>
           <td>Sin datos.</td>
            <td>Sin datos.</td>
          <td>Sin datos.</td>
          </tr>
      </tbody>
  </table>
</div>

Tabla con cabecera personalizada

Puedes usar 4 clases para personalizar el encabezado de una tabla: table_primary, table_warning, table_success, and table_error.

No. Nombre Género Ciudad Aficiones
1 Zheard Andrich Hombre Lima - Peru Viajar en el tiempo
2 Sin datos. Sin datos. Sin datos. Sin datos.
3 Sin datos. Sin datos. Sin datos. Sin datos.
4 Sin datos. Sin datos. Sin datos. Sin datos.
5 Sin datos. Sin datos. Sin datos. Sin datos. 
<div class="zheard_store_table">
  <table class="table_primary">
  <thead>
          <tr>
              <th>No.</th>
              <th>Nombre</th>
              <th>Género</th>
              <th>Ciudad</th>
              <th>Aficiones</th>
          </tr>
      </thead>
      <tbody>
          <tr>
              <th>1</th>
              <td>Zheard Andrich</td>
              <td>Hombre</td>
              <td>Lima - Peru</td>
              <td>Viajar en el tiempo</td>
          </tr>
          <tr>
              <th>2</th>
              <td>Sin datos.</td>
            <td>Sin datos.</td>
              <td>Sin datos.</td>
            <td>Sin datos.</td>
          </tr>
          <tr>
              <th>3</th>
             <td>Sin datos.</td>
            <td>Sin datos.</td>
             <td>Sin datos.</td>
            <td>Sin datos.</td>
          </tr>
          <tr>
              <th>4</th>
            <td>Sin datos.</td>
          <td>Sin datos.</td>
           <td>Sin datos.</td>
            <td>Sin datos.</td>
          </tr>
          <tr>
              <th>5</th>
           <td>Sin datos.</td>
           <td>Sin datos.</td>
            <td>Sin datos.</td>
          <td>Sin datos.</td>
          </tr>
      </tbody>
  </table>
</div>

Tabla con filas sombreadas

Utilice la clasetable_stripped para agregar sombreado de cebra en las filas de una tabla dentro de tbody.

No. Nombre Género Ciudad Aficiones
1 Zheard Andrich Hombre Lima - Peru Viajar en el tiempo
2 Sin datos. Sin datos. Sin datos. Sin datos.
3 Sin datos. Sin datos. Sin datos. Sin datos.
4 Sin datos. Sin datos. Sin datos. Sin datos.
5 Sin datos. Sin datos. Sin datos. Sin datos. 
<div class="zheard_store_table">
  <table class="table_stripped">
      <thead>
         <tr>
              <th>No.</th>
              <th>Nombre</th>
              <th>Género</th>
              <th>Ciudad</th>
              <th>Aficiones</th>
          </tr>
      </thead>
      <tbody>
          <tr>
              <th>1</th>
              <td>Zheard Andrich</td>
              <td>Hombre</td>
              <td>Lima - Peru</td>
              <td>Viajar en el tiempo</td>
          </tr>
          <tr>
              <th>2</th>
              <td>Sin datos.</td>
            <td>Sin datos.</td>
              <td>Sin datos.</td>
            <td>Sin datos.</td>
          </tr>
          <tr>
              <th>3</th>
             <td>Sin datos.</td>
            <td>Sin datos.</td>
             <td>Sin datos.</td>
            <td>Sin datos.</td>
          </tr>
          <tr>
              <th>4</th>
            <td>Sin datos.</td>
          <td>Sin datos.</td>
           <td>Sin datos.</td>
            <td>Sin datos.</td>
          </tr>
          <tr>
              <th>5</th>
           <td>Sin datos.</td>
           <td>Sin datos.</td>
            <td>Sin datos.</td>
          <td>Sin datos.</td>
          </tr>
      </tbody>
  </table>
</div>

Tabla con efecto Hover en sus filas

Utiliza la clase table_hovered para crear un efecto de hover al pasar el mouse por las filas de la tabla.

No. Nombre Género Ciudad Aficiones
1 Zheard Andrich Hombre Lima - Peru Viajar en el tiempo
2 Sin datos. Sin datos. Sin datos. Sin datos.
3 Sin datos. Sin datos. Sin datos. Sin datos.
4 Sin datos. Sin datos. Sin datos. Sin datos.
5 Sin datos. Sin datos. Sin datos. Sin datos. 
<div class="zheard_store_table">
  <table class="table_hovered">
     <thead>
         <tr>
              <th>No.</th>
              <th>Nombre</th>
              <th>Género</th>
              <th>Ciudad</th>
              <th>Aficiones</th>
          </tr>
      </thead>
      <tbody>
          <tr>
              <th>1</th>
              <td>Zheard Andrich</td>
              <td>Hombre</td>
              <td>Lima - Peru</td>
              <td>Viajar en el tiempo</td>
          </tr>
          <tr>
              <th>2</th>
              <td>Sin datos.</td>
            <td>Sin datos.</td>
              <td>Sin datos.</td>
            <td>Sin datos.</td>
          </tr>
          <tr>
              <th>3</th>
             <td>Sin datos.</td>
            <td>Sin datos.</td>
             <td>Sin datos.</td>
            <td>Sin datos.</td>
          </tr>
          <tr>
              <th>4</th>
            <td>Sin datos.</td>
          <td>Sin datos.</td>
           <td>Sin datos.</td>
            <td>Sin datos.</td>
          </tr>
          <tr>
              <th>5</th>
           <td>Sin datos.</td>
           <td>Sin datos.</td>
            <td>Sin datos.</td>
          <td>Sin datos.</td>
          </tr>
      </tbody>
  </table>
</div>

Tabla efecto Sticky

Utiliza la clase table_sticky para usar tablas adhesivas, donde el encabezado se mantenga fijo.

No. Nombre Género Ciudad Aficiones
1 Zheard Andrich Hombre Lima - Peru Viajar en el tiempo
2 Sin datos. Sin datos. Sin datos. Sin datos.
3 Sin datos. Sin datos. Sin datos. Sin datos.
4 Sin datos. Sin datos. Sin datos. Sin datos.
5 Sin datos. Sin datos. Sin datos. Sin datos.
6 Sin datos. Sin datos. Sin datos. Sin datos.
7 Sin datos. Sin datos. Sin datos. Sin datos. 
<div class="zheard_store_table table_sticky">
  <table>
     <thead>
         <tr>
              <th>No.</th>
              <th>Nombre</th>
              <th>Género</th>
              <th>Ciudad</th>
              <th>Aficiones</th>
          </tr>
      </thead>
      <tbody>
          <tr>
              <th>1</th>
              <td>Zheard Andrich</td>
              <td>Hombre</td>
              <td>Lima - Peru</td>
              <td>Viajar en el tiempo</td>
          </tr>
          <tr>
              <th>2</th>
              <td>Sin datos.</td>
            <td>Sin datos.</td>
              <td>Sin datos.</td>
            <td>Sin datos.</td>
          </tr>
          <tr>
              <th>3</th>
             <td>Sin datos.</td>
            <td>Sin datos.</td>
             <td>Sin datos.</td>
            <td>Sin datos.</td>
          </tr>
          <tr>
              <th>4</th>
            <td>Sin datos.</td>
          <td>Sin datos.</td>
           <td>Sin datos.</td>
            <td>Sin datos.</td>
          </tr>
          <tr>
              <th>5</th>
           <td>Sin datos.</td>
           <td>Sin datos.</td>
            <td>Sin datos.</td>
          <td>Sin datos.</td>
          </tr>
         <tr>
              <th>6</th>
           <td>Sin datos.</td>
           <td>Sin datos.</td>
            <td>Sin datos.</td>
          <td>Sin datos.</td>
          </tr>
         <tr>
              <th>7</th>
           <td>Sin datos.</td>
           <td>Sin datos.</td>
            <td>Sin datos.</td>
          <td>Sin datos.</td>
          </tr>
      </tbody>
  </table>
</div>

Panel Acordeón:

Ejemplo:

Collapse 1 - Click Me!
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Collapse 2 - Click Me!
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Collapse 3 - Click Me!
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
<div class="zheard_store_collapse">
  <div class="collapse_panel">
    <div class="collapse_header">
      <div class="collapse_title">Collapse 1 - Click Me!</div>
    </div>
    <div class="collapse_content">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
  </div>

    <div class="collapse_panel">
    <div class="collapse_header">
      <div class="collapse_title">Collapse 2 - Click Me!</div>
    </div>
    <div class="collapse_content">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
  </div>
  
    <div class="collapse_panel">
    <div class="collapse_header">
      <div class="collapse_title">Collapse 3 - Click Me!</div>
    </div>
    <div class="collapse_content">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
  </div>
</div>

Etiqueta: Blockquote

Utilizar estas etiquetas blockquote con span, small o footer.

La amistad verdadera, es ilusión. ~ Zheard 
<blockquote>
La amistad verdadera, es ilusión.
  <span>~ Zheard</span>
</blockquote>

Eticquetas "Pre" y "code"

Los pre y code son etiquetas que puedes usar en esta plantilla si deseas colocar codigo HTML en tus artículos sin que estos alteren el diseño de tu web. Recuerda que puedes usar nuestra herramienta Convertir HTML a XML (Parsear HTML).

A continuación una muestra de etiquetas: tags pre y code que puedes usar:

<div class="zheard_store_highlight_wrap">
  <pre data-lang="yout-title-here"><code>Your code here</code></pre>
</div>

Ejemplos con encabezado:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Sample HTML</title>
</head>
<body>
  <p>Sample Text</p>
</body>
</html>
body{font-size:14px;font-weight:400;color:inherit;}
$('#mybutton').click(function() {
  $(this).toggleClass('active');
});
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'My First Angular App!';
}

Publicación relacionada Manual

Puedes agregar una tarjeta relacionada a tu artículo de forma manual.

Ejemplo:

Plantila Zheard Store Lite -Componentes Leer Articulo 
<div class="manual_related_post">
  <a href="#">
    Plantila Zheard Store Lite -Componentes
    <span>Leer artículo</span>
  </a>
</div>

Media

Utilice la clase class="media_player" en embed, iframe, y object para hacer objetos responsivos.

<div class="media_player">
 <iframe width="914" height="514" src="https://www.youtube.com/embed/lBQvx2tpFBQ" title="Crea un DNI online para tu mascota - DNI Zheard" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>

Publicar Referencia

Puedes agregar una lista de referencias o citas de donde se extrajo algún contenido o texto:

Referencia:
https://www.zheard.net 

<p class="post_reference">
  Referencia:
  <br />
  https://www.zheard.net
</p>

Adicionales

Aquí un componente muy util de usar para artículos grandes y con varios subtítulos.

Tabla de Contenidos

Puedes crear una tabla de contenidos de forma automática para tus publicaciones, si incluyes a los encabezados las etiquetas: h2 dan h3.

Luego puedes agregar este codigo manualente:

<div class="toc_wrap">
    <div class="toc_title">
        Tabla de contenidos
    </div>
    <div id="toc_content"></div>
</div>

Todos los componentes se irán actualizando en esta publicación
Publicidad al final


DanNy
DanNy
Hola Soy DanNy. Comparto 'música' y 'videos' de estreno en este blog ;)
- Conozco muchos secretos de los humanos y estoy convencido que merecen ser destruidos junto con este planeta.
Etiquetas:
blogger plantillas blogger
El enlace ha sido copiado.