 |
| Tombol Demo & Download |
Panduan Memasang Tombol Slide Demo dan Download Keren - Tutorial ini saya dapatkan di blog Arlina Fitriyani. Namun banyak orang belum mengetahui cara pemasangan script kode dengan benar. Berikut demo dibawah ini:
Bagaimana tertarik untuk menggunakan tombol ini? Jika ingin menggunakan tombol ini perhatikan langkah - langkah dibawah ini.
Panduan Memasang Tombol Slide Demo dan Download Keren
1. Login ke akun blogger anda2. Klik Template kemudian klik Edit HTML
3. Setelah itu, cari kode <head> . Setelah ketemu kode dibawah ini tepat dibawah kode <head>
<link href='//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>4. Kemudian cari lagi kode ]]></b:skin> atau </style>. Dan letakkan kode dibawah ini tepat di atas kode ]]></b:skin> atau </style>.
5. Selanjutnya Simpan Template#wrap {
margin: 20px auto;
text-align: center;
}
#wrap br {
display: none;
}
.btn-slide, .btn-slide2 {
position: relative;
display: inline-block;
height: 50px;
width: 200px;
line-height: 50px;
padding: 0;
border-radius: 50px;
background: #fdfdfd;
border: 2px solid #0099cc;
margin: 10px;
transition: .5s;
}
.btn-slide2 {
border: 2px solid #efa666;
}
.btn-slide:hover {
background-color: #0099cc;
}
.btn-slide2:hover {
background-color: #efa666;
}
.btn-slide:hover span.circle, .btn-slide2:hover span.circle2 {
left: 100%;
margin-left: -45px;
background-color: #fdfdfd;
color: #0099cc;
}
.btn-slide2:hover span.circle2 {
color: #efa666;
}
.btn-slide:hover span.title, .btn-slide2:hover span.title2 {
left: 40px;
opacity: 0;
}
.btn-slide:hover span.title-hover, .btn-slide2:hover span.title-hover2 {
opacity: 1;
left: 40px;
}
.btn-slide span.circle, .btn-slide2 span.circle2 {
display: block;
background-color: #0099cc;
color: #fff;
position: absolute;
float: left;
margin: 5px;
line-height: 42px;
height: 40px;
width: 40px;
top: 0;
left: 0;
transition: .5s;
border-radius: 50%;
}
.btn-slide2 span.circle2 {
background-color: #efa666;
}
.btn-slide span.title,
.btn-slide span.title-hover, .btn-slide2 span.title2,
.btn-slide2 span.title-hover2 {
position: absolute;
left: 90px;
text-align: center;
margin: 0 auto;
font-size: 16px;
font-weight: bold;
color: #30abd5;
transition: .5s;
}
.btn-slide2 span.title2,
.btn-slide2 span.title-hover2 {
color: #efa666;
left: 80px;
}
.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
left: 80px;
opacity: 0;
}
.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
color: #fff;
}
Untuk memanggil kode, silahkan anda terapkan di postingan pada tab HTML
Masukkan kode dibawah ini pada tab HTML di postingan
Itulah Panduan Memasang Tombol Slide Demo dan Download Keren. Semoga artikel ini bermanfaat, terima kasih<div id="wrap">
<a href="#" class="btn-slide" 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 href="#" class="btn-slide2" 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>
Jika ingin mendapatkan artikel terbaru melalui sosial media, silahkan like serta follow akun dibawah & jangan lupa di share.
Terima kasih telah berkunjung di Begini Blog. Silahkan berikan komentar anda dikolom komentar atau klik disini
0 Komentar untuk "Panduan Memasang Tombol Slide Demo dan Download Keren"
Peraturan berkomentar :
1. Silahkan berikan komentar anda sesuai dengan topik artikel.
2. Gunakan tombol "Balas" jika ingin membalas komentar agar komunikasi lebih terstruktur.
3. Gunakan bahasa yang baik dan mudah dimengerti.
4. Dilarang keras meninggalkan link hidup atau aktif.
Terima kasih telah berkunjung.