CARA MEMASANG WIDGET PRICING TABLES DI BLOGGER


OnePoin - Pada kesempatan kali ini saya akan membagikan sebuah tutorial sederhana yaitu bagaiman cara membuat widget Pricing tables di blogger nah dari para sobat semua apa ada yang sudah tahu apa itu widget Pricing tables  ? ya beutl banget sobat widget Pricing tables adalah widget yang di gunakan oleh para penjual hosting seperti sebuh tebel harga hosting atau barang dan lain-lain bagi sobat yang penasaran bagaimana widget Pricing tables tersebut bisa melihat DEMO nya di bawah ini :


Nahh bagi sobat yang berminat untuk membuat widget seperti gambar di atas bisa mengikuti langkah-langkah di bawah ini dengan seksama :

  • Login ke akun blogger sobat masing-masing
  • Pilih Menu Template ===> Edit Template ===> Letakkan kode CSS di bawah ini tepat di atas kode : ]]></b:skin>

Kode CSS 


* {
  box-sizing: border-box;
}
/* Bootstrap container */
.container {
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px;
}
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}
h2 {
  margin: 0 auto;
  text-align: center;
}
.pricing-table {
  width:100%;
  margin: 50px 0;
  text-align: center;
  font-family: Arial;
  font-size: 14px;
  color: #fff;
}
.pricing-table:before,
.pricing-table:after {
  content: " ";
  display: table;
}
.pricing-table:after {
  clear: both;
}
.pricing-table {
  *zoom: 1;
}
.pricing-table ul:first-child {
  margin-left: 0;
}
.pricing-table ul li {
  padding: 10px 20px;
}
.col-price {
  list-style:none;
  padding: 0;
  margin: 10px 1px;
  position: relative;
  display: block;
  float:left;
  border: 1px solid #ddd;
  background: #fff;
  transition: all 0.2s;
}
@media (min-width: 768px){
  .col-price {
    width: 37.7%;
  }
}
@media (min-width: 992px){
  .col-price {
    width: 29%;
  }
}
@media (min-width: 1200px){
  .col-price {
     width: 24.8%;
  }
}
.col-price:hover {
  box-shadow: 0 0 2px 2px #00aa72;
  -webkit-transform: scale(1.1,1.1);
  transform: scale(1,1.1);
  z-index: 1001;
  cursor: pointer;
}
.col-price.stand-out {
  z-index: 1000;
  box-shadow: 0 0 2px 2px #00aa72;
  -webkit-transform: scale(1.1,1.1);
  transform: scale(1,1.1);
}
.col-price li:nth-child(2n+1) {
  background: #444;
}
.col-price li:nth-child(2n) {
   background: #888;
}

.col-price li.header {
  color: #00aa72;
  font-size: 18px;
  font-weight:bold;
  background: #eee;
}
.col-price li.price {
  color: #333;
  background: #fff;
}
.col-price .price span {
  font-size: 34px;
}
.col-price li.get-it {
  background: #fff;
}
button {
  padding: 5px 20px;
  font-size: 16px;
  color: #fff;
  border: 1px solid #00aa72;
  box-shadow: 0 3px #009a67;
  background: #00aa72;
}

  • Setelah itu Masuk ke Menu Laman Buat "Laman Baru" dan letakkan Kode HTML di bawah ini ke dalam laman baru yang di buat tadi dengan catatan memilih "Compose HTML" 

Kode HTML


<div class="container">
  <h2>Responsive price table based on Bootstrap 3 break points</h2>
</div>
<div class="container">
  <div class="pricing-table">
  <ul class="col-price">
    <li class="header">STARTER</li>
    <li class="price"><span>$10</span><i>per month</i></li>
    <li>1,000 MB</li>
    <li>3 Email</li>
    <li>5 Databases</li>
    <li>No Support</li>
    <li class="get-it"><button type="button">Get it now</button></li>
    </ul>
    <ul class="col-price stand-out">
    <li class="header">BASIC</li>
      <li class="price"><span>$20</span><i>per month</i></li>
    <li>5,000 MB</li>
    <li>15 Email</li>
    <li>10 Databases</li>
    <li>Support</li>
    <li class="get-it"><button type="button">Get it now</button></li>
    </ul>
    <ul class="col-price">
    <li class="header">PROFESSIONAL</li>
      <li class="price"><span>$40</span><i>per month</i></li>
    <li>20,000 MB</li>
    <li>50 Email</li>
    <li>20 Databases</li>
    <li>Support</li>
    <li class="get-it"><button type="button">Get it now</button></li>
    </ul>
    <ul class="col-price">
    <li class="header">BUSINESS</li>
      <li class="price"><span>$50</span><i>per month</i></li>
    <li>40,000 MB</li>
    <li>75 Email</li>
    <li>30 Databases</li>
    <li>Support</li>
    <li class="get-it"><button type="button">Get it now</button></li>
    </ul>
  </div>
</div>

  • Jika sudah simpan Laman yang di buat tadi dan lihat hasilnya
  • Tara mudah bukan sobat nahh sekian dari saya tentang artikel ini widgetnya bisa sobat kreasikan sendiri-sendiri ya.

Subscribe to receive free email updates:

0 Response to "CARA MEMASANG WIDGET PRICING TABLES DI BLOGGER"

Post a Comment