Tombol Demo dan Download Dengan Efek Slide

Agen Togel



Tombol Demo dan Download Dengan Efek Slide

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

Tentu saja hal ini dilakukan untuk mempercantik / memperindah blog supaya blog tidak keliatan biasa biasa aja, dengan tombol demo dan download bawaan. Nah, Efek slide ini akan muncul jika cursor menyetuh tombol demo dan downloadnya Demonya akan seperti ini. 



Cara Memasang Tombol Demo dan Download Dengan Efek Slide pada Blog

1. Masuk ke Blogger > Template > Edit HTML

2. Cari kode ]]></b:skin> dengan menggunakan CTRL + F supaya memudahkan pencarian.

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, kalian bisa ganti sesuka kalian dengan warna yang, kode untuk warna lainnya bisa dilihat disini.

4. Simpan Template, Selesai!

Nah, sekarang untuk menampilkan kode demo dan doownload di postingan, silahkan kalian copy kode html untuk tombol dan downlod dengan efek slide dibawah ini, lalu letakkan pada tab HTML

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

Tombol Demo dan Download Dengan Efek Slide
Tab HTML

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

Tombol Demo dan Download Dengan Efek Slide

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

(Baca Juga : Cara Membuat Daftar Isi Simple Berdasarkan Label Pada Blog)

Sumber Kode Tombol Demo dan Download dengan Efek Slide  : http://www.arlinadzgn.com/2014/12/memasang-slide-demo-dan-download-button.html


Menulis dari berbagai pengalaman pribadi, jika bermanfaat bagi kalian silahkan share. Connect With Me..