 |
| Tabel Profesional Pricing |
Hari ini saya akan membagi
tips cara membuat
tabel harga profesional untuk blogger. Dimana tabel harga ini biasanya digunakan untuk layanan konten premium, tabel ini dibuat murni hanya dengan css jadi sobat tidak perlu khawatir dengan kecepatan loadingnya.
Desain tabel ini elegan dan catchy, jika sobat ingin membuat konten premium dengan tabel harga ini berikut tipsnya yang saya kutip dari
prohackertools.
- Buka Editor Template Blogger.
- Cari kode </head> (CTRL+F)
- Masukan Kode berikut diatas kode </head>
<link rel="stylesheet" href="http://plugins.granthweb.com/go/wp-content/plugins/go/assets/css/go_pricing_styles.php?ver=1.3" type="text/css" media="all"/>
- Lalu untuk memanggilnya silahkan sobat buat Post baru.
- Kemudian masukan kode HTML berikut ke dalam HTML Post.
<div class="gw-go gw-go-clearfix gw-go-enlarge-current gw-go-4cols" style="margin-bottom: 20px;"><div class="gw-go-col-wrap">
<div class="gw-go-col gw-go-blue7 gw-go-shadow5">
<div class="gw-go-header">
<img alt="" class="gw-go-responsive-img" height="144" src="http://plugins.granthweb.com/go/wp-content/uploads/2012/12/blue_71.jpg" title="" width="229" /></div><ul class="gw-go-body">
<li><span class="gw-go-icon-green-ok gw-go-icon-left"></span><span style="color: #333333;">$9 / pcs</span><span class="gw-go-tooltip" style="background: #FFFFFF; border-color: #FFFFFF; color: #333333; width: 130px;"></span></li>
<li class="gw-go-even"><span class="gw-go-icon-green-star gw-go-icon-left"></span><span style="color: #333333;">Cum at probo / minimum</span><span class="gw-go-tooltip" style="background: #FFFFFF; border-color: #FFFFFF; color: #333333; width: 130px;"></span></li><li>Falli libris has id facer<span class="gw-go-tooltip" style="background: #FFFFFF; border-color: #FFFFFF; color: #333333; width: 130px;"></span></li>
<li class="gw-go-even gw-go-has-tooltip">Pertinax vel eum ne molestie<span class="gw-go-tooltip" style="background: #FFFFFF; border-color: #FFFFFF; color: #333333; width: 130px;">Lorem ipsum dolor si amet, at ferri regione quo, quis lucilius elei vim te. Et eum omitt an menandri, hastoi mucius graeco liortis cu, inani et vis.</span></li>
<li>Taleni noluisse signiferum<span class="gw-go-tooltip" style="background: #FFFFFF; border-color: #FFFFFF; color: #333333; width: 130px;"></span></li>
</ul><div class="gw-go-footer"><a class="gw-go-btn gw-go-btn-medium" href="http://www.blogger.com/blogger.g?blogID=6013321485433460603#" target="_blank">Order Now</a></div></div></div>
<div class="gw-go-col-wrap gw-go-current"><div class="gw-go-col gw-go-blue7 gw-go-shadow4"><div class="gw-go-ribbon-left gw-go-ribbon-left-red-top">
</div><div class="gw-go-header">
<img alt="" class="gw-go-responsive-img" height="144" src="http://plugins.granthweb.com/go/wp-content/uploads/2012/12/blue_72.jpg" title="" width="229" /></div><ul class="gw-go-body">
<li><span class="gw-go-icon-green-ok gw-go-icon-left"></span><span style="color: #333333;">$13 / pcs</span><span class="gw-go-tooltip" style="background: #FFFFFF; border-color: #FFFFFF; color: #333333; width: 130px;"></span></li>
<li class="gw-go-even"><span class="gw-go-icon-green-star gw-go-icon-left"></span><span style="color: #333333;">Cum at probo / minimum</span><span class="gw-go-tooltip" style="background: #FFFFFF; border-color: #FFFFFF; color: #333333; width: 130px;"></span></li><li>Falli libris has id facer<span class="gw-go-tooltip" style="background: #FFFFFF; border-color: #FFFFFF; color: #333333; width: 130px;"></span></li>
<li class="gw-go-even gw-go-has-tooltip">Pertinax vel eum ne molestie<span class="gw-go-tooltip" style="background: #FFFFFF; border-color: #FFFFFF; color: #333333; width: 130px;">Lorem ipsum dolor si amet, at ferri regione quo, quis lucilius elei vim te. Et eum omitt an menandri, hastoi mucius graeco liortis cu, inani et vis.</span></li>
<li>Taleni noluisse signiferum<span class="gw-go-tooltip" style="background: #FFFFFF; border-color: #FFFFFF; color: #333333; width: 130px;"></span></li>
</ul><div class="gw-go-footer">
<a class="gw-go-btn gw-go-btn-large" href="http://www.blogger.com/blogger.g?blogID=6013321485433460603#" target="_blank"><span class="gw-go-btn-icon-large-white-basket gw-go-icon-left"></span>Purchase</a></div>
</div></div><div class="gw-go-col-wrap">
<div class="gw-go-col gw-go-blue7 gw-go-shadow5">
<div class="gw-go-header"><img alt="" class="gw-go-responsive-img" height="144" src="http://plugins.granthweb.com/go/wp-content/uploads/2012/12/blue_73.jpg" title="" width="229" /></div><ul class="gw-go-body"><li><span class="gw-go-icon-green-ok gw-go-icon-left"></span><span style="color: #333333;">$26 / pcs</span><span class="gw-go-tooltip" style="background: #FFFFFF; border-color: #FFFFFF; color: #333333; width: 130px;"></span></li><li class="gw-go-even"><span class="gw-go-icon-green-star gw-go-icon-left"></span><span style="color: #333333;">Cum at probo / minimum</span><span class="gw-go-tooltip" style="background: #FFFFFF; border-color: #FFFFFF; color: #333333; width: 130px;"></span></li>
<li>Falli libris has id facer<span class="gw-go-tooltip" style="background: #FFFFFF; border-color: #FFFFFF; color: #333333; width: 130px;"></span></li>
<li class="gw-go-even gw-go-has-tooltip">Pertinax vel eum ne molestie<span class="gw-go-tooltip" style="background: #FFFFFF; border-color: #FFFFFF; color: #333333; width: 130px;">Lorem ipsum dolor si amet, at ferri regione quo, quis lucilius elei vim te. Et eum omitt an menandri, hastoi mucius graeco liortis cu, inani et vis.</span></li>
<li>Taleni noluisse signiferum<span class="gw-go-tooltip" style="background: #FFFFFF; border-color: #FFFFFF; color: #333333; width: 130px;"></span></li>
</ul>
<div class="gw-go-footer">
<a class="gw-go-btn gw-go-btn-medium" href="http://www.blogger.com/blogger.g?blogID=6013321485433460603#" target="_blank">Order Now</a></div>
</div>
</div>
<div class="gw-go-col-wrap">
<div class="gw-go-col gw-go-blue7 gw-go-shadow4">
<div class="gw-go-header">
<img alt="" class="gw-go-responsive-img" height="144" src="http://plugins.granthweb.com/go/wp-content/uploads/2012/12/blue_74.jpg" title="" width="229" /></div>
<ul class="gw-go-body">
<li><span class="gw-go-icon-green-ok gw-go-icon-left"></span><span style="color: #333333;">$44 / pcs</span><span class="gw-go-tooltip" style="background: #FFFFFF; border-color: #FFFFFF; color: #333333; width: 130px;"></span></li>
<li class="gw-go-even"><span class="gw-go-icon-green-star gw-go-icon-left"></span><span style="color: #333333;">Cum at probo / minimum</span><span class="gw-go-tooltip" style="background: #FFFFFF; border-color: #FFFFFF; color: #333333; width: 130px;"></span></li>
<li>Falli libris has id facer<span class="gw-go-tooltip" style="background: #FFFFFF; border-color: #FFFFFF; color: #333333; width: 130px;"></span></li>
<li class="gw-go-even gw-go-has-tooltip">Pertinax vel eum ne molestie<span class="gw-go-tooltip" style="background: #FFFFFF; border-color: #FFFFFF; color: #333333; width: 130px;">Lorem ipsum dolor si amet, at ferri regione quo, quis lucilius elei vim te. Et eum omitt an menandri, hastoi mucius graeco liortis cu, inani et vis.</span></li>
<li>Taleni noluisse signiferum<span class="gw-go-tooltip" style="background: #FFFFFF; border-color: #FFFFFF; color: #333333; width: 130px;"></span></li>
</ul>
<div class="gw-go-footer">
<a class="gw-go-btn gw-go-btn-medium" href="http://www.blogger.com/blogger.g?blogID=6013321485433460603#" target="_blank">Order Now</a></div>
</div>
</div>
</div>
=====================================================================