Cara Membuat Tombol Download Keren Dan Mudah.

Cara Membuat Tombol Download Keren Dan Mudah.

Cara Membuat Tombol Download Keren Dan Mudah - Jika Anda mempunyai blog berisikan app atau lagu bahkan video, yang jelas pasti akan memerlukan tombol download buat para pengunjung. Sebenarnya banyak sekali dipencarian contoh script tombol download yang dapat digunakan. Saya sendiri pun mengambil cara ini juga dari pencarian google. Dan saya mengambil script ini tepatnya dari web cronosal.blogspot.com.

Di artikel kali ini Saya berniat untuk berbagi serta melengkapi artikel di blog ini. Karena Saya sendiri sering lupa cara membuatnya. Heheheee...

Contoh tombol download yang dihasilkan nantinya akan seperti ini.

Saya memilih script ini karena tombol yang dihasilkan terlihat bersih dan elegan, apakah Anda juga berpikir demikian???

Baiklah langsung saja kita menuju ke proses pembuatannya.

Cara Agar Blog Baru Cepat Ter- Index Oleh Google

Cara Membuat Tombol Download Keren Dan Mudah.

* Pertama-tama buatlah artikel seperti biasanya.

* Dan untuk menempatkan tombol download seperti diatas pilih Mode HTML pada penulisan Artikel lalu copas kode script berikut:

Ganti alamat tujuan: Dengan alamat tombol download nantinya.

* Setelah berhasil diterapkan kembalikan lagi metode penulisan ke "Compose" dan Anda sudah akan bisa melihat hasilnya.

Demo:

Nanti tampilannya akan seperti ini
Result

Download

Baiklah demikian Cara Membuat Tombol Download Keren Dan Mudah.
Semoga membantu.

#Update

Atau juga bisa dengan cara ini..

Untuk blogger pergi ke template lalu edit HTML.. Letakkan kode CSS berikut ini di atas kode /b:skin

Untuk WP tinggal pergi ke sesuaikan tema untuk menambahkan CSS berikut

/* CSS Button Style 2 by www.ekeneonline.com */
a:link{text-decoration:none}
.vn-red a{
background-color:#e74c3c;
display:inline-block;
position:relative;
margin:30px 5px;
padding:20px 20px 20px 80px;
color:#fff;
transition:all 0.4s ease
}

.vn-red a:before{
content:"\f019";
font-family:fontAwesome;
position:absolute;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
font-size:28px;
border-radius:0 20px 0 0;
color:#000;
background-color:#fff;
opacity:0.3;
padding:20px;
top:0;
left:0
}

.vn-red a:hover{
background:#7f8c8d
}

.vn-green a{
background-color:#27ae60;
display:inline-block;
position:relative;
margin:30px 5px;
padding:20px 20px 20px 80px;
color:#fff;
transition:all 0.4s ease
}

.vn-green a:before{
content:"\f019";
font-family:fontAwesome;
position:absolute;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
font-size:28px;
border-radius:0 20px 0 0;
color:#000;
background-color:#fff;
opacity:0.3;
padding:20px;
top:0;
left:0
}

.vn-green a:hover{
background:#7f8c8d
}

.vn-wisteria a{
background-color:#8e44ad;
display:inline-block;
position:relative;
margin:30px 5px;
padding:20px 20px 20px 80px;
color:#fff;
transition:all 0.4s ease
}

.vn-wisteria a:before{
content:"\f019";
font-family:fontAwesome;
position:absolute;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
font-size:28px;
border-radius:0 20px 0 0;
color:#000;
background-color:#fff;
opacity:0.3;
padding:20px;
top:0;
left:0
}

.vn-wisteria a:hover{
background:#7f8c8d
}

.vn-orange a{
background-color:#f39c12;
display:inline-block;
position:relative;
margin:30px 5px;
padding:20px 20px 20px 80px;
color:#fff;
transition:all 0.4s ease
}

.vn-orange a:before{
content:"\f019";
font-family:fontAwesome;
position:absolute;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
font-size:28px;
border-radius:0 20px 0 0;
color:#000;
background-color:#fff;
opacity:0.3;
padding:20px;
top:0;
left:0
}

.vn-orange a:hover{
background:#7f8c8d
}

.vn-blue a{
background-color:#2980b9;
display:inline-block;
position:relative;
margin:30px 5px;
padding:20px 20px 20px 80px;
color:#fff;
transition:all 0.4s ease
}

.vn-blue a:before{
content:"\f019";
font-family:fontAwesome;
position:absolute;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
font-size:28px;
border-radius:0 20px 0 0;
color:#000;
background-color:#fff;
opacity:0.3;
padding:20px;
top:0;
left:0
}

.vn-blue a:hover{
background:#7f8c8d
}

Kemudian untuk kodenya adalah sebagai berikut

Karena error saat menempatkan kodenya di sini.. Jadi sebagai alternatif kalian bisa mengambil kodenya di sini

Kalian bisa menambahkan atribut rel:"nofollow" setelah alamat linknya.

Berikut ini tampilannya: