Cara Membuat Tombol Demo dan Download keren Di Blog

Cara Membuat Tombol Demo dan Download keren Di Blog

Halo Gaiss, selamat datang di SingaAsgar disini saya akan memberitahu cara menambahkan beberapa tombol demo dan unduh di postingan atau di halaman blog kita. 

Tentang tombol Demo dan Download

Dalam tutorial ini kita akan belajar cara membuat demo yang keren. Tombol sangat penting dalam postingan blog kita, bagi anda yang mempunyai blog yang sering membutuhkan tombol download untuk mendownload file atau aplikasi, denga dibuatnya tombol ini akan membuat postingan atauu halaman anda menjadi lebih keren tentunya ya sob!

Keuntungan dari tombol demo dan unduh

Jika situs web Anda menyediakan produk digital, atau Anda memiliki situs web afiliasi maka Anda memerlukan tombol untuk semua produk ini, dengan tombol tersebut situs web Anda tidak akan terlihat profesional dan terlihat buruk. Itulah mengapa saya sangat menyarankan Anda untuk menambahkan tombol unduh di situs web Anda, dengan tombol tersebut situs web Anda akan terlihat lebih profesional dan indah. Itu sebabnya saya sangat menyarankan Anda untuk menggunakan tombol demo dan unduh pada posting blog Anda.

Langkah:

1. Buka Blogger.
2. Kemudian Klik HTML.
3. Sebelum melakukan perubahan apa pun, saya sangat menyarankan Anda untuk membuat cadangan blog Anda, Dengan mengklik "cadangan".
4. Setelah itu Klik Edit HTML.
5. Cari ]]> </ b: skin> . dengan cara tekan ctrl F kemuadian masukan ke kolom pencarian
6. Kemudian Salin Code dibawah ini Tempel Diatasnya.

    #btn-sdesign {margin: 10px auto;
   
   text-align: center;}
   
   #btn-sdesign br {display: none;}
   
   .btn-sdesign1 {position: relative;display: inline-block;height: 50px;width: 200px;line-height: 50px;padding: 0;border-radius: 7px;background:linear-gradient(225deg,#4285f4 0,#1a73e8 75%);margin: 10px;transition: .5s}
   
   .btn-sdesign2 {position: relative;display: inline-block;height: 50px;width: 200px;line-height: 50px;padding: 0;border-radius: 7px;background:linear-gradient(225deg,#4285f4 0,#1a73e8 75%);margin: 10px;transition: .5s}
   
   .btn-sdesign3 {position: relative;display: inline-block;height: 50px;width: 200px;line-height: 50px;padding: 0;border-radius: 7px;background:linear-gradient(225deg,#4285f4 0,#1a73e8 75%);margin: 10px;transition: .5s}
   
   .btn-sdesign1:hover {background-color:linear-gradient(225deg,#4285f4 0,#1a73e8 75%);}
   
   .btn-sdesign2:hover {background-color:linear-gradient(225deg,#4285f4 0,#1a73e8 75%);}
   
   .btn-sdesign3:hover {background-color:linear-gradient(225deg,#4285f4 0,#1a73e8 75%);}
   
   .btn-sdesign1:hover span.circle, .btn-sdesign2:hover span.circle2, .btn-sdesign3:hover span.circle3 {left: 100%;border-radius: 100%;margin-left: -45px;background-color: transparent;}
   
   .btn-sdesign1:hover span.circle{color: #fff;}
   
   .btn-sdesign2:hover span.circle2 {color: #fff;}
   
   .btn-sdesign3:hover span.circle3 {color: #fff;}
   
   .btn-sdesign1:hover span.title, .btn-sdesign2:hover span.title2, .btn-sdesign3:hover span.title3 {left: 40px;opacity: 0;}
   
   .btn-sdesign1:hover span.title-hover, .btn-sdesign2:hover span.title-hover2, .btn-sdesign3:hover span.title-hover3 {opacity: 1;left: 40px;}
   
   .btn-sdesign1 span.circle {display: block;background-color: #fff;color: #1a73e8;position: absolute;float: left;margin: 5px;line-height: 55px;height: 40px;width: 40px;top: 0;left: 5px;transition: .5s;border-radius: 100%;}
   
   .btn-sdesign2 span.circle2 {display: block;background-color: #fff;color: #1a73e8;position: absolute;float: left;margin: 5px;line-height: 55px;height: 40px;width: 40px;top: 0;left: 5px;transition: .5s;border-radius: 100%;}
   
   .btn-sdesign3 span.circle3 {display: block;background-color: #fff;color: #1a73e8;position: absolute;float: left;margin: 5px;line-height: 55px;height: 40px;width: 40px;top: 0;left: 5px;transition: .5s;border-radius: 100%;}
   
   .btn-sdesign1 span.title,.btn-sdesign1 span.title-hover, .btn-sdesign2 span.title2,.btn-sdesign2 span.title-hover2,.btn-sdesign3 span.title3, .btn-sdesign3 span.title-hover3 {position: absolute;left: 90px;text-align: center;margin: 0 auto;font-size: 16px;font-weight: bold;color: #fff;transition: .5s;}
   
   .btn-sdesign2 span.title2,.btn-sdesign2 span.title-hover2 {color: #fff;left: 70px;}
   
   .btn-sdesign3 span.title3,.btn-sdesign3 span.title-hover3 {color: #fff;left: 60px;}
   
   .btn-sdesign1 span.title-hover, .btn-sdesign2 span.title-hover2, .btn-sdesign3 span.title-hover3 {left: 80px;opacity: 0;}
   
   .btn-sdesign1 span.title-hover, .btn-sdesign2 span.title-hover2, .btn-sdesign3 span.title-hover3 {
   
   color: #fff;
   
   }

7. Kemudian download File berikut dan buat postingan. Masukan kode yang telah kalian download  di HTML postingan. Dan lihat dengan klik Pratinjau apakah Work atau tidak, jika berhasil tampilannya akan seperti berikut .Selamat mencoba :)

Oke gaiss sekian aja dari saya jika ada yang kurang dipahami silakan untuk berkomentar di bawah yaa atau menghubungi admin lewat Contact Us.