Trik cara membuat tombol Button Demo dan Download
Pada artikel sebelumnya saya sudah membuatkan sebuah tutorial Cara membuat efek loading di Blog namun pada kesempatan kali ini saya akan membuat tombol button download masih sama tips dan triknya.
Panduan cara buat Demo dan Download
Berikut ini saya akan jelaskan langkah-langkah-nya !
1. Login Dashboard Blogger
2. Buka Navigasi Blogger
3. Cari Tema
4. Tekan scroll kebawah
5. cadangkan Template Blogger terlebih dulu, karena anda harus men-cadangkan template blogger ,,,mengapa ??? "Sebab" agar jika Pengeditan Template gagal dapat mudah untuk di pulihkan kembali.
6. Edit html
7. Carilah kode di dalam Template Blogger Seperti berikut
]]><b:skin>Bisanya kode CSS di atas, ada di bawah kode berikut
jika kode CSS Seperti berikut sudah ketemu
<head>]]><b:skin>Sekarang tambahkan kode CSS Demo dan Download-nya ke dalam template Blogger atau Blogspot di atas kode yang tadi
kode css
/* Demo Download Button */
.boddbtn {text-align:center;color:#fff !important;list-style:none;margin:10px !important;padding:10px !important;font-size:14px;display:inline-block;text-decoration:none !important;clear:both;}
.boddbtn ul {padding:0;margin:0;}
.boddbtn li {list-style:none;display:inline;padding:0;margin:5px;}
.demobtn,.downloadbtn{color:#fff !important;padding:10px 15px 10px 18px;font-size:13px;font-weight:700;font-family:oswald;text-transform:uppercase;text-align:center;border-radius:3px;border:0;letter-spacing:1px;transition: all 0.2s ease-out;text-decoration:none !important;}
.demobtn {background-color: #3498db;}
.downloadbtn {background-color: #34d968}
.demobtn:hover {background-color: #2980b9;color: #fff;}
.downloadbtn:hover {background-color: #2fbd5a;color: #fff;}8. Save atau simpan template
9. Setelahnya anda di sarankan untuk menambahkan kode html-nya ke postingan yang akan di buat tombol button demo download,,buka Postingan mode html , tambahkan kode HTML berikut
Kode HTML
<div style="text-align: center;">
<ul class="boddbtn">
<li><a class="demobtn" href="https://orabisaturu.blogspot.com/demo" rel="nofollow" target="_blank">DEMO</a> <a class="downloadbtn" href="https://orabisaturu.blogspot.com/download" rel="nofollow" target="_blank">DOWNLOAD</a></li>
</ul>
</div>10. Selesai , dan lihat hasilnya sekarang bisa cek di tombol button berikut
* Cara membuat tombol button Demo saja di blogger
Kode HTML Button Demo
<div style="text-align: center;">
<ul class="boddbtn">
<li><a class="demobtn" href="https://orabisaturu.blogspot.com/demo" rel="nofollow" target="_blank">DEMO</a></li>
</ul>
</div>* Cara Buat Tombol Download saja di Blogger
Kode HTML Button Download
<div style="text-align: center;">
<ul class="boddbtn">
<li><a class="downloadbtn" href="https://orabisaturu.blogspot.com/download" rel="nofollow" target="_blank">DOWNLOAD</a></li>
</ul>
</div>* Ubah warna tombol Button
#3498db #34d968 #34d968 #2980b9 #2fbd5a * Ganti Link URL berikut dengan kebutuhan
https://orabisaturu.blogspot.comPenutup Akhir
Mudah kan cara membuat tombol Button Demo dan Download di Blogger atau bisa juga di website , biasa tombol Button di gunakan sebagai berikut
- Download file google Drive
- Download template blogger
- Demo Template Blogger
- Demo kualitas Template atau tema Blogger
Dan masih banyak kegunaannya , jadi saya kira sudah selesai , cara membuat tombol button demo download , semoga apa yang saya bagikan di halaman ini menjadi sumber tertepat dan termudah bertutorial untuk anda , terimakasih
