Cara Membuat Tombol Button Demo dan Download di Blogger Dengan Icon Font Awesome
11 September 2020
Tulis Komentar
Sesuai judul artikel kali ini saya akan berbagi tutorial Cara Mеmbuаt Tоmbоl Dеmо dan Download Flat UI yang keren dan kelihatan menarik dengan tаmbаhаn ісоn Fоnt Awеѕоmе. Tombol ini sangat banyak di gunakan oleh teman-teman blogger yang bіаѕа mеmbаgіkаn ѕеѕuаtu melalui blog bаіk іtu bеrbаgі tеmрlаtе, software, film, dаn hаl lаіn уаng dapat dіbаgіkаn раѕtіnуа аkаn mеmbutuhkаn tоmbоl dеmо dan dоwnlоаd.
Sebenarnya temen-temen blogger juga sudah banyak yang membagikan tutorial ini, namun kali ini saya akan membagikan tutorial hasil karya dari arlina design dan juga seocips. Nah, bagi sobat yang juga ingin menerapkannya di dalam blog sobat. Ok langsung saja ikuti tutorial di bawah ini.
Membuat Tombol Demo dan Download Dengan Icon Font Awesome
Karena tombol ini menggunakan font awesome, maka langkah pertama yang harus sobat lakukan yakni menambahkan link CSS berikut.
1. Silahkan buka template editor blog sobat, silahkan cari kode </head> dan letakkan kode di bawah ini tepat di atas kode tersebut.
<link href='http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>Apabila di dalam template sobat sudah terbasang link CSS font awesome, silahkan lewati langkah nomor 1 di atas.
2. Langkah kedua silahkan cari kode ]]></b:skin> dan letakkan kode di bawah ini tepat sebelum atau di atas kode ]]></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 #0096db; }
.bie-slide:hover { background-color:#F9690E; }
.bie-slide2:hover { background-color:#0096db; }
.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:#0096db; }
.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:#0096db; }
.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:#0096db; 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. Selanjutnya silahkan simpan template.
Cara Menerapkan Tombol Demo dan Download Keren di Blogger
Silahkan Anda buat postingan baru. Dalam postingan / artikel silahkan gunakan kode di bawah ini dalam mode HTML bukan compose.
<div id="wrap">
<a class="bie-slide" href="http://indws.blogspot.com" target="_blank">
<span class="circle"><i class="fa fa-search"></i></span>
<span class="title">Demo</span>
<span class="title-hover">Click here</span>
</a>
<a class="bie-slide2" href="http://www.ikibape.xyz" target="_blank">
<span class="circle2"><i class="fa fa-cloud-download"></i></span>
<span class="title2">Download</span>
<span class="title-hover2">Click here</span>
</a>
</div>Jika Anda hanya ingin memasang Tombol Demo Saja tepat di tengah-tengahnya maka gunakanlah kode dibawah ini.
<div id="wrap">
<a class="bie-slide" href="http://indws.blogspot.com" target="_blank">
<span class="circle"><i class="fa fa-search"></i></span>
<span class="title">Demo</span>
<span class="title-hover">Click here</span>
</a></div>Sedangkan jika untuk Tombol Download Saja gunakan kode ini gunakan kode dibawah ini.
<div id="wrap">
<a class="bie-slide2" href="http://www.ikibape.xyz" target="_blank">
<span class="circle2"><i class="fa fa-cloud-download"></i></span>
<span class="title2">Download</span>
<span class="title-hover2">Click here</span>
</a>
</div>