Cara Membuat Tombol Download Keren di Blog

Cara membuat tombol download pada blog sangatlah mudah dan simpel, hampir sama dengan membuat link biasa. Dalam sebuah web atau blog yang menyajikan file seperti dokumen, folder zip, atau aplikasi biasanya menggunakan tombol download untuk mengunduh file tersebut.

Cara Membuat Tombol Download Keren di Blog

Banyak blogger yang membuat button download di blognya dengan tujuan agar terlihat lebih menarik dan memberikan kesan yang berbeda dibanding dengan link biasa. Namun, agar tombol download terlihat keren dan menarik, tentunya perlu adanya script tambahan, terutama pada bagian CSS dari template blog tersebut. Hal itu karena dengan sentuhan CSS tersebut lah yang akan membuat button download terlihat berbeda dari link biasa.
Sebenarnya tutorial tentang bagaimana cara membuat tombol download di blog sudah banyak bersebaran di Google, tinggal kita ingin membuat button download seperti apa yang akan diterapkan di blog. Dan pada kesempatan kali ini, admin akan memberikan tutorial tentang cara membuat button download atau tombol download yang keren pada blog.

Ada 3 macam tombol download yang akan disajikan pada artikel ini beserta dengan demo nya. Admin memberikan beberapa pilihan karena untuk menyesuaikan dengan template blog yang kalian gunakan dan tentunya sesuai selera kalian.

Cara Memasang Tombol Download Keren di Blog

Untuk cara pasang button download ada dibawah ini, berikut script CSS dan HTML nya. Dan untuk preview nya admin jadikan satu di blog khusus untuk percobaan ini. Simak baik-baik langkah berikut.

1. Login ke akun Blogger kalian

2. Pilih Tema > Edit HTML

3. Lalu cari kode ]]></b:skin> atau </style>, gunakan Ctrl+F untuk mempermudah pencarian

4. Letakkan kode script CSS diatas kode ]]></b:skin> atau </style>

Cara Membuat Tombol Download Keren di Blog

NB : Jika di template blog belum terpasang font awesome, tambahkan script dibawah ini diatas kode </head>. Namun jika sudah ada, tidak perlu ditambahkan lagi.
Cara Membuat Tombol Download Keren di Blog

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

5. Setelah itu simpan template

Cara menggunakan Tombol Download di Blog

Setelah kode CSS terpasang pada template blog, sekarang tinggal menggunakan tombol download ini. Lalu bagaimana cara menggunakan tombol download nya ? berikut langkah-langkahnya.

1. Buat artikel seperti biasa

2. Jika sudah selesai, ubah mode Compose ke mode HTML

Cara Membuat Tombol Download Keren di Blog

3. Kemudian masukkan kode HTML yang admin berikan

4. Ubah URL DOWNLOAD dengan link download kalian

5. Setelah itu artikel siap di publikasikan.

Dan dibawah ini adalah kode CSS dan pasangan kode HTML nya

Tombol Download 1


Kode CSS

/* Tombol Download */
.buttonDownload {
 border-radius: 3px;
 display: inline-block;
 position: relative;
 padding: 10px 25px;
 background-color: #026A2A;
 color: white !important;
 font-weight: bold; 
 font-size: 0.9em;
 text-align: center;
 text-indent: 15px;
 transition:all 0.4s;
 -moz-transition:all 0.4s;
 -webkit-transition:all 0.4s;
}
.buttonDownload:hover {
 opacity: .85;
}
.buttonDownload::before, .buttonDownload::after {
 content: ' ';
 display: block;
 position: absolute;
 left: 15px;
 top: 52%;
}
.buttonDownload::before {
 width: 10px;
 height: 2px;
 border-style: solid;
 border-width: 0 2px 2px;
}
.buttonDownload::after {
 width: 0;
 height: 0;
 margin-left: 3px;
 margin-top: -7px;
 border-style: solid;
 border-width: 4px 4px 0 4px;
 border-color: transparent;
 border-top-color: inherit;
 animation: downloadArrow 2s linear infinite;
 animation-play-state: paused;
}
.buttonDownload:hover::after {
 animation-play-state: running;
}
@keyframes downloadArrow {
 0% {
  margin-top: -7px;
  opacity: 1;
 }
 0.001% {
  margin-top: -15px;
  opacity: 0;
 }
 50% {
  opacity: 1;
 }
 100% {
  margin-top: 0;
  opacity: 0;
 }
}
Kode HTML


