Cara Pasang Slide Demo dan Download Button Keren

Hay hay hay sobat online semua, jadi untuk kali ini saya akan berbagi tutorial bagaimana Cara Pasang Slide Demo dan Download Button Keren di post blog. Kita ketahui bahwa button Demo dan Download sangat diperlukan ketika kita hendak memberikan demonstrasi sebuah halaman  dan link download dari artikel yang sedang diulas. Oke untuk mempersingkat waktu langsung saja kita lihat caranya dibawah ini.

Sebelumnya usahakan anda sudah memakai fontawesome pada template
  • Pertama-tama silahkan sobat semua buka Bloggers > Template > Edit HTML.
  • Silahkan sobat klik ctrl + f kemudian cari tulisan ]]></b:skin> atau </style> lalu pastekan kode dibawah ini tepat diatasnya.
#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}
  • Lalu klik Simpan



Langkah selanjutnya silahkan sobat tambahkan kode pemanggil dibawah ini pada setiap postingan sobat yang ingin ditambah ikon Demo dan Download
<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>
Berikut Contoh hasilnya :

Mungkin hanya itu yang dapat saya bagikan hari ini, terima kasih kepada sobat yang telah membaca artikel tutorial ini maaf jika ada kesalahan dalam penulisan artikel ini. Tinggalkan pertanyaan sobat dikolom komentar jika ada yang membingungkan, Kritik dan saran sangat dibutuhkan untuk membuat blog ini lebih baik kedepannya. Sampai jumpa di artikel selanjutnya.
Selamat Mencoba dan Semoga Bermanfaat