Latest News

Cara Membuat Slide Demo dan Unduh Button [Tombol Slide Demo & Download]

Bagi para pemiliki blog unduh tentu tidak gila dengan adanya tombol download. Kecuali bagi mereka yang membuat link unduh hanya dalam wujud text. Tentu kalau dibuatkan tombol unduh maka tidak akan membuat pengunjung resah serta mampu menjadi pembeda untuk link-link lainnya biar tidak salah klik juga. Tentu tombol downloadnya harus keren dan menarik biar menarik perhatian pengunjung.

Selain menggunakan tombol unduh yang dibuat dengan CSS dan HTML ada juga pemilik blog unduh yang memakai gambar untuk pengganti tombol download. Dengan menguploud gambar dan memasukkan link unduh kedalam gambar maka sudah jadilah tombol unduh dalam bentuk gambar. Untuk kali ini aku akan menyebarkan tutorial cara membuat tombol unduh dan demo dengan fitur slide sebagai penghiasnya.

Bagi

Tombol demo dan unduh ini dibuat dengan CSS dan HTML dengan komplemen font awesome. Bagi anda yang tidak memerlukan tombol demo kalian mampu mengubahnya dengan tombol unduh untuk alternatif link/server link unduh yang berbeda. Fitur slide ini akan muncul dikala kursor pengunjung menyentuk tombol downloadnya. Nah bagaimana tertarik untuk membuat tombol demo dan downloadnya? Ikuti saja langkah dibawah ini.

Cara Memasang Tombol Demo dan Unduh Di Blogger

Langkah 1
Bagi anda yang belum memasang js font awesome di blog silakan buka link berikut Cara Memasang Font Awesome Di Blog 

Langkah 2
Masuk ke blogger, pilih Tema → Edit HTML. Cari arahan ]]></b:skin> atau </style>

Langkah 3
Salin arahan dibawah ini dan pastekan/letakkan diatas arahan ]]></b:skin> atau </style>

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

Terakhir simpan template.

Untuk memanggil tombol demo dan downloadnya silakan anda terapkan arahan dibawah ini didalam postingan dikala anda ingin menggunakan tombol demo dan download. Pastikan mode penulisan postingannya yaitu HTML buka Compose.

<div id="wrap"> <a href="#" class="btn-slide" target="_blank">   <span class="circle"><i class="fa fa-rocket"></i></span>   <span class="title">Demo</span>   <span class="title-hover">Click here</span> </a> <a href="#" class="btn-slide2" target="_blank">   <span class="circle2"><i class="fa fa-download"></i></span>   <span class="title2">Download</span>   <span class="title-hover2">Click here</span> </a> </div>

Nah cukup sekian tutorial cara membuat tombol demo dan unduh yang mampu aku bagikan. Jika mengalami kesulitan dan kendala silakan tanyakan dikolom komentar.