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. 


Caranya hampir sama penerapan kodenya, berikut selengkapnya, namun di artikel ini saya akan menjelaskan tentang cara membuat Demo Download ada 2 cara yaitu dengan menambahkan kode CSS kebagian Template Blogger dan menambah kode html di postingan populer blog dengan mode html melainkan mode teks.

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

<head>

jika kode CSS Seperti berikut sudah ketemu 

]]><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://tekno.ayokerja.xyz/demo" rel="nofollow" target="_blank">DEMO</a>&nbsp;&nbsp;<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://tekno.ayokerja.xyz/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="tekno.ayokerja.xyz/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.com

Penutup Akhir

Mudah kan cara membuat tombol Button Demo dan Download di Blogger atau bisa juga di website , biasa tombol Button di gunakan sebagai berikut
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

Belum ada Komentar untuk "Trik cara membuat tombol Button Demo dan Download"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel