Cara Membuat Widget Pricing Tabel Memakai CSS

Pricing Table akan membantu Anda untuk memposting tabel harga di blog atau konten posting. Dengan menggunakan plugin ini Anda dapat membuat tabel harga atau fitur untuk produk atau layanan Anda dengan cara termudah.

FITUR :

1.  Sangat Ringan
     *  Tanpa Gambar
     *  Tanpa Javascript ( pure CSS )
2.  SEO Friendly ( menggunakan tag heading )
3.  Responsive / Mobile Friendly
4.  Terdapat 4 Pilihan Paket, beserta 1 Paket Unggulan menyoroti paket harga terbaik
5.  Dapat di Copy untuk menambah tabel baru
6.  Dukungan Tooltip
7.  Tersedia Tombol Pemesanan disertai link hidup

Untuk pemasangannya Silahkan anda masuk ke blogger.com

• Pilih Tema
• Lalu pilih Edit HTML
• Masukan Kode berikut ini diatas kode </head>

<style> #pricing-table { text-align: center; } #pricing-table .plan { font: 12px 'Lucida Sans', 'trebuchet MS', Arial, Helvetica; text-shadow: 0 1px rgba(255,255,255,.8); background: #fff; border: 1px solid #ddd; color: #333; padding: 20px; width: 180px; float: left; position: relative; } #pricing-table #most-popular { z-index: 2; top: -13px; border-width: 3px; padding: 30px 20px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 20px 0 10px -10px rgba(0, 0, 0, .15), -20px 0 10px -10px rgba(0, 0, 0, .15); -webkit-box-shadow: 20px 0 10px -10px rgba(0, 0, 0, .15), -20px 0 10px -10px rgba(0, 0, 0, .15); box-shadow: 20px 0 10px -10px rgba(0, 0, 0, .15), -20px 0 10px -10px rgba(0, 0, 0, .15); } #pricing-table .plan:nth-child(1) { -moz-border-radius: 5px 0 0 5px; -webkit-border-radius: 5px 0 0 5px; border-radius: 5px 0 0 5px; } #pricing-table .plan:nth-child(4) { -moz-border-radius: 0 5px 5px 0; -webkit-border-radius: 0 5px 5px 0; border-radius: 0 5px 5px 0; } /* --------------- */ #pricing-table h3 { font-size: 20px; font-weight: normal; padding: 20px; margin: -20px -20px 50px -20px; background-color: #eee; background-image: -moz-linear-gradient(#fff,#eee); background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee)); background-image: -webkit-linear-gradient(#fff, #eee); background-image: -o-linear-gradient(#fff, #eee); background-image: -ms-linear-gradient(#fff, #eee); background-image: linear-gradient(#fff, #eee); } #pricing-table #most-popular h3 { background-color: #ddd; background-image: -moz-linear-gradient(#eee,#ddd); background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ddd)); background-image: -webkit-linear-gradient(#eee, #ddd); background-image: -o-linear-gradient(#eee, #ddd); background-image: -ms-linear-gradient(#eee, #ddd); background-image: linear-gradient(#eee, #ddd); margin-top: -30px; padding-top: 30px; -moz-border-radius: 5px 5px 0 0; -webkit-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0; } #pricing-table .plan:nth-child(1) h3 { -moz-border-radius: 5px 0 0 0; -webkit-border-radius: 5px 0 0 0; border-radius: 5px 0 0 0; } #pricing-table .plan:nth-child(4) h3 { -moz-border-radius: 0 5px 0 0; -webkit-border-radius: 0 5px 0 0; border-radius: 0 5px 0 0; } #pricing-table h3 span { display: block; font: bold 25px/85px Georgia, Serif; color: #777; background: #fff; border: 5px solid #fff; height: 100px; width: 100px; margin: 10px auto -65px; -moz-border-radius: 100px; -webkit-border-radius: 100px; border-radius: 100px; -moz-box-shadow: 0 5px 20px #ddd inset, 0 3px 0 #999 inset; -webkit-box-shadow: 0 5px 20px #ddd inset, 0 3px 0 #999 inset; box-shadow: 0 5px 20px #ddd inset, 0 3px 0 #999 inset; } /* --------------- */ #pricing-table ul { margin: 20px 0 0 0; padding: 0; list-style: none; } #pricing-table li { border-top: 1px solid #ddd; padding: 10px 0; } /* --------------- */ #pricing-table .signup { position: relative; padding: 8px 20px; margin: 20px 0 0 0; color: #fff; font: bold 14px Arial, Helvetica; text-transform: uppercase; text-decoration: none; display: inline-block; background-color: #72ce3f; background-image: -moz-linear-gradient(#72ce3f, #62bc30); background-image: -webkit-gradient(linear, left top, left bottom, from(#72ce3f), to(#62bc30)); background-image: -webkit-linear-gradient(#72ce3f, #62bc30); background-image: -o-linear-gradient(#72ce3f, #62bc30); background-image: -ms-linear-gradient(#72ce3f, #62bc30); background-image: linear-gradient(#72ce3f, #62bc30); -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; text-shadow: 0 1px 0 rgba(0,0,0,.3); -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 2px 0 rgba(0, 0, 0, .7); -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 2px 0 rgba(0, 0, 0, .7); box-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 2px 0 rgba(0, 0, 0, .7); } #pricing-table .signup:hover { background-color: #62bc30; background-image: -moz-linear-gradient(#62bc30, #72ce3f); background-image: -webkit-gradient(linear, left top, left bottom, from(#62bc30), to(#72ce3f)); background-image: -webkit-linear-gradient(#62bc30, #72ce3f); background-image: -o-linear-gradient(#62bc30, #72ce3f); background-image: -ms-linear-gradient(#62bc30, #72ce3f); background-image: linear-gradient(#62bc30, #72ce3f); } #pricing-table .signup:active, #pricing-table .signup:focus { background: #62bc30; top: 2px; -moz-box-shadow: 0 0 3px rgba(0, 0, 0, .7) inset; -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .7) inset; box-shadow: 0 0 3px rgba(0, 0, 0, .7) inset; } /* --------------- */ .clear:before, .clear:after { content:""; display:table } .clear:after { clear:both } </style>

