For world peace, liberate Al-Aqsa, eliminate Israel and anyone who is with Israel, they are the real terrorists
Bacakan

Membuat tombol buy dan preview seperti Goomsite

Hello sobat icloudZer kali ini admin akan memberikan informasi mengenai bagaimana caranya membuat tombol beli dan preview seperti pada template Goomsite, yang mana tombol buy dan preview tersebut bisa di terapkan di semua jenis template

Buy and preview

Tombol buy dan preview di blogger merupakan dua tombol yang di selipkan sebuah link direct yang di desain dengan tampilan responsive dan juga sederhana, tombol buy dan preview di blogger ini mengadaptasi dari tombol buy dan preview seperti yang ada pada template Goomsite.net

Fungsi Tombol

Banyak sekali fungsi tombol Buy and preview semisal anda menjual barang di dalam blog anda semisal template ataupun yang lainnya, pastinya anda akan membutuhkan tombol beli dan juga tombol preview di blog anda untuk memastikan pelanggan dalam barang yang kita jual tersebut

Tampilan Keren

Tombol beli dan preview di blogger ini sangat keren dan juga responsive, hanya di buat menggunakan kode CSS dan kode HTML sebagai dasar kode dalam pembuatan nya, itulah mengapa tampilan tombol beli dan preview tersebut sangat responsive dan keren pastinya, anda juga bisa mengubah judul pada setiap tombol yang ada dan menyematkan berbagai link yang di inginkan di dalam tombol tersebut

Contoh Tampilan

Untuk memastikan anda dan tidak membuat anda penasaran silahkan lihat bagaimana contoh tampilan tombol buy dan preview di blogger yang mirip dengan tombol buy dan preview seperti blog Goomsite.com

Info: Keren kan sobat icloudZer tombol buy dan preview nya, silahkan di gunakan selagi gratis hahaha

Cara penggunaan

Baiklah sobat sekarang saatnya admin bakalan menjabarkan mengenai bagaimana caranya membuat tombol buy dan tombol preview di blogger, pelajari melalui artikel berikut ini hingga selesai ok

Koode CSS

Langkah pertama yang bisa kamu gunakan untuk membuat tombol buy dan preview seperti blog Goomsite.net, kamu bisa langsung menyalin kode CSS di bawah ini kemudian letakkan di atas kode ]]></b:skin>

#__rah-btnprice{float:none}
.__rah-pricetheme{padding:0 21px 25px}
.__rah-buttonprice{height:auto;display:flex;-flex-flow:row wrap;font-size:11px;font-weight:500;text-transform:uppercase;flex-flow:row wrap;margin:0 -5px;overflow:hidden}
.__rah-buttonprice a.bts{max-width:50%;box-sizing:border-box;padding:0 5px;-webkit-box-flex:1;flex:1 50%;margin:0 auto;position:relative;overflow:hidden}
.__rah-buttonprice a.__rah-btndemo{text-align:right}
.__rah-btndemo span.clasbtn:before,.__rah-buynow span.clasbtn:before{width:18px;height:18px;display:flex;line-height:18px;border-radius:50px;font-size:8px;font-family:Fontawesome;font-weight:900;margin-right:5px}
.__rah-buynow span.clasbtn:before{content:'\f07a';color:#ffffff;background:#03a44f;align-items:center;justify-content:center}
.__rah-btndemo span.clasbtn:before{content:'\f06e';color:#3d4bdc;background:#f7cc66;padding:5px;align-items:center;justify-content:center}
.__rah-buttonprice a:active,span.icons i:active,span.idbtn{color:#ffffff}span.idbtn{background:#3d4bdc}
span.clasbtn:hover{opacity:.9;}
span.clasbtn:active{background-color:#a3ebc5;color:#000000}span.clasbtn{text-align:center}
.is-post span.clasbtn{padding:5px 30px}span.clasbtn{font-weight:800;padding:4px;transition:.2s linear;display:flex;justify-content:center;align-items:center;background:#f7cc66;width:100%;color:#333333;-webkit-border-radius:5px);-moz-border-radius:5px);border-radius:5px)}span.icons:hover i{color:#ffffff}span.icons i{color:#3d4bdc}
.buttonprice a:active,span.icons i:active,span.idbtn{color:#ffffff}span.idbtn{background:#3d4bdc}

Info: Atau gunakan tag kode <style> untuk meletakkan kode CSS di atas

Kode HTML

Langkah selanjutnya adalah di saat kamu ingin menampilkan tombol buy dan preview nya kamu bisa menggunakan kode HTML di bawah ini

<div id='__rah-btnprice'>
 <div class='__rah-pricetheme'>
<div class='__rah-buttonprice'>
 <a class='bts __rah-buynow' href='link-link' title='Buy Now'>
<span class='clasbtn icons'>
 <span class='text'>
Buy Now
 </span>
</span>
 </a>
 <a class='bts __rah-btndemo' href='link_link' rel='noopener nofollow' target='_blank'>
<span class='clasbtn idbtn'>
 <span class='text'>
Preview
 </span>
</span>
 </a>
</div>

Info: Kamu harus meletakkan kode HTML di atas pada mode HTML di dalam Artikel jangan mode compose alias mode text di dalam artikel ok



About the Author

Keindahanmu akan kuabadikan disetiap karyaku.

إرسال تعليق

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.