Cara Membuat Tombol Download Keren di Blogger Lengkap

Daftar Isi [Tampil]

Cara Membuat Tombol Download Keren di Blogger Lengkap - Kamu punya situs download tapi gak punya tombol download yang keren untuk memikat para pengunjung? Tombol download biasa digunakan oleh para pemilik situs untuk me-redirect link download dari halamannya ke tempat download bisa seperti Playstore, Appstore, Mediafire, Googledrive atau dan lain-lainnya.

Cara Membuat Tombol Download Keren di Blogger Lengkap

Oleh karena itu di tulisan kali ini mimin akan membagikan bagaimana cara membuat tombol download keren di blogger, cocok untuk kamu yang memilki situs dengan niche download. Sudah pada penasaran bukan? ok langsung saja disimak caranya di bawah ini tentang cara membuat tombol download keren untuk blogger.

Baca Juga

Tools SEO HostzeTools: Peningkat SEO Terbaik Blog Anda - Backlink Generator
Cara Ampuh Merubah Permanen link Postingan di Blogspot Setelah di Publikasikan
Apa Itu Google Adsense?
Baru! Cara Agar Website Kita Cepat Terindeks di Situs Mesin Pencarian

Langkah-langkah Cara Membuat Tombol Download Keren di Blogger 

1. Login ke akun blogger kamu jika sudah login
2. Masuk ke menu Template --> Edit HTML
3. Lalu kalian cari tag </head> untuk mencari kode tersebut biasanya mimin ketik (CTRL + F) untuk memudahkan pencarian.
4. Setelah ketemu masukan CSS dibawah ini dan taruh kodenya tepat diatas tag </head>

<style type='text/css'>
#box-download,#box-download .box-cover,#box-download .box-cover .box-title{position:relative}#box-download .box-cover .icon-app,#box-download .link-download{position:absolute}#box-download,#box-download .box-cover,#box-download .box-cover .icon-app span,#box-download .box-cover .box-title,#box-download .label-grup,#box-download .link-download a{display:block}#box-download,#box-download .box-cover .icon-app span,#box-download .link-download a{width:100%}#box-download,#box-download .link-download a{border-radius:0.230769230769231em}#box-download{padding:1.15384615384615em;box-sizing:border-box;margin:0.384615384615385em 0;overflow:hidden;min-height:116px;border:1px solid #ddd;font-size:13px!important;max-width:50.0769230769231em;background:#FFF}#box-download a{text-decoration:none}#box-download .box-cover{min-height:6.61538461538462em;margin-right:10.0769230769231em}#box-download .box-cover .icon-app{width:75px;height:75px;top:0;left:0}#box-download .box-cover .icon-app span{background-size:100%;background-repeat:no-repeat;height:100%}#box-download .box-cover .box-title{margin-left:6.15384615384615em}#box-download .box-cover .box-title .app-title{font-weight:bold;color:#252525;font-size:150%}#box-download .box-cover .box-title .app-version{font-size:90%;color:#727171}#box-download .label-grup a{color:#666;font-size:12px}#box-download .box-cover .box-title .tag-os{overflow:hidden;display:inline-block;vertical-align:middle;width:20px;height:20px;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD5mePF0Nb8ZW10XLtjMr2_UF34whMt3ox5V0y9a3sTH3-vDqd6vwJnUneNEoiLtbHHrcYpsK2_fRog7pio0SKThFVbkbznretG9NMYHxB7Q_Dz9GK6gXjLrFn-zR-vtkNn1vqcHOVSWM7/s1600/device.png);background-repeat:no-repeat;background-size:100%;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%}#box-download .box-cover .box-title .tag-os.android{background-color:#69b344}#box-download .box-cover .box-title .tag-os.windows{background-position:0 33.33%;background-color:#1f9cf4}#box-download .box-cover .box-title .tag-os.mac{background-color:#606060;background-position:0 66.67%}#box-download .box-cover .box-title .tag-os.blackberry{background-color:#000000;background-position:0 99.99%}#box-download .link-download{max-width:9.61538461538462em;text-align:center;top:1.15384615384615em;right:1.15384615384615em;width:30%}#box-download .link-download a{padding:0.769230769230769em 0;margin-bottom:0.769230769230769em;text-transform:uppercase;color:#fafafa;font-weight:bold;font-size:100%}#box-download .link-download a:nth-child(1){background:#69b344}#box-download .link-download a:nth-child(2){background:#606060;margin:0}.link-alternative{position:relative;display:block;font-size:11px;padding:0.909090909090909em 0 0}.link-alternative:before{content:&#39;Alternative:&#39;}.link-alternative a{padding:0 0.384615384615385em 0;border-right:1px solid #bbb;color:#008efa}.link-alternative a:last-child{border:none}@media screen and (max-width:400px){#box-download .box-cover,#box-download .box-cover .icon-app,#box-download .box-cover .box-title,#box-download .link-download{margin:0 auto}#box-download .box-cover .icon-app{position:relative}#box-download .link-download{position:relative;width:100%;right:auto;margin-bottom:0.769230769230769em}}

