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.

Demo Download Button Slide 1

DEMO DOWNLOAD Button SLide Efect


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.

Demo Download Button Slide 2



Nah jika sobat ingin tombol demo download efek slide yang lain lagi mungkin sobat dapat mencoa yang ini. nah langsung saja lihat demonya dan cara membuatnya DISINI.

Ok sobat sekian postingan untuk saat ini, selamat mencoba membuat Tombol Demo Download Efek Slide Di Blog.
2 Komentar untuk "Cara Membuat DEMO DOWNLOAD Button Efek SLide di Blogspot"

Gan kode Ini nya sudah di fix di blogger/Google Saya sudah coba berapa kali di blog kgk bisa 2

Yang mana yang kaga bisa sob, yang pertama atau kedua?