Download and Buy Buttons On The Blog Sidebar


Button download di sidebar saat ini lebih banyak digunakan oleh para penjual dan penyedia template, sebenarnya fungsinya sama, namun hasilnya berbeda, karena pembaca bisa lebih mudah mengklik, namun tergantung selera anda, button download ini hanya berjalan di blog template non AMP, untuk blog AMP sendiri saya belum coba hehe..bagi anda yang ingin mencoba di template AMP silahkan dicoba,

Button download dan Buy ini dibuat oleh creator templatezy,backgroundnya sendiri menggunakan warna orange dan menambahkan gambar kartu kredit dan paypal,silahkan di lihat hasilnya, saya menggunakan jss fiddle

Button Dowload dan Buy Di Sidebar Blog





Langkah Pertama
Silahkan tambahkan css dibawah ini pada css blog anda.

/*------------------Demo Buttons-----------------------*/
.demotab{margin:auto;width:150px;}
.demo-buttons{background: none repeat scroll 0 0 #6aaf73;border-radius: 4px;}
.demo-buttons{box-shadow:0 0 4px 0 rgba(50, 50, 50, 0.05);display:inline-block;font-family:Lato,sans-serif;font-size:16px;font-weight:700;margin-top:0px;padding:6px 23px 7px;text-align:center;transition:none 0s ease 0s;}
a.demo-buttons{color:#fff;}
/*------------------Demo Download Buttons-----------------------*/
.buy_theme{background:#fafafa none repeat scroll 0 0;border:1px solid #ebebeb;float:left;margin-bottom:-35px;margin-top:70px;padding:20px 15px 8px}
ul.buyer-features li{border-bottom:1px solid #e2c952;font-size:14px;margin:7px 0 0 -46px;padding:3px 30px 10px 13px}
ul.buyer-features{list-style-type:none;margin-left:0}
.free_version{background:#fdd761 none repeat scroll 0 0;border:1px solid #ebebeb;float:left;margin-bottom:-10px;margin-top:0;padding:20px 15px 15px}
.license_version .down_but{background:#f06486 none repeat scroll 0 0!important}
.license_version::after{background:transparent none repeat scroll 0 0;border:1px solid #ebebeb;bottom:366px;color:#6c6c6c;content:"";float:left;font-size:12px;font-weight:600;height:16px;left:-12px;padding:0;position:relative;text-align:center;transform:rotate(16deg)}
.license_version{background:#fdd761 url(http://2.bp.blogspot.com/-imsi4iFC6mo/VkDz1S-oolI/AAAAAAAAAeo/CTQefRAXuw8/s1600/payment-options.png) no-repeat scroll center top -20px;border:1px solid #ebebeb;float:left;margin-bottom:-10px;margin-top:40px;padding:90px 15px 15px;width:278px}
.theme_head{margin-bottom:10px;overflow:hidden}
.theme_price span{color:#4e5563;float:left;font-family:arial;font-size:31px;font-weight:700;line-height:45px;text-transform:uppercase}
.template_name{background:#fafafa none repeat scroll 0 0;border:1px solid #ebebeb;box-sizing:border-box;float:left;font-size:13px;margin-bottom:25px;margin-top:40px;padding:7% 0 0;position:relative;width:100%}
.template_name h3{border-bottom:1px solid #ebebeb;color:#4e5563;font-size:20px;font-weight:700;margin:0;padding-bottom:17px;padding-left:72px;padding-right:74px}
.template_name ul{margin:0;padding:0}
.template_name li{border-bottom:1px solid #ebebeb;display:block;float:left;width:100%}
.detail_template b{border-right:1px solid #ebebeb;color:#4e5563;float:left;padding:15px;text-align:center;width:60px}
.blocks{color:#7a7f7d;float:left;font-size:14px;padding:15px}
.down_but{background:#6aaf73 none repeat scroll 0 0;border-radius:4px;color:#fff;cursor:pointer;display:inline-block;float:right;font-size:15px;font-weight:700;letter-spacing:1px;padding:10px 23px;text-align:center;text-decoration:none;transition:all .25s linear 0}
a.down_but{color:#fff}
.theme_desc{font-size:14px;line-height:18px;margin-top:10px}
.license_version .fa {
color: #555552;
}

Silahkan sesuaikan dengan keinginan anda, warna,font dan lainnya.

Langkah Kedua
Tambahkan HTML berikut pada saat membuat postingan pada mode html, untuk menampilkan di sidebar saya pernah bahas sebelumnya


<div class="template-detail">
<div id="theme-detail">
<div class="theme-buyer">
<div class="free_version">
<div class="theme_head">
<div class="theme_price">
<span>Free</span><a class="down_but" href="https://sites.google.com/site/iconmagtheme/IconMag_Theme.rar?" rel="nofollow" target="_blank">Download FREE</a></div>
</div>
<div class="theme_desc">
Get this template for FREE with giving proper credits to us, no support included.</div>
</div>
<div class="license_version">
<div class="theme_head">
<div class="theme_price">
<span>$6.99</span><a class="down_but" href="https://www.2checkout.com/checkout/purchase?sid=102474232&quantity=1&product_id=16" rel="nofollow" target="_blank">Buy This Theme</a></div>
</div>
<ul class="buyer-features">
<li><i class="fa fa-check"></i>Remove Footer credits</li>
<li><i class="fa fa-check"></i>One Time Payment</li>
<li><i class="fa fa-check"></i>For Unlimited Domains</li>
<li><i class="fa fa-check"></i>Get Premium Support</li>
<li><i class="fa fa-check"></i>Remove Encrypted Scripts</li>
<li>
<i class="fa fa-check"></i>Regular Template Updates</li>
<li><i class="fa fa-check"></i>And Much More...</li>
</ul>
</div>
<div class="template_name">
<h3>
Template Details</h3>
<ul>
<li><span class="detail_template"><b>Name: </b><span class="blocks">IconMag-Portfolio Theme</span></span></li>
<li><span class="detail_template"><b>Version:</b>  <span class="blocks">3.0</span></span></li>
<li><span class="detail_template"><b>Utility: </b><span class="blocks">Theme Files, PSD &amp; Docs</span></span></li>
<li><span class="detail_template"><b>Release: </b><span class="blocks">08 / 01 / 2015</span></span></li>
</ul>
</div>

Silahkan sesuaikan dengan url,link download,link order template dan lainnya, untuk membuat link button paypal silahkan baca postingan sebelumnya.

Reaksi:
Share this with short URL:

You Might Also Like:

Use parse tool to easy get the text style on disqus comments:
Show Parser Hide Parser