Hello sobat Bloggermuda 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 tombol khusus yang di buat khusus untuk mengarahkan klik ke halaman order atau transaksi pembayaran 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 pada barang yang kita jual tersebut
Tampilan Keren
Tombol buy dan preview di blogger ini sangat keren dan juga responsive, hanya di buat menggunakan kode CSS dan kode HTML sebagai kode dasar dalam pembuatan nya, itulah mengapa tampilan tombol buy 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 Bloggermuda 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
Pasang Font Awesome
Langkah pertama silahkan kamu pasang script font awesome di bawah ini, kemudian letakkan di atas kode </head> atau sebelum kode </head>
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>Penting : Jika font Awesome nya sudah terpasang silahkan skip aja ke tahapan berikutnya 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>
</div>
</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