Cara membuat demo download

Membuat Tombol Demo dan Download dengan efek Slide di Blog. Ok sobat pada kesempatan ini seocips akan membagikan tentang bagaimana cara membuat demo dan download Button dengan efek Slide murni CSS tanpa java script di Blog Blogger sehingga memiliki loading yang lebih cepat dibandingkan dengan yang memakai javascript.

Sebelumnya juga seocips sudah pernah membagikan tombol demo dan download yang lain, jika sobat tertarik silahkan baca Demo Download Button Psuedo Element dan Demo download Button keren di Blog, atu juga jika sobat ingin yang ada efek slidenya seperti diatas baca Demo Download Button efek Slide V2.

Mungkin saja anda tertarik untuk membuat ini karena ingin membuat tampilan halaman menjadi lebih menarik dan kelihatan profisional. Maka dari banyak widget seperti ini yang beredar ini merupakan salah satu yang termasuk keren untuk di gunakan di blog. Tertarik? Berikut cara membuatnya.

Masuk ke edit HTML template Blogger kemudian letakan kode dibawah ini sebelum </style> atau ]]></b:skin>

#wrap { margin:20px auto; text-align:center; }
#wrap br { display:none; }
.bie-slide,.bie-slide2 { position:relative; display:inline-block; height:50px; width:200px; line-height:50px; padding:0; border-radius:50px; background:#fdfdfd; border:2px solid #F9690E; margin:10px; transition:.5s; }
.bie-slide2 { border:2px solid #36D7B7; }
.bie-slide:hover { background-color:#F9690E; }
.bie-slide2:hover { background-color:#36D7B7; }
.bie-slide:hover span.circle,.bie-slide2:hover span.circle2 { left:100%; margin-left:-45px; background-color:#fdfdfd; color:#F9690E; }
.bie-slide2:hover span.circle2 { color:#36D7B7; }
.bie-slide:hover span.title,.bie-slide2:hover span.title2 { left:40px; opacity:0; }
.bie-slide:hover span.title-hover,.bie-slide2:hover span.title-hover2 { opacity:1; left:40px; }
.bie-slide span.circle,.bie-slide2 span.circle2 { display:block; background-color:#F9690E; color:#fff; position:absolute; float:left; margin:5px; line-height:42px; height:40px; width:40px; top:0; left:0; transition:.5s; border-radius:50%; }
.bie-slide2 span.circle2 { background-color:#36D7B7; }
.bie-slide span.title,.bie-slide span.title-hover,.bie-slide2 span.title2,.bie-slide2 span.title-hover2 { position:absolute; left:90px; text-align:center; margin:0 auto; font-size:16px; font-weight:bold; color:#F9690E; transition:.5s; }
.bie-slide2 span.title2,.bie-slide2 span.title-hover2 { color:#36D7B7; left:80px; }
.bie-slide span.title-hover,.bie-slide2 span.title-hover2 { left:80px; opacity:0; }
.bie-slide span.title-hover,.bie-slide2 span.title-hover2 { color:#fff; }

Kemudian lanjutkan mencari kode </head> Lalu masukan script di bawah ini tepat di atas kode </head>

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

Simpan template. Untuk memanggilnya dalam postingan blog, dalam mode HTML/ Bukan compose gunakan / letakan kode HTML dibawah ini di tempat yang anda inginkan:

<div id="wrap">
<a class="bie-slide" href="http://www.seocips.com" 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 class="bie-slide2" href="http://www.seocips.com" 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>

Selesai dan Lihat hasilnya.

LIVE DEMO