Tuesday, 26 January 2016

Tombol Demo dan Download Dengan Efek Slide


Tombol Demo dan Download dengan Efek Slide

Blog Billy-Art akan share tutorial tentang Cara Membuat Tombol Demo dan Download Dengan Efek Slide  yang dipasang di blog Billy Film 21, tombol demo dan download pasti memiliki fungsi yang sama, tetapi tombol demo dan download ini memiliki tampilan atau style yang berbeda beda guys, tentu saja hal ini dilakukan untuk mempercantik / memperindah blog kita biar tidak keliatan biasa biasa aja. Efek slide bakalan muncul jika cursor menyetuh tombol demo dan download, penasaran? yuk langsung aja kita ke tutorial..

1. Masuk ke Blogger > Template > Edit HTML

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

3. Terapkan kode dibawah ini 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;
}

Kalian bisa ganti dengan warna yang lain disini

4. Simpan Template

5. Nah untuk menampilkan kode demo dan doownload pada saat memposting, silahkan kalian copy kode dibawah 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>

Tab HTML


6. Agar tampilannya rapi, saat memasukkan kode HTML diatas ke postingan sebaiknya gunakan Tekan "Enter" untuk baris baru pada menu Pilihan.
Seperti ini
Demo Tampilan :





Sekian cara Membuat Tombol Demo dan Download Dengan Efek Slide Selamat mencoba :)

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

bangbil.com adalah sebuah personal blog. Seorang blogger yang masih merangkap sebagai pelajar. Temui aku di Sosial Media :

Berlangganan via Email

Berlangganan artikel terbaru dari blog ini langsung via email.