Cara Membuat Tombol Download Dan Demo Keren

Bagi Kaum Blogger yang membuat blog download pasti akan membutuh kan Tombol Download Keren Di Blog.

Tetapi Bagaimana Cara Membuat Tombol Download Di Blog?

Kali ini kita akan belajar membuat tombol download keren dan sederhana menggunakan CSS dan Bootstrap, Sebenarnya ada banyak template blog download yang sudah memberikan tombol keren pada blog nya.

Tetapi jika kamu hanya menggunakannya untuk keperluan yang sangat jarang, mungkin rugi jika memakai template blog download.

Jadi lebih baik membuat tombol download sendiri saja di blog kita.

Nah tanpa berlama-lama lagi lebih baik langsung saja kita belajar membuat Tombol Download atau Demo Di Blogspot dan WordPress. Ada beberapa cara yang bisa kita pakai yaitu Membuat tombol Download Dengan Bootstrap dan Menggunakan CSS.

Cara Membuat Tombol Download Dan Demo Keren di Blog

1. Membuat Tombol Demo Dan Download Menggunakan Bootstrap dan CSS

  • Silahkan masuk ke menu Tema -> Edit HTML dan tambahkan Kode CSS berikut ini di bagian</head> letakkan di atasnya:
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>
/* CSS Button Style www.gabutngeblog.com */
<style type="text/css">
.buttondownload {
    float: left;
    list-style: none;
    text-align: center;
    width: 95%;
    margin: 10px;
    padding: 2px;
    font-size: 16px;
    clear: both
  }

  .buttondownload a {
    position: relative;
    padding: 9px 48px 9px 16px;
    background: #3498db;
    color: #fff !important;
    font-weight: 700;
    font-size: 14px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 0px;
    box-shadow: 0 1px rgba(0, 0, 0, 0.1);
    line-height: normal;
    transition: all .3s
  }

  .buttondownload a:before {
    content: "\f019";
    background: rgba(0, 0, 0, 0.1);
    position: absolute;
    right: 0;
    top: 0;
    font-weight: normal;
    display: inline-block;
    margin: 0 0 0 10px;
    color: #fff;
    padding: 11px;
    font-family: "fontawesome";
  }

  .buttondownload a:hover {
    background: #5C5C5C
  }

  .buttondownload:active {
    cursor: pointer
  }

  .buttondemo {
    float: left;
    list-style: none;
    text-align: center;
    width: 95%;
    margin: 10px;
    padding: 2px;
    font-size: 16px;
    clear: both
  }

  .buttondemo a {
    position: relative;
    padding: 9px 48px 9px 16px;
    background: #E55E48;
    color: #fff !important;
    font-weight: 700;
    font-size: 14px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 0px;
    box-shadow: 0 1px rgba(0, 0, 0, 0.1);
    line-height: normal;
    transition: all .3s
  }

  .buttondemo a:before {
    content: "\f135";
    background: rgba(0, 0, 0, 0.1);
    position: absolute;
    right: 0;
    top: 0;
    font-weight: normal;
    display: inline-block;
    margin: 0 0 0 10px;
    color: #ffffff;
    padding: 11px;
    font-family: "fontawesome";
  }

  .buttondemo a:hover {
    background: #666
  }

  .buttondemo:active {
    cursor: pointer
  }
</style>
  • kemudian Simpan Template
  • Cara menggunakan atau menampilkannya di postingan adalah, Masuk ke Dashboard Blog dan buat sebuah postingan baru
  • Kemudian Tambahkan Kode berikut ini di Mode HTML pada postingan blog.
<div class="buttondemo"><a href="http://www.gabutngeblog.com/"target="_blank">DEMO</a></div>
<div class="buttondownload"><a href="http://www.gabutngeblog.com/"target="_blank">DOWNLOAD</a></div>clear">
</div>

Kode HTML diatas berguna untuk memanggil fungsi atau Style CSS yang sudah kita letakkan di dalam template blog tadi yang diambil dari Fontawesome Bootstrap.

Tetapi jika kalian hanya membutuhkan tombol download nya saja silahkan hapus Kode ini.

<div class="buttondemo"><a href="http://www.gabutngeblog.com/"target="_blank">DEMO</a></div>

dan silahkan publish dan lihat hasilnya, Jika terjadi kesalahan coba cek lagi pastikan kamu memasukkan kodenya dengan benar. salah satu saja tampilan tidak akan terbentuk.

jika kalian benar maka tampilannya akan seperti ini bisa di klik juga.

See the Pen Tombol demo dan download 1 by Trikusuma Yulianto (@trikusuma-yulianto) on CodePen.

Jika kamu tidak bisa melihat hasilnya berarti ini adalah Mode AMP. Kamu bisa beralih ke Non AMP atau klik View on Codepen untuk melihat Demo

2. Membuat Tombol Demo dan Download Menggunakan CSS

