Cara membuat tombol Demo dan Download dengan efek slide di Blog

HaiSob apa kabar? Semoga dalam keadaan baik. Ok sobat berikut ini haisob.com akan membagikan tutorial bagaimana cara membuat tombol download dan demo dengan efek slide. Tombol seperti ini bisa sobat gunakan misalnya jika ingin menampilkan Demo dan download Tema yang sudah sobat buat.

Sebelumnya juga telah dibagikan tombol download dan demo tapi tanpa menggunakan efek slide (baca : cara membuat tobol download dan demo sederhana), perbedaanya tombol berikut ini menggunakan efek slide. Lihat demonya untuk lebih jelasnya lagi.

Demo Download Button


Cara membuat tombol Demo dan Download dengan efek slide
Demo Download Button



CSS tombol Demo dan Download efek slide di Blogger


1. Di Blog Bloger 😊
2. Pilih menu Template ➔ Edit HTML
Cara membuat tombol Demo dan Download dengan efek slide di Blogger
Template - Edit HTML

Baca juga: cara membuat link aktif pada kode JavaScript

3. Letakan kode dibawah ini diatas kode ]]></b:skin> atau dibawah <style>
.download {font-family:'Oswald';font-weight:400;position:relative;overflow:hidden;text-align:center;margin:1em auto;
width:auto;height:50px;line-height:50px;border:1px solid #e9e9e9;}
.download h5 {font-family:'Oswald';font-weight:400;position:absolute;color:#999;text-shadow:2px 2px 0 rgba(0,0,0,0.1);font-size:30px;line-height:50px;margin:0;
padding:0;width:100%;background:#fff;transition: margin-left 0.6s cubic-bezier(0.1,0.5,0.2,1);}
.download:hover h5{margin-left:100%;}
.download ul {display:inline-block;margin:0;padding:0;}
.download ul li {position:static;display:inline-block;padding:0 .1em;}
.download ul li::before {display:none;}
.download ul li a {color:#fff;font-size:20px;margin:0;padding:.2em .4em;
background:none;transition:all 0.5s ease;}
.download ul li a:hover {background:#fc8675;color:#fff;}
.download-info{background:#e27869;}
.download-info h5{background-color:#fff;}
.demo {font-family:'Oswald';font-weight:400;position:relative;overflow:hidden;text-align:center;margin:1em auto;
width:auto;height:50px;line-height:50px;border:1px solid #e9e9e9;}
.demo h5 {font-family:'Oswald';font-weight:400;position:absolute;color:#999;text-shadow:2px 2px 0 rgba(0,0,0,0.1);font-size:30px;line-height:50px;margin:0;
padding:0;width:100%;background:#fff;transition: margin-left 0.6s cubic-bezier(0.1,0.5,0.2,1);}
.demo:hover h5{margin-left:100%;}
.demo ul {display:inline-block;margin:0;padding:0;}
.demo ul li {position:static;display:inline-block;padding:0 .1em;}
.demo ul li::before {display:none;}
.demo ul li a {color:#fff;font-size:20px;margin:0;padding:.2em .4em;
background:none;transition:all 0.5s ease;}
.demo ul li a:hover {background:#48596d;color:#fff;}
.demo-info{background:#333c4b;}
.demo-info h5{background-color:#fff;}
4. Simpan template.

Baca juga: Cara memasang tombol show hide di komentar blog

Membuat tombol Demo dan Download di Postingan Blog


5. Gunakan kode di bawah ini, untuk menerapkannya pada postingan (dengan mode HTML)
<div class="download download-info">
<h5>DOWNLOAD</h5><ul>
<li><a href="http://www.haisob.com/" target="_blank"> DEMO </a></li>
<li><a href="http://www.haisob.com/" target="_blank"> DOWNLOAD </a></li>
</ul></div>
6. Silahkan ganti url warna kuning diatas dengan link Demo dan Link Download milik sobat.

Ok sob, sekian tutorial saat ini semoga bermanfaat,
Join This Site