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

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

Hola a todos, en esta publicación compartiré cómo agregar una tabla de precios en Blogger. 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 contenido

    ¿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.

    Más información: ¿Cómo crear un selector de colores usando HTML, CSS y JavaScript?

    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:&quot;Basic&quot;;}
    .stm-Premium .stm-Package-name::before{content:&quot;Premium&quot;;font-size:24px;}
    .stm-Ultimate .stm-Package-name::before{content:&quot;Ultimate&quot;;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:&quot;&quot;;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>

    Video Tutorial

    hqdefault

    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.

    Deja una respuesta

    Tu dirección de correo electrónico no será publicada.

    Subir