Lalu Simpan

Untuk pemasangan widgetnya, silahkan anda masuk ke Tata Letak >> Tambahkan gadget >>
HTML/Javascript lalu pastekan kode dibawah ini :
Atau bisa juga anda menyimpan widgetnya di Postingan, klo di postingan silahkan pilih Postingan >> Entri Baru >> Pilih HTML ( bukan Compose ) Patekan Kode dibawah ini :

<div class="clear" id="pricing-table"> <div class="plan"> <h3> Orang Tajir<span class="harga">$59</span></h3> <a class="signup" href="http://kotakwidget.blogspot.co.id/" rel="nofollow" target="_blank">Sign up</a> <br /> <ul> <li><b>10GB</b> Disk Space</li> <li><b>100GB</b> Monthly Bandwidth</li> <li><b>20</b> Email Accounts</li> <li><b>Unlimited</b> subdomains</li> </ul> </div> <div class="plan" id="most-popular"> <h3> Okelah<span class="harga">$29</span></h3> <a class="signup" href="http://kotakwidget.blogspot.co.id/" rel="nofollow" target="_blank">Sign up</a> <br /> <ul> <li><b>5GB</b> Disk Space</li> <li><b>50GB</b> Monthly Bandwidth</li> <li><b>10</b> Email Accounts</li> <li><b>Unlimited</b> subdomains</li> </ul> </div> <div class="plan"> <h3> Biasa<span class="harga">$19</span></h3> <a class="signup" href="http://kotakwidget.blogspot.co.id/" rel="nofollow" target="_blank">Sign up</a> <br /> <ul> <li><b>3GB</b> Disk Space</li> <li><b>25GB</b> Monthly Bandwidth</li> <li><b>5</b> Email Accounts</li> <li><b>Unlimited</b> subdomains</li> </ul> </div> <div class="plan"> <h3> Kere<span class="harga">$9</span></h3> <a class="signup" href="http://kotakwidget.blogspot.co.id/" rel="nofollow" target="_blank">Sign up</a> <br /> <ul> <li><b>1GB</b> Disk Space</li> <li><b>10GB</b> Monthly Bandwidth</li> <li><b>2</b> Email Accounts</li> <li><b>Unlimited</b> subdomains</li> </ul> </div> </div>

Keterangan warna:

• Hijau : Judul Paket
• Kuning : Harga Paket
• Ungu : Tombol Beli/Pesan
• Merah & Orange :Deskripsi Paket

Simpan, lalu lihat hasilnya.

Cukup sekian untuk kali ini, jangan lupa cek widget-widget lainnya agar blog anda semakin keren dan menambah traffic blog anda.

"Salam Satu Widget"

Sumber : http://www.kodejarwo.com