/*ICON APP*/
.icon-app span{
  background-image:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKxzbjOl2yXG9njbcFsrKkxz69o_KG0DtGJ6BMPddV9YNosd-fsG0a7m2IfLH-akVZhnhesYj9Pxw-6DLi8SdQ2gVCS2M9XaZ-_OgGrdNWdJSsrzZkfgMPM5ztj7Qis6OsRzlK_V-XJWcB/s1600/download.png&#39;)  
}
.icon-app span.fb {
  background-image:url(&#39;https://www.facebook.com/images/fb_icon_325x325.png&#39;);
}
</style>

5. Save Template

CATATAN

ICON APP : Icon untuk app ini, nanti akan ditampilkan pada tombol downloadnya, kalian bisa menambah atau menggantinya icon lainnya sesuai keinginan anda, dengan cara:

1. Upload gambar yang ingin dijadikan icon
2. Copy linknya dan bikin css baru seperti

.icon-app span.NAMA_ICON {
  background-image:url('LINK_ICON');
}

3. Untuk nama icon jangan kasih spasi dan jangan ada yg sama, nanti bentrok

Sekarang tinggal masukin HTML Downloadnya di postingan, Caranya :

1. Masuk ke postingan yang ingin di pasang tombol downloadnya
2. Setelah di dalam postingan kalian pilih mode HTML jangan Compose
3. Setelah di mode HTML, kalian tinggal copy kode di bawah ini.

<div id="box-download">
  <div class="box-cover">
    <div class="icon-app">
      <span class="fb">
      </span></div>
      <div class="box-title">
        <span class="app-title">Facebook</span>
        <span class="app-version">231.0.0.39.113</span>
        <span class="label-grup"><span class="tag-os android"></span> <a href="#">Aplikasi Android</a></span>
        <span class="label-grup"><span class="tag-os mac"></span> <a href="#">Aplikasi iOS</a></span>
      </div>
    </div>
    <div class="link-download">
      <a href="#">Google Play</a>
      <a href="#">App Store</a>
    </div>
  </div>

Catatan

1. FB : Ganti dengan nama icon yang sudah ada didaftar pada css
2. Facebook : Ganti dengan nama aplikasi
3. 231.0.0.39.113 : Ganti dengan versi aplikasi
4. Android dan Mac : Sesuaikan dengan sistem operasi, kalian bisa menggantinya dengan windows, mac dan blackberry
5. # (Tanda Pagar) : Ganti dengan link download kalian

4. Selesai kalian bisa langsung publish atau melihat pratinjau dulu.

Menambahkan Link Download Alternatif

1. Untuk Menambahkan Download dengan link Alternatif Kalian bisa menambahkan link download dengan kodingan di bawah ini.

<div class="link-alternative">
 <a href="#">Google Drive</a>
</div>

2. Lalu hasilnya akan seperti ini

<div id="box-download">
  <div class="box-cover">
    <div class="icon-app">
      <span class="fb"></span>
    </div>
    <div class="box-title">
      <span class="app-title">Facebook</span>
      <span class="app-version">231.0.0.39.113</span>
      <span class="label-grup"><span class="tag-os android"></span> <a href="https://www.blogger.com/blogger.g?blogID=5225780329097995340#">Aplikasi Android</a></span>
      <span class="label-grup"><span class="tag-os mac"></span> <a href="https://www.blogger.com/blogger.g?blogID=5225780329097995340#">Aplikasi iOS</a></span>
    </div>
  </div>
  <div class="link-download">
    <a href="https://play.google.com/store/apps/details?id=com.facebook.katana&amp;hl=in">Google Play</a>
    <a href="https://apps.apple.com/id/app/facebook/id284882215">App Store</a>
  </div>
  <div class="link-alternative">
    <a href="https://drive.google.com/file/d/1LQ9AR9voz1sTUGEV2eIYQZmPKZq5i5XM/view?usp=sharing">Google Drive</a>
  </div>
</div>

3. Selesai

Hasilnya

Tombol download di Hostze

Kesimpulan

Tombol download ini keren dan sangat menarik untuk mempercantik web atau blog kamu yang suka berbagi aplikasi atau game di blog kamu.

Catatan

Untuk CSS dan Id jangan sampe kurang atau salah jika itu terjadi maka kodingannya tidak akan bisa berjalan sempurna atau kodingannya akan error, silahkan bertanya di kolom komentar jika ada yang tidak dimengerti dan atau terjadi error, semoga mimin dapat membantu.

Demikianlah artikel yang berjudul tentang Cara Membuat Tombol Download Keren di Blogger Lengkap semoga bermanfaat dan dapat menambah wawasan kalian semua.

Bagikan Artikel ini