Nah Cara Kedua kalian bisa menggunakan CSS. ya bisa dibilang hanya CSS saja tidak membutuhkan kode lainnya seperti cara pertama.

  • Silahkan masuk kedalam Dashboard Blog kamu dan pilih menu Tema Kemudian Edit HTML
  • Copy kode CSS berikut ini kedalam bagian ]]></b:skin> atau </style> dan letakkan di atasnya
/* DOWNLOAD BUTTON */
.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: #00897B;
text-align: center;
text-decoration: none;
text-transform: uppercase;
font: 17px/50px Helvetica, Verdana, sans-serif;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&amp;#39;#00b7ea&amp;#39;, endColorstr=&amp;#39;#009ec3&amp;#39;,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: #004D40;
background: -moz-linear-gradient(top,  #00695C 36%, #0e6578 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(36%,#00695C), color-stop(100%,#0e6578));
background: -webkit-linear-gradient(top,  #00695C 36%,#0e6578 100%);
background: -o-linear-gradient(top,  #00695C 36%,#0e6578 100%);
background: -ms-linear-gradient(top,  #00695C 36%,#0e6578 100%);
background: linear-gradient(top,  #4DB6AC 36%,#0e6578 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&amp;#39;#00695C&amp;#39;, endColorstr=&amp;#39;black&amp;#39;,GradientType=0 );
}
.dlbutton:active .bottom {
margin: -20px 0 0 10px;
}
.dlbutton:active .top {
margin: -70px 0 0 10px;
}

Sampai disini kode diatas sudah bisa digunakan untuk menampilkan button demo dan download.

Caranya adalah memanggil kode tersebut menggunakan kode HTML berikut ini:

<div class="dlbutton">
<a href="https://gabutngeblog.com" target="_blank">Download</a><br />
<div class="slide top">Aplikasi</div>
<div class="slide bottom">Size : ? MB</div>
</div>
</br>
<div class="dlbutton">
<a href="https://gabutngeblog.com" target="_blank">Demo</a><br />
<div class="slide top">Apa ya?</div>
<div class="slide bottom">Kepo Cie</div>
</div>

untuk href nya silahkan ganti dengan link yang sudah kamu siapkan, dan guna dari slide top bisa digunakan untuk mendefinisikan sesuatu seperti diatas saya beri nama Aplikasi. dan Slide Bottom saya gunakan untuk Size atau ukuran.

sebenarnya relatif aja terserah kalian mau dikasih nama apa. Jika kodenya benar maka tampilannya seperti berikut:

See the Pen Tombol Download HTML dan CSS by Trikusuma Yulianto (@trikusuma-yulianto) on CodePen.

Sama seperti diatas jika kalian tidak bisa melihat hasilnya silahkan view non AMP atau langsung lihat hasilnya di Codepen

Atau kalian mau yang lebih mudah tanpa mengubah tema atau template blog kalian? ada triknya.

pada kode CSS diatas bisa kalian tambahkan tag <style> diawal dan </style>diakhir, kemudian tambahkan kode HTML class dlbutton diatas tadi dan letakkan langsung di bawah tag </style>.

jadi kodenya seperti ini:

<style>
/* DOWNLOAD BUTTON */
.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: #00897B;
text-align: center;
text-decoration: none;
text-transform: uppercase;
font: 17px/50px Helvetica, Verdana, sans-serif;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&amp;#39;#00b7ea&amp;#39;, endColorstr=&amp;#39;#009ec3&amp;#39;,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: #004D40;
background: -moz-linear-gradient(top,  #00695C 36%, #0e6578 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(36%,#00695C), color-stop(100%,#0e6578));
background: -webkit-linear-gradient(top,  #00695C 36%,#0e6578 100%);
background: -o-linear-gradient(top,  #00695C 36%,#0e6578 100%);
background: -ms-linear-gradient(top,  #00695C 36%,#0e6578 100%);
background: linear-gradient(top,  #4DB6AC 36%,#0e6578 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&amp;#39;#00695C&amp;#39;, endColorstr=&amp;#39;black&amp;#39;,GradientType=0 );
}
.dlbutton:active .bottom {
margin: -20px 0 0 10px;
}
.dlbutton:active .top {
margin: -70px 0 0 10px;
}
</style>
<div class="dlbutton">
<a href="https://gabutngeblog.com" target="_blank">Download</a><br />
<div class="slide top">Aplikasi</div>
<div class="slide bottom">Size : ? MB</div>
</div>
</br>
<div class="dlbutton">
<a href="https://gabutngeblog.com" target="_blank">Demo</a><br />
<div class="slide top">Apa ya?</div>
<div class="slide bottom">Kepo Cie</div>
</div>

langsung copy kodenya kedalam Mode HTML pada postingan baru dan lihat hasilnya.

Penutup

Apabila kalian belum paham silahkan komentar di bawah nanti akan saya beri tau sampai kalian paham. dan sekian lah pembahasan kita mengenai Cara Membuat Tombol Download Dan Demo Di Blog menggunakan Bootstrap, HTML, Dan CSS.

Jika Ada kesalahan jangan lupa komen juga, semoga bermanfaat terimakasih sudah berkunjung jangan lupa di share!.

Tinggalkan komentar