Cara Membuat Tombol Download Yang Keren Untuk Blogger

Tulisan IKO - Tombol download adalah suatu alat yang dapat mempermudah seseorang untuk membagikan file yang mereka punya melalui suatu hosting. Dengan adanya tombol download ini pengunjung yang ingin mendowload file yang telah disediakan oleh pemilik blog akan dapat mengakses file tersebut.

Tombol download sering digunakan para blogger termasuk saya untuk berbagi konten seperti file, gambar, video dan dapat diakses publik. Membuat tombol download pada blogger tidaklah sulit, anda dapat mempelajarinya pada tutorial dibawah.

Cara Membuat Tombol Download Yang Keren Untuk Blogger

1. Masuk ke dashboard blogger kalian.

2. Pilih menu Tata Letak.

3. Tambahkan gadget dimana saja dan masukkan script dibawah lalu save.

/* CSS Button  */
.button-mcq{float:left;list-style:none;text-align:center;width:95%;margin:10px;padding:2px;font-size:14px;clear:both}
.button-mcq ul{margin:0;padding:0}
.button-mcq li{display:inline;margin:5px;padding:0;list-style:none}
.button-mcq li a.demo,.button-mcq li a.download{position:relative;padding:14px 48px 14px 16px;background:#e73138;display:block;color:#fff!important;font-weight:700;font-size:14px;text-align:left;text-transform:uppercase;letter-spacing:.2px;border-radius:3px;box-shadow:0 1px rgba(0,0,0,0.1);line-height:normal;transition:all .3s;max-width:170px;margin:auto;overflow:hidden}
.button-mcq li a.download{background:#0099cc}
.button-mcq li a.demo:hover,.button-mcq li a.download:hover{background:#666}
.button-mcq li a.demo:active,.button-mcq li a.download:active{cursor:pointer}
.button-mcq li a.demo:after,.button-mcq li a.download:after{content:'\F054';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:16px 24px;font-family:fontawesome;transition:all .3s}
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>
.button-mcq li:hover a.demo:after,.button-mcq li:hover a.download:after{background:transparent;-webkit-animation:bounceright .3s alternate ease infinite;animation:bounceright .3s alternate ease infinite}
@-webkit-keyframes bounceright{from{-webkit-transform:translateX(0)}to{-webkit-transform:translateX(3px)}}
@keyframes bounceright{from{transform:translateX(0)}to{transform:translateX(3px)}}
</style>
<div class="clear"></div>

4. Jika anda ingin menggunakannya silahkan pasang script dibawah ini pada artikel yang ingin diberi tombol demo dan download.

<li><a class="demo" href="URL TUJUAN" target="_blank">Demo Link</a></li>
<ul class="button-mcq">
<li><a class="download" href="URL TUJUAN" target="_blank">Download Link</a></li>
</ul>
</div>
</div>

Keterangan :