<a class="buttonDownload" href="URL-DOWNLOAD" target="_blank">Download</a></div>

Tombol Download 2


Kode CSS

#wrap { margin:20px auto; text-align:center; }
#wrap br { display:none; }
.bie-slide,.bie-slide2 { position:relative; display:inline-block; height:50px; width:200px; line-height:50px; padding:0; border-radius:50px; background:#fdfdfd; border:2px solid #026A2A; margin:10px; transition:.5s; }
.bie-slide2 { border:2px solid #026A2A; }
.bie-slide2:hover { background-color:#026A2A; }
.bie-slide2:hover span.circle2 { left:100%; margin-left:-45px; background-color:#fdfdfd; color:#026A2A; }
.bie-slide2:hover span.circle2 { color:#026A2A; }
.bie-slide2:hover span.title2 { left:40px; opacity:0; }
.bie-slide2:hover span.title-hover2 { opacity:1; left:40px; }
.bie-slide2 span.circle2 { display:block; background-color:#F9690E; color:#fff; position:absolute; float:left; margin:5px; line-height:42px; height:40px; width:40px; top:0; left:0; transition:.5s; border-radius:50%; }
.bie-slide2 span.circle2 { background-color:#026A2A; }
.bie-slide2 span.title2,.bie-slide2 span.title-hover2 { position:absolute; left:90px; text-align:center; margin:0 auto; font-size:16px; font-weight:bold; color:#026A2A; transition:.5s; }
.bie-slide2 span.title2,.bie-slide2 span.title-hover2 { color:#026A2A; left:80px; }
.bie-slide2 span.title-hover2 { left:80px; opacity:0; }
.bie-slide2 span.title-hover2 { color:#fff; }
Kode HTML

<div id="wrap" style="text-align: center;">
<a class="bie-slide2" href="URL-DOWNLOAD" target="_blank">
  <span class="circle2"><i class="fa fa-download"></i></span>
  <span class="title2">Download</span>
  <span class="title-hover2">Klik disini</span></a>
</div>

Tombol Download 3


Kode CSS

.buttonx{display:inline-flex;cursor:pointer;font-size:13px;font-weight:bold;text-transform:uppercase;box-shadow:0 1px 2px rgba(0,0,0,.2);color:#FFF!important;border:2px solid #FFF!important;background-color:#026A2A!important;background:0;margin:5px 0;padding:8px 25px;text-shadow:none!important;transition:all 0s!important} .buttonx:hover{background-color:
Kode HTML

<a class="buttonx" href="URL-DOWNLOAD" target="_blank">Download</a></div>
Berikut demo tombol download, klik button Demo dibawah ini.


Demikian tutorial mengenai cara membuat dan memasang tombol download keren di blog. Jika dari kalian ada yng masih merasa kesulitan atau kebingungan, silahkan tanyakan di kolom komentar atau melalui form Kontak Admin. Terimakasih dan semoga bermanfaat.

Artikel Terkait

Buka Komentar
Tutup Komentar

Belum ada Komentar untuk "Cara Membuat Tombol Download Keren di Blog"

Posting Komentar

Jika ada yang masih kurang jelas, silahkan untuk bertanya pada kolom komentar di bawah ini atau dengan menghubungi kami di halaman kontak.

1. Centang kotak Notify me/Beri tahu saya untuk mendapatkan notifikasi komentar.
2. Semua komentar dengan menambahkan link akan dihapus dan tidak akan dipublikasikan.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel