Cara Menambahkan Pricing Tables di Situs Blogger

Cara Menambahkan Pricing Tables di Situs Blogger

Menambahkan Pricing tables (Tabel Harga) di situs Blogger dapat membantu meningkatkan penjualan bisnis kamu.

Ini berarti, Pricing Tabel memiliki dampak besar bagi pembelian produk di situs kamu.

Selain itu, Menambahkan Pricing tables akan membantu pengunjung di situs kamu memilih produk yang tepat. ini dapat membantu meningkatkan konversi dan meningkatkan penjualan. Dalam artikel ini, saya akan menunjukkan HTML dan CSS Pricing tabel untuk situs Blogger kamu.

CSS:

.columnss {
box-sizing: border-box;
    float: left;
    width: 33.3%;
    padding: 8px;
}

.IMTprice {

    list-style-type: none;
    border: 1px solid #ccc;
    margin: 0;
    padding: 0;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.IMTprice:hover {
    box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)
}

.IMTprice .header {
    background-color: #fff;
    color: #383838;
    font-size: 25px;
}

.IMTprice li {
    border-bottom: 1px solid #eee;
    padding: 20px;
    text-align: center;
}

.IMTprice .grey {
    background-color: #eee;
    font-size: 20px;
}

.button {
    background-color: #383838;
    border: none;
    color: white;
    padding: 10px 25px;
    text-align: center;
    text-decoration: none;
    font-size: 18px;
}

@media only screen and (max-width: 600px) {
    .columns {
        width: 100%;
    }
}

HTML:

<div class="columnss">
  <ul class="IMTprice">
    <li class="header">Basic</li>
    <li class="grey">$ 9.99 / year</li>
    <li>10GB Storage</li>
    <li>10 Emails</li>
    <li>10 Domains</li>
    <li>1GB Bandwidth</li>
    <li class="grey"><a href="#" class="button">
Get Started
</a></li>
  </ul>
</div>

<div class="columnss">
  <ul class="IMTprice">
    <li class="header" style="background-color:#383838;color:#fff">Pro</li>
    <li class="grey">$ 24.99 / year</li>
    <li>25GB Storage</li>
    <li>25 Emails</li>
    <li>25 Domains</li>
    <li>2GB Bandwidth</li>
    <li class="grey"><a href="#" class="button">Get Started</a></li>
  </ul>
</div>

<div class="columnss">
  <ul class="IMTprice">
    <li class="header">Premium</li>
    <li class="grey">$ 49.99 / year</li>
    <li>50GB Storage</li>
    <li>50 Emails</li>
    <li>50 Domains</li>
    <li>5GB Bandwidth</li>
    <li class="grey"><a href="#" class="button">Get Started</a></li>
  </ul>
</div>

Yang perlu kamu lakukan hanyalah menyalin Script dan menambahkannya ke posting atau halaman atau dimanapun yang kamu inginkan.

Mungkin hanya itu, saya harap artikel ini membantu kamu menambahkan Pricing tables ke situs Blogger kamu. Mungkin juga kamu ingin melihat cara memproteksi situs Blogger dari serangan Peretas.

Note : Pricing Tables ini 100% Responsive...

0 Response to "Cara Menambahkan Pricing Tables di Situs Blogger"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel