Tombol Demo dan Download Dengan Efek Slide

Billy Ramadhan    1/26/2016   

Bangbil akan share sedikit tutorial tentang Cara Membuat Tombol Demo dan Download Dengan Efek Slide, tombol demo dan download pada umumnya pasti memiliki fungsi yang sama akan tetapi tombol demo dan download ini memiliki tampilan dengan style yang berbeda beda. 

Tentu saja hal seperti ini dilakukan untuk mempercantik / memperindah tampilan blog, supaya blog tidak keliatan biasa biasa aja, dengan tombol demo dan download bawaan blogger. Nah Efek slide ini juga akan muncul ketika cursor menyetuh tombol demo dan downloadnya seperti demo yang kalian lihat pada gambar diatas.

Cara Memasang Tombol Demo dan Download Dengan Efek Slide pada Blog

1. Ketika sudah berada di posisi Blogger.com pergi ke Template lalu Edit HTML

2. Sekarang cari kode ]]></b:skin> , kode b skin ini berisikan kode yang mana akan berdampak pada tampilan suatu blog, oh ya gunakana CTRL + F supaya memudahkan pencariannya.

3. Copy kode dibawah ini dan paste tepat sebelum kode ]]></b:skin>

#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;
}

*Untuk kode yang bangbil tandai diatas adalah kode warna, kalian bisa ganti sesuka kalian dengan warna kode lain.

4. Sesudahnya silahkan kalian klik Simpan Template

Nah, sekarang untuk menampilkan kode demo dan doownload pada postingan, silahkan kalian copy kode html untuk tombol dan downlod dengan efek slide dibawah ini, letakkan pada mode HTML saat menulis artikel.

<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>

Tab HTML

 Agar tampilan rapi, saat memasukkan kode HTML di postingan, sebaiknya gunakan Tekan "Enter" untuk baris baru pada menu Pilihan. Seperti gambar di bawah ini.

Sekian tentang cara Membuat Tombol Demo dan Download Dengan Efek Slide Selamat mencoba.

Referensi : http://www.arlinadzgn.com/2014/12/memasang-slide-demo-dan-download-button.html