Cara Bikin Tombol Download Aplikasi di Blogger Biar Makin Keren

Punya blog yang berisi link download aplikasi? Kalau iya, pasti pengen tampilan tombol downloadnya keren dan menarik, kan? Nah, di artikel ini, aku bakal kasih tutorial lengkap cara bikin tombol download di Blogger biar lebih profesional dan bikin pengunjung betah. Selain itu, aku juga bakal bahas manfaat dan kelebihan menggunakan widget tombol download ini.

Yuk, langsung kita mulai!

Kenapa Harus Pakai Widget Tombol Download?

Sebelum masuk ke tutorialnya, kita bahas dulu kenapa penting banget punya tombol download yang menarik di blog download.

1. Memperindah Tampilan Blog

Tombol download default yang hanya berupa link teks biasa terkesan kurang menarik. Dengan widget ini, tampilan blog kamu jadi lebih rapi dan profesional, mirip dengan situs download terkenal.

2. Meningkatkan Kepercayaan Pengunjung

Desain yang bagus bikin pengunjung lebih percaya kalau link yang mereka klik aman dan bukan jebakan iklan atau malware. Ini penting banget, apalagi kalau blog kamu ingin berkembang dan punya banyak pengunjung setia.

3. Mempermudah Pengunjung Mengunduh Aplikasi

Widget ini menampilkan informasi aplikasi seperti nama, ukuran, dan tombol download yang jelas. Pengunjung jadi nggak bingung dan bisa langsung klik tombol yang mereka butuhkan.

4. Bisa Dikustomisasi Sesuai Selera

Mau warna tombolnya beda? Atau mau ganti ukuran gambarnya? Tenang, semua bisa diubah sesuai keinginan kamu. Aku bakal jelasin caranya nanti di bagian akhir.

Langkah-Langkah Membuat Tombol Download di Blogger

1. Login ke Blogger

Pertama-tama, masuk dulu ke akun Blogger kamu seperti biasa.

2. Edit HTML Tema Blogger

Pergi ke menu Tema di dashboard Blogger.
Klik Edit HTML buat mengedit kode template blog kamu.
Tekan CTRL + F buat mencari kode berikut:
```
]]></b:skin>
```

Kalau udah ketemu, tambahkan kode CSS di bawah ini tepat di atasnya:

/*design by minekel.com*/
:root{
--appbg: #ff2558 ;/*Download button background color*/
}
.dl-app{align-items:center;color:inherit;margin:5px 0 15px;display:inline-flex;position:relative;max-width:500px}
.img-app{background-size:cover;position:relative;width:140px;height:100px}
.img-app img{border-radius:15px}
.jdl-app{position:relative;font-family:arial;font-size:17px;padding-left:15px;width:100%;overflow:hidden;text-overflow:ellipsis}
.jdl-app .nm-app{font-weight:700;-webkit-box-orient:vertical;-webkit-line-clamp:2;display:-webkit-box;overflow:hidden;width:250px}
.jdl-app .ur-app{display:block;font-size:13px;opacity:.7;margin-top:-5px}
.btn-py,.btn-d1{display:inline-block;height:31px;background-color:var(--appbg);font-family:arial;font-size:14px;color:#ffffff;font-weight:400;line-height:31px;text-align:center;text-decoration:none;cursor:pointer;padding:0 15px;margin:0 5px 5px 0;border:1px solid rgba(0,0,0,.1);border-radius:.28em}

Setelah selesai, klik Simpan Tema.

3. Tambahkan Tombol Download ke Postingan

Sekarang, kita tambahkan tombol download ke dalam postingan blog.

Buat postingan baru atau edit postingan lama yang ingin kamu tambahkan tombol downloadnya.
Ubah tampilan editor ke mode HTML.

Tempelkan kode berikut di tempat yang kamu inginkan:

<div class="dl-app">
    <div class="img-app">
     <img alt="inshort pro" src="https://play-lh.googleusercontent.com/2i0pfCrsRNWr_OOfuUOBwE0_iIRxeV7lhxUmS1NHwVa_wdF72o8uW_NGWNwdoY1Q9g=w120-h120-p-k-no-nu">
     </div>
    <div class="jdl-app">
       <span class="nm-app">Inshort Pro Mod APK</span>
       <span class="ur-app">Ukuran: 43MB</span>
      <!-- Ganti tanda # dengan link download asli -->
      <div class="dl-btn">
         <a class="btn-py" href="#" >Play Store</a>
         <a class="btn-d1" href="#" >Download</a>
     </div>
     </div> 
 </div>

Ganti tanda # dengan link download asli yang kamu punya.
Klik Simpan atau Publikasikan kalau sudah selesai.

Kelebihan Widget Tombol Download Ini

Dibanding tombol download biasa, widget ini punya beberapa keunggulan, di antaranya:

1. Tampilan Lebih Menarik

Tombol download ini punya desain yang modern dan enak dipandang. Bisa bikin pengunjung lebih nyaman saat browsing di blog kamu.

2. Bisa Disesuaikan Sesuai Kebutuhan

Kamu bisa mengganti warna tombol, ukuran gambar, atau bahkan menambahkan efek hover supaya makin keren.

3. SEO Friendly

Desain yang rapi dan navigasi yang mudah bikin pengalaman pengguna lebih baik, yang berpengaruh positif ke peringkat blog kamu di mesin pencari.

4. Responsif di Semua Perangkat

Tampilan tombol ini tetap rapi di berbagai ukuran layar, baik di PC, tablet, maupun HP.

5. Mempermudah Pengguna Mengunduh Aplikasi

Pengunjung nggak perlu bingung mencari link download karena sudah jelas terlihat di tombol yang mencolok.

Cara Mengubah Warna dan Tampilan Widget

Kalau kamu mau mengubah warna tombol, cukup ubah kode warna di bagian berikut:

:root{
--appbg: #ff2558 ;/*Download button background color*/
}

Misalnya, kalau mau ganti jadi warna biru, ubah kode #ff2558 jadi #007bff.

Buat ukuran gambar lebih besar, ubah nilai width dan height pada bagian ini:

size:cover;position:relative;width:140px;height:100px}

Misalnya, kalau mau ukuran gambarnya lebih besar, ubah ja

.img-app{background-size:cover;position:relative;width:180px;height:130px}

Sesuaikan dengan kebutuhan kamu!

Kesimpulan

Membuat tombol download aplikasi di Blogger itu gampang banget kalau pakai widget ini. Selain bikin tampilan blog lebih keren, tombol ini juga mempermudah pengunjung saat mendownload aplikasi.

Dengan mengikuti langkah-langkah di atas, kamu bisa punya tombol download yang menarik dan profesional tanpa perlu skill coding yang rumit. Jangan lupa, sesuaikan warna dan desainnya supaya sesuai dengan tema blog kamu!

Kalau ada pertanyaan atau kesulitan saat pemasangan, jangan ragu buat komen di bawah! Semoga bermanfaat!

Minekel

Kategori Pilihan