Cara Mudah membuat Tombol Download Keren di Postingan Blog

cara membuat tombol download keren di blog


Kegiatan medownload sesuatu dimasa sekarang memang sudah menjadi hal yang marak dilakukan oleh seseorang, misalnya saja mendownload game, lagu, video, file, dan sebagainya.

Proses downloading ini membutuhkan waktu beberapa detik atau menit saja, Apalagi dijaman digital sudah merajalela saat ini, kegiatan medownload sesuatu bisa sangat membantu dan mempermudah seseorang untuk mengambil atau menyimpan sesuatu.

Sebelum kalian baca lebih lanjut tentang artikel kali ini, kalian tahu tidak Definisi Download, Oke Download adalah proses dimana transmisi sebuah file dari satu    sistem computer ke sistem computer lain. 

Dari internet ini user bisa meminta atau request suatu file dari cmputer lain untuk menerimanya. 

Untuk para Blogger terutama blog mereka yang menyediakan mengunduhan suatu file, Peran tombol download ini selain untuk mempercantik post juga akan mempermudahkan pengunjungnya untuk mendownload suatu file. 

Ada sebagian blogger diluar sana masih binggung, Gimana sih cara buat kaya gini (Tombol Download), Nah untuk kalian blogger pemula yang belum tahu bagimana cara membuat tombol download dengan mudah.

Kali ini akan ada kode Tombol Download keren yang bisa kalian terapkan didalam blog dan postingan anda, Let's Start


Cara Membuat Tombol Download Keren

Pertama, Untuk mempastekan kode CSS didalam template blog Kalian harus  Login ke Blogger setelah itu masuk ke Tema kemudian klik Edit HTML 

cara membuat tombol download keren di blog

Kedua, Jika sudah saatnya untuk memasukkan kode CSS, untuk pemasangan kode kali ini untuk memudahkan kalian mencari Tekan Tombol CRTL + F (untuk perangkat PC), 

Cari kode ]]></b:skin> jika sudah ketemu, langkah selanjutnya adalah mempastekan kode CSS dibawah ini tepat diatas kode ]]></b:skin>


/* DLBUTTON [Personal Change] */
.dlbutton br {display: none !important;}

.dlbutton {
margin: 0px auto;
width: 200px;
position: relative;
z-index: 1;
}
.dlbutton a {
color: white !important;
display: block;
width: 200px;
height: 50px;
background: #2DA5C6;
text-align: center;
text-decoration: none;
text-transform: uppercase;
font: 17px/50px Helvetica, Verdana, sans-serif;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 );
}
.dlbutton a, .slide {
-webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
-moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
}
.slide {
position: absolute;
z-index: -1;
display: block;
margin: -50px 0 0 10px;
width: 180px;
height: 40px;
background: #444;
color: #fff;
text-align: center;
font: 12px/45px Helvetica, Verdana, sans-serif;
-webkit-transition: margin 0.5s ease;
-moz-transition: margin 0.5s ease;
-ms-transition: margin 0.5s ease;
-o-transition: margin 0.5s ease;
transition: margin 0.5s ease;
}
.dlbutton:hover .bottom {
margin: -10px 0 0 10px;
}
.dlbutton:hover .top {
margin: -80px 0 0 10px;
line-height: 35px;
}
.dlbutton a:active {
background: #00b7ea;
background: -moz-linear-gradient(top,  #00b7ea 36%, #009ec3 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(36%,#00b7ea), color-stop(100%,#009ec3));
background: -webkit-linear-gradient(top,  #00b7ea 36%,#009ec3 100%);
background: -o-linear-gradient(top,  #00b7ea 36%,#009ec3 100%);
background: -ms-linear-gradient(top,  #00b7ea 36%,#009ec3 100%);
background: linear-gradient(top,  #00b7ea 36%,#009ec3 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 );
}
.dlbutton:active .bottom {
margin: -20px 0 0 10px;
}
.dlbutton:active .top {
margin: -70px 0 0 10px;
}

JIka sudah kalian pastekan kode diatas, Selanjutnya kalian tinggal klik Simpan untuk menyimpan kode yang tadi kalian sudah pastekan.

Untuk pemasangan CSS sampai disini selesai, kita akan berlanjut untuk pemasangan kode HTML didalam postingan

Ketiga, Silahkan kalian masuk ke menu Edit di salah satu postingan yang ingin kalian beri Tombol Downloadnya, setelah masuk Buka Kolom HTML diatas kanan postingan blog (Ingat HTML bukan Compose), Sudah tahu? 

Keempat, Kita akan masuk ke pemasangan Kode HTML di blog, silahkan Copy Paste kode HTML dibawah ini (sesuai letak dimana tombol itu ingin kalian tempatkan)

<div class="dlbutton"><a href="Link" target="_blank">Download</a><div class="slide top">Nama_File.rar</div><div class="slide bottom">Size : 10 MB</div></div>

Note : Silahkan ganti Link diatas dengan Link tujuan yang ingin anda berikan ke dalam tombol Download, Ganti Name_File.rar dengan nama daripada File download itu, Ganti 10 MB dengan ukuran file tersebut. Nah jika kalian ingin juga mengganti Nama yang terlihat dipostingan yaitu Download dengan keinginan hati kalian, silahkan Ganti Download dengan kata yang ingin anda ubah, Misal Download for Playstore.

Silahkan klik DEMO dibawah untuk melihat Hasil akhirnya..


Kesimpulan

Tombol Download ini memang akan memberikan kesan tersendiri  bagi siapa saja yang akan mengunjungi blog anda, dan ingin mendownload file didalam blog anda, pasti pengunjung anda akan terasa lebih nyaman untuk membaca artikel kalian.

Sekian dalam artikel Blogging kali ini semoga bisa memberikan manfaat, Bila ada salah-salah kata atau Tutorial diatas megalami Error bisa langsung memberikan komentar anda dikolom komentar dibawah postingan ini, Terimaksih. [putarmuter]

0 Response to "Cara Mudah membuat Tombol Download Keren di Postingan Blog"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel