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

Comments Leave a Reply

Add a Comment

Kami senang anda memutuskan untuk meninggalkan komentar, harap di catat bahwa setiap komentar dimoderisasi sesuai dengan privacy policy situs kami. Kami menggunkan sistem komentar disqus, semua komentar yang mengandung spam, promosi, tautan, dan lainnya tidak akan ditampilkan.

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

Post a Comment

share counter

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel