Cara membuat tombol demo download di blog - Halo sobat Kang Ujang Kasep, setelah sebelumnya saya sudah membagikan tutorial mengenai cara membuat halaman live demo template blog. Maka pada kesempatan kali ini saya akan membagikan tutorial mengenai cara membuat tombol demo dan download di dalam postingan artikel blog milik sobat. Tombol ini sangat banyak di gunakan oleh teman-teman blogger khususnya bagi mereka yang suka membagikan tutorial blog dan lain sebagainya.
Sebenarnya teman-teman 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, silahkan ikuti tutorial di bawah ini.
Cara Membuat Tombol Demo dan Download 1
1. Karena tombol ini menggunakan font awesome, maka langkah pertama yang harus sobat lakukan yakni menambahkan link CSS berikut. 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'/>
Note : Apabila di dalam template sobat sudah terbasang link CSS font awesome, silahkan lewati langkah nomor 1 di atas.
2. Kemudian, silahkan cari kode ]]></b:skin> dan letakkan kode di bawah ini tepat sebelumnya 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 #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. Selanjutnya silahkan simpan template.
4. Langkah selanjutnya, untuk penerapannya di dalam postingan/ artikel silahkan gunakan kode di bawah ini dalam mode HTML.
<div id="wrap">
<a class="bie-slide" href="http://www.siabdi.xyz" 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.templateseores.xyz" 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>
Keterangan :
Silahkan ganti bagian yang saya block warna kuning dengan kuning menggunakan alamat demo yang akan sobat gunakan, dan silahkan ganti bagian yang saya block dengan warna hijau menggunakan alamat downloadnya. Maka hasilnya akan nampak seperti gambar di bawah ini! Silahkan lihat DEMO
0 komentar