¿Cómo agregar una tabla de precios en Blogger utilizando Html y Css?

Felipe Arango

29/12/2022 · Actualizado: 23/06/2023

¿Cómo agregar una tabla de precios en Blogger utilizando Html y Css?

Hola a todos, en esta publicación compartiré cómo agregar una tabla de precios en Blogger utilizando HTML. Esta tabla de precios es un programa CSS puro, lo que significa que solo he usado HTML y CSS para crear estos widgets.

Este widget está hecha solo con HTML y CSS, por lo que cuando hace clic en el botón de compra, no ocurre nada ni acción.

Si desea instalar esta tabla de precios en su sitio web, lea la publicación completa y siga los pasos indicados.

Índice de contenidos
  1. ¿Qué es la tabla de precios?
  2. Cómo agregar una tabla de precios en Blogger
  3. Video Tutorial
  4. Conclusión

¿Qué es la tabla de precios?

La tabla de precios es una de las formas en que podemos mostrar fácilmente cualquier tipo de precio por tabla. En muchos sitios web, habrás visto que junto con la lista de un artículo, también está escrito su precio en la tabla. Esta tabla de precios está hecha con la ayuda de html y css muy puros. No se ha utilizado JavaScript en esto, lo que no afectará la velocidad de carga de su sitio web.

Cómo agregar una tabla de precios en Blogger

Paso 1: En primer lugar, vaya a blogger.com e inicie sesión en su cuenta.

Paso 2: Entonces no olvide hacer una copia de seguridad de su plantilla primero para evitar errores de edición.

Paso 3: Luego haga clic en Menú de temas.

Paso 4: Luego haga clic en Editar Html.

Paso 5: luego copie el código Font-Awesome y colóquelo encima del código </head>.

<link crossorigin='anonymous' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css' integrity='sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==' referrerpolicy='no-referrer' rel='stylesheet'/>

Paso 6: Luego copie el código CSS y colóquelo encima del código </head>.

  <style type='text/css'>
