Memasang Tombol Demo & Download Keren Ala Slide

Bloggerisn - Memasang Tombol Demo & Download Keren Ala Slide. Hai sobat Blogger, Berjumpa lagi dengan Saya hehe. Oke kali ini Saya akan memberikan tutorial yang fokus pada Tombol (button). Tutorial kali ini dibuat oleh Blogger Wanita Indonesia, Arlina Fitriyani.

Tanpa banyak cengcong, berikut cara penerapannya.

CATATAN!: Pastikan Blog Sobat sudah menerapkan font awesome

Cara Pemasangan :

1. Buka Blogger.
2. Klik Template.
3. Buka Edit HTML.
4. Masukan kode dibawah tepat di atas kode ]]></b:skin> atau </style> untuk memudahkan Sobat dalam mencarinya, tekan ctrl+f

/* Slide Demo & Download Button Bloggerisn*/
#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;
}

5. Lalu Simpan Template

Sekarang adalah penerapan pada postingan sobat. Saya sarankan untuk gunakan Tekan "Enter" untuk baris baru pada "Pilihan" seperti gambar dibawah ini

Setelah pensettingan selesai, sekarang pastekan kode dibawah ini pada tab HTML di dalam postingan sobat, bukan 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>

Publikasikan dan lihat hasilnya :D

Demo Tampilan:



Nah bagaimana menarik perhatian bukan? Jika berhasil jangan lupa untuk tinggalkan komentar sobat ya :D

Source

http://bloggerisn.blogspot.com/2015/05/memasang-tombol-demo-download-keren-ala-slide.html

Suka Dengan Artikel Diatas? Bagikan Gratis:

• Tweet
• Share
• Share
• Share
• Share

Irham Satriawan

Saya adalah seorang yang sangat menyukai design dan juga dunia internet sobat bisa memanggil saya (CT), dengan blog ini semoga saya akan berbagi pengalaman saya kepada sobat semua.

Artikel Menarik Lainnya