Cara Membuat Tombol Demo & Download Animation Di Blog/Website

cara membuat button demo dan download themplate - hallo teman-teman blogger, pada kesempatan ini saya akan membagikan tutorial cara membuat tombol demo dan download di blog sangat keren dan ada animasinya.

tombol download dan demo ini berfunsi untuk menampilkan halaman hasil karya anda agar pengunjung bisa melihat hasil perkerjaan anda dan apabila pengunjung tertarik dengan demo anda, pasti mereka akan memasang juga tombol demo dan download ini.

banyak di gunakan oleh blogger-blogger yang menampilkan themplate andalan mereka. mungkin anda salah satu nya.

Cara Membuat Button Download Dan Demo
1. Buka Blogger > Theme > Edit HTML.
2. Cari ]]></b:skin>. terapkan script css dibawah ini, diatas ]]></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; }

3. Tambahkan script ini di atas </head>

Script dibawah ini adalah script bootstrap supaya bisa memanggil gambar yang keren, anda bisa melihat dokumentasinya di Bootstrap

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

4. Simpan themplate anda.

Cara Memasang Tombol Demo & Download Di Artikel
1. Buat artikel baru.
2. Salin script HTML di bawah ini

<div id="wrap" style="text-align: center;">

<a class="bie-slide" href="#" 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="#" 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>

3. Letakkan di artikel di bagian Menu HTML
4. Lihat hasilnya dan selesai.

Demo Click here

Demikianlah cara membuat demo dan download keren diblog. semoga bermanfaat untuk anda.

Surya Seorang mahasiswa yang senang membagikan informasi yang sudah saya dapatkan. Informasi yang saya tulis blog ini, sesuai pengalaman saya dari pertama blog.

Berbagi :