Cara Membut Widget Tabel Free dan Paid Version

Kali ini admin zkrip akan memberikn tutorial Cara Membut Widget Tabel Free dan Paid Version.Widget ini akan semakin menambah estetika blog anda, terutama sekali untuk blog yang memiliki niche download template. Pastinya sangat cocok.Buat yang belum tau kegunaanya untuk apa, yakni untuk memberikan kemudahan bagi pengunjung untuk membedakan fitur yang tersedia pada versi berbayar atau gratis sebelum mendownload atau membelinya. Untuk tutorialnya bisa disimak dibawah ini.

• Masuk ke Blogger.com,pilih tema--> HTML
• Cari Kode </b:skin> lalu letakn kode berikut ini di atasnya.

/* Widget by zkrip.com*/
.zkrip-sub {
    margin-top: 15px;
       clear: both;
    display: block;
    float: left;
}
.zkrip-sub li {
margin-left: 0 !important;
}
.template_free {
    width: 49.5%;
    float: left;
}
.template_paid {
    width: 49.5%;
    float: right;
}
.template_name, .template_free, .template_paid {
    border:1px solid #FDD761;
    box-sizing: border-box;
    font-size: 13px;
    margin-bottom: 20px;
    padding:0;
    position: relative;
}
.template_free h4, .template_paid h4 {
    border-bottom:1px solid #FDD761;
    color: #4599BD;
    font-size: 20px;
    font-weight: bold;
    margin: 0;
    padding: 10px;
        text-align: center;
background:#FDD761;
}
.template_free ul {
    margin: 0;
    padding: 0;
}
.template_free li {
    border-bottom:1px solid #FDD761;
    display: block;
    float: left;
    width: 100%;
}
.free_template b, .paid_template b {
    color: #4e5563;
    float: left;
    padding: 10px;
    text-align: center;
}
b.free-but, b.paid-but {
    width: 120px;
  }
.sublocks {
    border-left:1px solid #FDD761;
    color: #7a7f7d;
    float: right;
    font-size: 14px;
    padding: 10px;
    text-align: center;
        min-width: 15px;
}
.sublocks i.fa.fa-check {
    margin-right: 0;
}
span.sublocks.green{
    background-color: #2ecc71;
    color:#fff;
}
span.sublocks.red {
    background-color: #e74c3c;
    color:#fff;
}
.template_paid ul {
    margin: 0;
    padding: 0;
}
.template_paid li {
    border-bottom:1px solid #FDD761;
    display: block;
    float: left;
    width: 100%;
}
li.free-box, li.paid-box {
    background: #4599BD;
    border-bottom: none;
    cursor: pointer;
}

• Untuk memasangnya pada postingan tinggal ganti pada mode html dan letakan kode ini sesuai selera.

<div class="zkrip-sub">
<div class="template_free">
<h4>
Free Version</h4>
<ul>
<li><span class="free_template"><b>Remove Footer Credits</b><span class="sublocks red"><i class="fa fa-times"></i></span></span>
            </li>
<li><span class="free_template"><b>One Time Payment</b>
<span class="sublocks red"><i class="fa fa-times"></i></span></span>
            </li>
<li><span class="free_template"><b>No Encrypted Scripts</b><span class="sublocks red"><i class="fa fa-times"></i></span></span>
            </li>
<li><span class="free_template"><b>Lifetime Premium Support</b><span class="sublocks red"><i class="fa fa-times"></i></span></span>
            </li>
<li><span class="free_template"><b>For Unlimited Domains</b><span class="sublocks red"><i class="fa fa-times"></i></span></span>
            </li>
<li><span class="free_template"><b>Lifetime Template Updates</b><span class="sublocks red"><i class="fa fa-times"></i></span></span>
            </li>
<li class="free-box"><a href="LINK GRATIS" target="_blank"><span class="free_template"><b class="free-but"><span class="lprice"><i class="fa fa-download"></i></span></b><span class="blocks free-txt">Download Now<br />
<span class="free-desc">Free Version</span></span></span></a>
            </li>
</ul>
</div>
<div class="template_paid">
<h4>
Premium Version</h4>
<ul>
<li><span class="paid_template"><b>Remove Footer Credits</b><span class="sublocks green"><i class="fa fa-check fa-6"></i></span></span>
            </li>
<li><span class="paid_template"><b>One Time Payment</b>
<span class="sublocks green"><i class="fa fa-check fa-6"></i></span></span>
            </li>
<li><span class="paid_template"><b>No Encrypted Scripts</b><span class="sublocks green"><i class="fa fa-check fa-6"></i></span></span>
            </li>
<li><span class="paid_template"><b>Lifetime Premium Support</b><span class="sublocks green"><i class="fa fa-check fa-6"></i></span></span>
            </li>
<li><span class="paid_template"><b>For Unlimited Domains</b><span class="sublocks green"><i class="fa fa-check fa-6"></i></span></span>
            </li>
<li><span class="paid_template"><b>Lifetime Template Updates</b><span class="sublocks green"><i class="fa fa-check fa-6"></i></span></span>
            </li>
<li class="paid-box"><a href="LINK BERBYAR" target="_blank"><span class="paid_template"><b class="paid-but"><span class="lprice">$6.95</span></b><span class="blocks paid-txt">Buy Now <i class="fa fa-shopping-cart"></i><br />
<span class="paid-desc">Premium Version</span></span></span></a>
            </li>
</ul>
</div>
</div>

• Silakan ganti keterangan diatas sesuai dengan postingan kalian.
• Simpan dan lihat hasilnya.
• Jika hasilnya agak berantakan,itu karena template kalian belum terpasang font yang sesuai,untuk mengatasinya coba letakan kode ini di atas </head>.

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'/>

• Berikut live previewnya 

Free Version

• Remove Footer Credits
• One Time Payment
• No Encrypted Scripts
• Lifetime Premium Support
• For Unlimited Domains
• Lifetime Template Updates
• Download Now
  Free Version

Premium Version

• Remove Footer Credits
• One Time Payment
• No Encrypted Scripts
• Lifetime Premium Support
• For Unlimited Domains
• Lifetime Template Updates
• $6.95Buy Now
  Premium Version

Tweet

Postingan terkait:

Ditulis Tarsisius — April 12, 2017 — 5 Comments — Tutorial