Membuat Pricing Di Blogspot Dengan Css HTML

Membuat Pricing Di Blogspot Dengan Css HTML
Pada Postingan Saya Kali Ini Ingin Berbagi Cara Membuat Pricing Di Blogspot Dengan Css HTML Di Postingan Saya Kali Ini Tidak Akan Panjang Lebar Menjelaskan Cara Membuat Pricing Di Blogspot.

Oke Kita Langsung Saja Di Mulai Untuk Proses Pembuatan Pricingnya,
Pertama Silahkan Login Terlebih Dahulu Ke Dasbor Blog Anda Disini Setelah Login Silahkan Masuk Ke Settingan Tema Selanjutnya Klik Sesuaikan Pada Settingan Tema Blog Anda Kemudian Klik Lanjutan → Tambahkan CSS Lihat Pada Gambar Dibawah
Membuat Pricing Di Blogspot Dengan Css HTML

Selanjutnya Silahkan Copy Kode Di Bawah Ini Dan Paste Ke Kolom Yang Saya Tandai CSS Disini


/* Pricing CSS Hendi Kiddrock Star */
.pricing-tables-s-widodo-com {
position: relative;
float: left;
width: 33%;
border: 1px solid #eee;
}
.pricing-tables-s-widodo-com .title {
float: left;
width: 100%;
height: 57px;
padding: 13px 0 10px 0;
background-color: #454545;
text-align: center;
font-size: 23px;
color: #fff;
border-top: 3px solid #272727;
border-bottom: 1px solid #818181;
font-family: 'Open Sans', sans-serif;
font-weight: normal;
}
.pricing-tables-s-widodo-com .price {
float: left;
width: 100%;
padding: 30px 0 30px 0;
background-color: #636363;
text-align: center;
font-size: 40px;
color: #fff;
font-family: 'Open Sans', sans-serif;
font-weight: normal;
}
.pricing-tables-s-widodo-com .price i {
font-size: 14px;
color: #ccc;
display: block;
font-weight: normal;
font-style: normal;
margin-top: 5px;
}
.pricing-tables-s-widodo-com .cont-list {
float: left;
width: 100%;
padding: 15px 0;
border-top: 3px solid #fff;
border-bottom: 3px solid #fff;
background-color: #f9f9f9;
text-align: center;
color: #727272;
}
.pricing-tables-s-widodo-com .cont-list ul {
margin: 0;
padding: 0;
}
.pricing-tables-s-widodo-com .cont-list li {
margin: 0;
padding: 0;
list-style-type: none;
line-height: 30px;
border-bottom: 1px solid #fff;
}
.pricing-tables-s-widodo-com .cont-list li.last {
border: none;
}
.pricing-tables-s-widodo-com .ordernow {
float: left;
width: 100%;
padding: 20px 0;
background-color: #eee;
text-align: center;
color: #fff;
}
.pricing-tables-helight-s-widodo-com{
position: relative;
float: left;
width: 33%;
z-index: 3;
-webkit-box-shadow:  0px 0px 10px 0px rgba(0, 0, 0, 0.1);
box-shadow:  0px 0px 10px 5px rgba(0, 0, 0, 0.1);
}
.pricing-tables-helight-s-widodo-com .title {
float: left;
width: 100%;
height: 73px;
padding: 20px 0 0 0;
margin-top: -10px;
background-color: #0aa4df;
text-align: center;
font-size: 23px;
color: #fff;
border-top: 3px solid #0893c9;
border-bottom: 1px solid #1cb7f3;
font-family: 'Open Sans', sans-serif;
font-weight: normal;
}
.pricing-tables-helight-s-widodo-com .price {
float: left;
width: 100%;
padding: 30px 0 30px 0;
background-color: #7ab700;
text-align: center;
font-size: 45px;
color: #fff;
font-family: 'Open Sans', sans-serif;
font-weight: normal;
}
.pricing-tables-helight-s-widodo-com .price i {
font-size: 14px;
color: #eee;
display: block;
font-weight: normal;
font-style: normal;
margin-top: 5px;
}
.pricing-tables-helight-s-widodo-com .cont-list {
float: left;
width: 100%;
padding: 15px 0;
border-top: 3px solid #fff;
border-bottom: 3px solid #fff;
background-color: #f9f9f9;
text-align: center;
color: #727272;
}
.pricing-tables-helight-s-widodo-com .cont-list ul {
margin: 0;
padding: 0;
}
.pricing-tables-helight-s-widodo-com .cont-list li {
margin: 0;
padding: 0;
list-style-type: none;
line-height: 30px;
border-bottom: 1px solid #fff;
}
.pricing-tables-helight-s-widodo-com .cont-list li.last {
border: none;
}
.pricing-tables-helight-s-widodo-com .ordernow {
float: left;
width: 100%;
padding: 30px 0 35px 0;
background-color: #eee;
text-align: center;
color: #fff;
}
/* Pricing CSS Hendi Kiddrock End */

Kemudian Klik Save Atau Terapkan Ke Blog Lihat Pada Gambar Di Atas Yang Sudah Saya Tandai Klik Save, Selanjutnya Klik Kembali Ke Blogger → Halaman → Buat Halaman Baru Lalu Pastekan Kode Atau HTML Di Bawah Ini
<div class="pricing-tables-s-widodo-com">
<div class="title">
Basic</div>
<div class="price">
Rp 350,000 <i> 1 Kali Beli Selamanya</i></div>
<div class="cont-list">
<ul>
<li>Free Blogger Template</li>
<li>Free Sub Domain Blogspot</li>
<li>Free 3 Kali Revisi</li>
<li>Free Banner</li>
<li>Konsultan</li>
<li>Email Gmail</li>
<li class="last">24/7 Support</li>
</ul>
</div>
<div class="ordernow">
<a href="#"><button class="btn btn-primary">Order Now</button></a></div>
</div>
<div class="pricing-tables-helight-s-widodo-com">
<div class="title">
Pro</div>
<div class="price">
Rp 850,000 <i> Perpanjangan Domain Saja Per Tahun</i></div>
<div class="cont-list">
<ul>
<li>Free Blogger Template</li>
<li>Premium Domain .COM</li>
<li>Free 5 Kali Revisi</li>
<li>Free Banner And Logo</li>
<li>Panduan Untuk Pemula</li>
<li>Email Gmail</li>
<li class="last">24/7 Support</li>
</ul>
</div>
<div class="ordernow">
<a href="#"><button class="btn btn-primary">Order Now</button></a></div>
</div>
<div class="pricing-tables-s-widodo-com">
<div class="title">
Premium</div>
<div class="price">
Rp 1,350,000 <i>Perpanjangan Hosting Domain Saja Per Tahun</i></div>
<div class="cont-list">
<ul>
<li>Premium Blogger Template</li>
<li>Premium Domain .COM</li>
<li>Unlimited Revisi</li>
<li>5 Revisi Banner And Logo</li>
<li>Panduan Untuk Pemula</li>
<li>Premium Email Domain</li>
<li class="last">24/7 Support</li>
</ul>
</div>
<div class="ordernow">
<a href="#"><button class="btn btn-primary">Order Now</button></a></div>
</div>

Silahkan Anda Lihat Hasilnya Dengan Mengklik Pratinjau Pada Halaman Yang Anda Buat,

Ini Hasil Modifikasi Saya
Mungkin Sampai Disini Dulu Postingan Saya Tentang Membuat Pricing Di Blogspot Dengan Css HTML Next Akan Saya Share Lagi Yang Lainnya 😃

Terima Kasih telah Berkunjung

Semoga Bermanfaat Untuk Anda Semua