Cara Membuat Tombol Demo dan Download Efek Slide di Blogger

Jagoandzgn.com - 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

Demo

Bagaimana mudah bukan untuk tutorial Cara Membuat Tombol Demo dan Download Efek Slide di Blogger, bagi kamu yang masih bingung dengan tutorial diatas atau kamu mempunyai masalah seputar blogger silahkan komen di kolom komentar dibawah artikel ini.