/* This Pricing Table Design By www.miwebperfecta.com */
:root{
--yellow-color:#ffd861;
--green-color:#43ef8b;
--ribbon-color:#a26bfa;
--basic-background:#ffecb3;
--premium-background:#d0b3ff;
--ultimate-background:#baf8d4;}
.stmWrapper{max-width:1090px;width:100%;margin:auto;display:flex;flex-wrap:wrap;justify-content:space-between;}
.stmWrapper .stmTable{background:#fff;width:calc(24%);padding:30px 30px;position:relative;box-shadow:0 5px 10px rgba(0,0,0,0.1);}
.stmTable .price-section{display:flex;justify-content:center;}
.stmTable .stm-Price-area{height:120px;width:120px;border-radius:50%;padding:2px;}
.stm-Price-area .inner-area{height:100%;width:100%;border-radius:50%;border:3px solid #fff;line-height:117px;text-align:center;color:#fff;position:relative;}
.stm-Price-area .inner-area .text{font-size:25px;font-weight:400;position:absolute;top:-10px;left:17px;}
.stm-Price-area .inner-area .price{font-size:45px;font-weight:500;margin-left:16px;}
.stmTable .stm-Package-name{width:100%;height:2px;margin:35px 0;position:relative;}
.stmTable .stm-Package-name::before{position:absolute;top:50%;left:50%;font-size:25px;font-weight:500;background:#fff;padding:0 15px;transform:translate(-50%,-50%);}
.stmTable .features li{margin-bottom:15px;list-style:none;display:flex;justify-content:space-between;}
.features li .list-name{font-size:17px;font-weight:400;}
.features li .icon{font-size:15px;}
.features li .icon.check{color:#2db94d;}
.features li .icon.cross{color:#cd3241;}
.stmTable .btn{width:100%;display:flex;margin-top:35px;justify-content:center;}
.stmTable .btn button{width:80%;height:50px;color:#fff;font-size:20px;font-weight:500;border:none;outline:none;border-radius:25px;cursor:pointer;transition:all 0.3s ease;}
.stmTable .btn button:hover{border-radius:5px;}
.stm-Basic .features li::selection{background:var(--yellow-color);}
.stm-Basic::selection,.stm-Basic .stm-Price-area,.stm-Basic .inner-area{background:var(--yellow-color);}
.stm-Basic .btn button{border:2px solid var(--yellow-color);background:#fff;color:var(--yellow-color);}
.stm-Basic .btn button:hover{background:var(--yellow-color);color:#fff;}
.stm-Premium::selection,.stm-Premium .stm-Price-area,.stm-Premium .inner-area,.stm-Premium .btn button{background:var(--ribbon-color);}
.stm-Premium .btn button:hover{background:#833af8;}
.stm-Ultimate::selection,.stm-Ultimate .stm-Price-area,.stm-Ultimate .inner-area{background:var(--green-color);}
.stm-Ultimate .btn button{border:2px solid var(--green-color);color:var(--green-color);background:#fff;}
.stm-Ultimate .btn button:hover{background:var(--green-color);color:#fff;}
.stm-Basic .stm-Package-name{background:var(--basic-background);}
.stm-Premium .stm-Package-name{background:var(--premium-background);}
.stm-Ultimate .stm-Package-name{background:var(--ultimate-background);}
.stm-Basic .stm-Package-name::before{content:"Basic";}
.stm-Premium .stm-Package-name::before{content:"Premium";font-size:24px;}
.stm-Ultimate .stm-Package-name::before{content:"Ultimate";font-size:24px;}
@media (max-width:1020px){.stmWrapper .stmTable{width:calc(50% - 20px);margin-bottom:40px;}}
@media (max-width:698px){.stmWrapper .stmTable{width:100%;}}
::selection{color:#fff;}
.stmTable .ribbon{width:150px;height:150px;position:absolute;top:-10px;left:-10px;overflow:hidden;}
.stmTable .ribbon::before,.stmTable .ribbon::after{position:absolute;content:"";z-index:-1;display:block;border:7px solid #4606ac;border-top-color:transparent;border-left-color:transparent;}
.stmTable .ribbon::before{top:0;right:15px;}
.stmTable .ribbon::after{bottom:15px;left:0;}
.stmTable .ribbon span{position:absolute;top:30px;right:0;transform:rotate(-45deg);width:200px;background:var(--ribbon-color);padding:10px 0;color:#fff;text-align:center;font-size:17px;text-transform:uppercase;box-shadow:0 5px 10px rgba(0,0,0,0.12);}
</style>

Paso 7: Entonces no olvides hacer clic en Guardar tema.

Paso 8: Ahora copie este código HTML de la tabla de precios y péguelo donde desee colocarlo.

<div class="stmWrapper">
    <div class="stmTable stm-Basic">
      <div class="price-section">
        <div class="stm-Price-area">
          <div class="inner-area">
            <span class="text">$</span>
            <span class="price">29</span>
          </div>
        </div>
      </div>
      <div class="stm-Package-name"></div>
      <ul class="features">
        <li>
          <span class="list-name">One Selected Template</span>
          <span class="icon check"><i class="fas fa-check"></i></span>
        </li>
        <li>
          <span class="list-name">100% Responsive Design</span>
          <span class="icon check"><i class="fas fa-check"></i></span>
        </li>
        <li>
          <span class="list-name">Credit Remove Permission</span>
          <span class="icon cross"><i class="fas fa-times"></i></span>
        </li>
        <li>
          <span class="list-name">Lifetime Template Updates</span>
          <span class="icon cross"><i class="fas fa-times"></i></span>
        </li>
      </ul>
      <div class="btn"><button>Purchase</button></div>
    </div>
    <div class="stmTable stm-Premium">
      <div class="ribbon"><span>Recommend</span></div>
      <div class="price-section">
        <div class="stm-Price-area">
          <div class="inner-area">
            <span class="text">$</span>
            <span class="price">59</span>
          </div>
        </div>
      </div>
      <div class="stm-Package-name"></div>
      <ul class="features">
        <li>
          <span class="list-name">Five Existing Templates</span>
          <span class="icon check"><i class="fas fa-check"></i></span>
        </li>
        <li>
          <span class="list-name">100% Responsive Design</span>
          <span class="icon check"><i class="fas fa-check"></i></span>
        </li>
        <li>
          <span class="list-name">Credit Remove Permission</span>
          <span class="icon check"><i class="fas fa-check"></i></span>
        </li>
        <li>
          <span class="list-name">Lifetime Template Updates</span>
          <span class="icon cross"><i class="fas fa-times"></i></span>
        </li>
      </ul>
      <div class="btn"><button>Purchase</button></div>
    </div> 
    <div class="stmTable stm-Ultimate">
      <div class="price-section">
        <div class="stm-Price-area">
          <div class="inner-area">
            <span class="text">$</span>
            <span class="price">99</span>
          </div>
        </div>
      </div>
      <div class="stm-Package-name"></div>
      <ul class="features">
        <li>
          <span class="list-name">All Existing Templates</span>
          <span class="icon check"><i class="fas fa-check"></i></span>
        </li>
        <li>
          <span class="list-name">100% Responsive Design</span>
          <span class="icon check"><i class="fas fa-check"></i></span>
        </li>
        <li>
          <span class="list-name">Credit Remove Permission</span>
          <span class="icon check"><i class="fas fa-check"></i></span>
        </li>
        <li>
          <span class="list-name">Lifetime Template Updates</span>
          <span class="icon check"><i class="fas fa-check"></i></span>
        </li>
      </ul>
      <div class="btn"><button>Purchase</button></div>
    </div>
  </div>
Demostración

Video Tutorial

Conclusión

En esta publicación, he compartido con todos ustedes Cómo agregar una tabla de precios en Blogger. Entonces, ¿Cómo te gustó esta publicación? Puedes comentarlo, si tienes alguna pregunta. Gracias por visitar nuestro sitio web.

Felipe Arango

Siento pasión por el diseño web y las páginas web. Expreso mis ideas en miwebperfecta.com.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

Acerca de

Bienvenido a Mi Web Perfecta, tu recurso de confianza para obtener soporte no oficial en temas relacionados con Wordpress, Blogger, SEO y mucho más. En nuestro sitio, nos apasiona brindarte información valiosa y recursos útiles para que puedas aprovechar al máximo estas plataformas.

Nuestra misión es proporcionar información imparcial y ayudarte a resolver tus dudas o inquietudes en el mundo de la web y el marketing digital.

Si tienes alguna pregunta o necesitas asistencia en temas específicos, no dudes en ponerte en contacto con nosotros. Estamos aquí para ayudarte a alcanzar la excelencia en tu presencia en línea.

¡Gracias por confiar en Mi Web Perfecta como tu recurso de referencia en línea!

Más información