Cara Membuat Tombol Demo dan Download Efek Slide di Blogger

Pada kesempatan kali ini saya akan memberikan tutorial bagaimana Cara Membuat Tombol Demo dan Download Efek Slide Keren di Blogger, Silahkan simak artikel berikut ini dengan cermat dan jangan lupa backup terlebih dahulu template kamu. Mengenai cara membuat halaman live demo template blog. Tombol ini sangat banyak digunakan oleh para blogger khususnya bagi mereka yang sering membagikan tutorial blog dan yang mempunya niche download.


Tombol download dan demo berikut ini sangat elegan bagi blog kamu agar terlihat lebih proffesional, nah bagi kamu yang ingin menerapkannya silahkan simak artikel berikut ini.

Cara Membuat Tombol Demo dan Download Efek Slide Keren di Blogger

1. Dikarenakan tombol download ini menggunakan Font Awesome, Silahkan kamu menu TEMA > Edit HTML, Silahkan cari kode </head> dan letakkan kode dibawah ini tepat DIATAS kode tersebut.

<link href='http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

2. Silahkan cari kode berikut ]]></b:Skin> atau </style> dan pastekan kode berikut ini tepat DIATAS kode tersebut.

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

3. Selanjutnya silahkan klik SIMPAN dan Selesai.

Langkah selanjutnya, untuk kode pemanggilnya silahkan terapkan pada postingan TAB HTML.

Agar Tampilannya rapih dilihat silahkan kamu memasukkan kode HTML kedalam postingan, Sebaiknya gunakan Tekan "Enter" untuk baris baru pada menu "Pilihan" seperti gambar dibawah ini.


4. Untuk penerapannya silahkan masuk ke mode HTML dan silahkan copy kode berikut dan pastekan di mode HTML tersebut. untuk penerapan tombolnya silahkan pasang sesuai keinginan kamu sendiri.

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

5. Selesai

Tampilkan Komentar
Sembunyikan Komentar

0 Response to "Cara Membuat Tombol Demo dan Download Efek Slide di Blogger"

Post a Comment

1. Berkomentarlah dengan tata bahasa yang baik agar orang lain tahu sebijak apa karakter anda melalui kata kata.
2. Silahkan tulis komentar anda untuk hal apapun yang masih berhubungan dengan post pada halaman ini.
3. Mohon untuk tidak menyertakan Link Aktif pada kolom komentar.
4. Mohon maaf apabila tidak sempat membalas komentar semua.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel