Cara Memasang Tombol Download / Demo di Template Blogger

Cara Mudah Memasang Tombol Download / Demo di Template VioMagz - Kesempatan kali ini kita akan membahas tentang memasang tombol download yang dibuat oleh Mas Sugeng.
Cara Mudah Memasang Tombol Download / Demo di Template VioMagz

Mungkin tidak banyak tahu jika di dalam template VioMagz telah ada kode CSS atau fitur tombol download / demo keren yang telah di pasang dan tidak tahu cara memasangnya ke dalam artikel / postingan.

Untuk yang menggunakan template VioMagz memasang Tombol download / demo sangat mudah, kita hanya cukup memasang satu (1) kode script.

Dan jika anda yang bukan pengguna template VioMagz juga bisa kok menggunakan tombol download / demo ini. Anda hanya cukup ikuti tutorial yang akan saya berikan.

Tombol download / demo ini memiliki tampilan yang menarik, fast loading dan sangat responsive.

Jika anda sudah tidak sabar ingin memasang tombol download / demo ke template blog, maka kita akan langsung pada tutorial cara pemasangannya.

Cara Pasang Tombol Download / Demo di Blog

Dibawah ini adalah tutorial pemasangan tombol download yang keren, bisa digunakan untuk pengguna template VioMagz atau template lainnya. Untuk tutorialnya sangat mudah, jadi ikuti saja panduan di bawah ini.

1. Buka Blogger.
2. Untuk pengguna template VioMagz pasang kode script di bawah ini, maka tombol download akan langsung tampil.
<div style="text-align: center;">
<a class="buttonDownload" href="https://www.example.com">Download</a></div>
3. Rubah https://www.example.com dengan URL yang anda inginkan.
4. Apabila anda ingin memasang tombol demo cukup rubah saja kata Download ke Demo.
5. Jika anda bukan pengguna template VioMagz copy kode script ini dan paste di atas kode ]]></b:skin>.
/* Tombol Download */
.buttonDownload {
border-radius: 3px;
display: inline-block;
position: relative;
padding: 10px 25px;
background-color: $(body.link.color);
color: white !important;
font-weight: bold; 
font-size: 0.9em;
text-align: center;
text-indent: 15px;
transition:all 0.4s;
-moz-transition:all 0.4s;
-webkit-transition:all 0.4s;
}
.buttonDownload:hover {
opacity: .85;
}
.buttonDownload::before, .buttonDownload::after {
content: ' ';
display: block;
position: absolute;
left: 15px;
top: 52%;
}
.buttonDownload::before {
width: 10px;
height: 2px;
border-style: solid;
border-width: 0 2px 2px;
}
.buttonDownload::after {
width: 0;
height: 0;
margin-left: 3px;
margin-top: -7px;
border-style: solid;
border-width: 4px 4px 0 4px;
border-color: transparent;
border-top-color: inherit;
animation: downloadArrow 2s linear infinite;
animation-play-state: paused;
}
.buttonDownload:hover::after {
animation-play-state: running;
}
@keyframes downloadArrow {
0% {
margin-top: -7px;
opacity: 1;
}
0.001% {
margin-top: -15px;
opacity: 0;
}
50% {
opacity: 1;
}
100% {
margin-top: 0;
opacity: 0;
}
}
6. Klik pratinjau untuk melihat apakah berhasil muncul atau tidak tombol download / demo.
7. Jika telah muncul maka telah berhasil pemasangannya.

Cukup mudah bukan memasang tombol Download / Demo di template blogger. Apalagi untuk pengguna template VioMagz anda hanya memasang satu (1) kode script.

Belum ada Komentar untuk "Cara Memasang Tombol Download / Demo di Template Blogger"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel