Flat UI Pricing Table untuk Blogger

Pricing Table ini berguna untuk anda yang ingin usaha tetapi di blogger :)

Langkah awal pembuatan pricing table di blog adalah dengan memasang Font Awesome (Lewati Jika sudah ada)
Taruh Kode dibawah ke atas </head>


<link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>

Sekarang cari ]]></b:skin> dan taruh kode dibawah ini diatasnya

.pricing {
 background: #f5f5f5;
 padding-top: 50px;
 padding-bottom: 50px;
}
.ccr-pricing-table {
 margin-bottom: 30px;
}
.ccr-pricing-header {
 position: relative;
 border-top-right-radius: 4px;
 border-top-left-radius: 4px;
 background: #fff;
}
.ccr-pricing-header:after 
{
 content: '';
 position: absolute;
 border-style: solid;
 border-width: 5px 5px 0;
 display: block;
 width: 0;
 z-index: 1;
 bottom: 0px;
 left: 50%;
 margin-left: -5px;
}
p.ccr-price-title {
 background: #78cfbf;
 border-top-right-radius: 4px;
 border-top-left-radius: 4px;
 color: #fff;
 font-size: 16px;
 line-height: 36px;
 text-align: center;
}
.ccr-price-value {
 font-size: 64px;
 color: #fff;
 position: relative;
 text-align: center;
}
.ccr-price-value sup {
 font-size: 24px;
 position: relative;
 top: -25px;
}
.ccr-price-value span {
 font-size: 12px;
}
.ccr-price-quality { 
 font-size: 12px;
 color: #fff;
 text-align: center;
 position: relative;
 top:-5px;
 padding-bottom: 10px;
}

.ccr-pricing-ul {
 top:0px;
 padding:20px 0 20px 0;
 background: #fff;
}
.ccr-pricing-ul ul {
 display: table;
 margin: 0 auto;
}
.ccr-pricing-ul ul li {
 list-style: none;
 color:#8b8b8b;
 font-size: 12px;
 line-height: 32px;
}
.ccr-pricing-ul ul li i {
 list-style: none;
 color:#c8c8c8;
 font-size: 18px;
 position: relative;
 top: 1px;
 margin-right: 10px;
}
.ccr-pricing-footer {
 position: relative;
}
.ccr-pricing-footer:after {
 content: '';
 position: absolute;
 border-style: solid;
 border-width: 5px 5px 0;
 border-color: #fff transparent;
 display: block;
 width: 0;
 z-index: 1;
 bottom: 33px;
 left: 50%;
 margin-left: -5px;
}
.ccr-price-host {
 border-bottom-right-radius: 5px;
 border-bottom-left-radius: 5px;
 text-align: center;
 width: 100%;
 border:none;
}
button.ccr-price-host  {
 color: #fff;
 font-size: 14px;
 line-height: 36px;
 outline: none;
}

.green .ccr-pricing-header:after {
 border-color: #81dac9 transparent;
}
.green p.ccr-price-title{
 background: #78cfbf;
}
.green .ccr-price-value, .green .ccr-price-quality {
 background: #81dac9;
}
.green .ccr-price-host {
 background: #81dac9;
 box-shadow:-1px 2px 0 0 #7cd1c1;
}

.blue .ccr-pricing-header:after {
 border-color: #53cfe9 transparent;
}
.blue p.ccr-price-title{
 background: #3ec6df;
}
.blue .ccr-price-value, .blue .ccr-price-quality {
 background: #53cfe9;
}
.blue .ccr-price-host {
 background: #53cfe9;
 box-shadow:-1px 2px 0 0 #47c7e1;
}


.red .ccr-pricing-header:after {
 border-color: #eb6378 transparent;
}
.red p.ccr-price-title{
 background: #e2536b;
}
.red .ccr-price-value, .red .ccr-price-quality {
 background: #eb6378;
}
.red .ccr-price-host {
 background: #eb6378;
 box-shadow:-1px 2px 0 0 #e05e72;
}

.yellow .ccr-pricing-header:after {
 border-color: #f39c12 transparent;
}
.yellow p.ccr-price-title{
 background: #e67e22;
}
.yellow .ccr-price-value, .yellow .ccr-price-quality {
 background: #f39c12;
}
.yellow .ccr-price-host {
 background: #f39c12;
 box-shadow:-1px 2px 0 0 #e67e22;
}

Sekarang taruh kode HTML ini dimana saja, mau di posting, di laman statis dll

<div class="row pricing">
      <div class="col-md-3 col-sm-6">
        <div class="ccr-pricing-table green">
          <section class="ccr-pricing-header">
            <p class="ccr-price-title">Personal</p>
            <P class="ccr-price-value"> <sup>$</sup>29<span>/ mo.</span> </P>
            <p class="ccr-price-quality"><em>Perfect for freelancers</em></p>
          </section>
          <section class="ccr-pricing-ul">
          <ul>
            <li class="ccr-price-freture"><i class="fa fa-asterisk"></i>1 WordPress Install</li>
            <li class="ccr-price-visitor"><i class="fa fa-star"></i>25,000 visits/mo.</li>
            <li class="ccr-price-data"><i class="fa fa-tachometer"></i>Unlimited Data Transfer</li>
            <li class="ccr-price-storage"><i class="fa fa-briefcase"></i>10GB Local Storage</li>
          </ul>
          </section>
          <section class="ccr-pricing-footer">
            <button class="ccr-price-host">Host My Website</button>
          </section>
        </div> <!-- /.ccr-pricing-table-1 -->
      </div>
      <div class="col-md-3 col-sm-6">
        <div class="ccr-pricing-table blue">
          <section class="ccr-pricing-header">
            <p class="ccr-price-title">Personal</p>
            <P class="ccr-price-value"> <sup>$</sup>29<span>/ mo.</span> </P>
            <p class="ccr-price-quality"><em>Perfect for freelancers</em></p>
          </section>
          <section class="ccr-pricing-ul">
          <ul>
            <li class="ccr-price-freture"><i class="fa fa-asterisk"></i>1 WordPress Install</li>
            <li class="ccr-price-visitor"><i class="fa fa-star"></i>25,000 visits/mo.</li>
            <li class="ccr-price-data"><i class="fa fa-tachometer"></i>Unlimited Data Transfer</li>
            <li class="ccr-price-storage"><i class="fa fa-briefcase"></i>10GB Local Storage</li>
          </ul>
          </section>
          <section class="ccr-pricing-footer">
            <button class="ccr-price-host">Host My Website</button>
          </section>
        </div> <!-- /.ccr-pricing-table-2 -->
      </div>
      <div class="col-md-3 col-sm-6">
        <div class="ccr-pricing-table red">
          <section class="ccr-pricing-header">
            <p class="ccr-price-title">Personal</p>
            <P class="ccr-price-value"> <sup>$</sup>29<span>/ mo.</span> </P>
            <p class="ccr-price-quality"><em>Perfect for freelancers</em></p>
          </section>
          <section class="ccr-pricing-ul">
          <ul>
            <li class="ccr-price-freture"><i class="fa fa-asterisk"></i>1 WordPress Install</li>
            <li class="ccr-price-visitor"><i class="fa fa-star"></i>25,000 visits/mo.</li>
            <li class="ccr-price-data"><i class="fa fa-tachometer"></i>Unlimited Data Transfer</li>
            <li class="ccr-price-storage"><i class="fa fa-briefcase"></i>10GB Local Storage</li>
          </ul>
          </section>
          <section class="ccr-pricing-footer">
            <button class="ccr-price-host">Host My Website</button>
          </section>
        </div> <!-- /.ccr-pricing-table-3 -->
      </div>
      <div class="col-md-3 col-sm-6">
        <div class="ccr-pricing-table yellow">
          <section class="ccr-pricing-header">
            <p class="ccr-price-title">Personal</p>
            <P class="ccr-price-value"> <sup>$</sup>29<span>/ mo.</span> </P>
            <p class="ccr-price-quality"><em>Perfect for freelancers</em></p>
          </section>
          <section class="ccr-pricing-ul">
          <ul>
            <li class="ccr-price-freture"><i class="fa fa-asterisk"></i>1 WordPress Install</li>
            <li class="ccr-price-visitor"><i class="fa fa-star"></i>25,000 visits/mo.</li>
            <li class="ccr-price-data"><i class="fa fa-tachometer"></i>Unlimited Data Transfer</li>
            <li class="ccr-price-storage"><i class="fa fa-briefcase"></i>10GB Local Storage</li>
          </ul>
          </section>
          <section class="ccr-pricing-footer">
            <button class="ccr-price-host">Host My Website</button>
          </section>
        </div> <!-- /.ccr-pricing-table-4 -->
      </div>
    </div>
  </div>

Coba lihat template agan :)

Flat UI Pricing Table untuk Blogger

Next

Newer Post

Previous

Older Post

1 komentar: