Cara Membuat Tombol Download Seperti Template Viomagz

Oky gusy kali ini saya akan membagikan tutorial cara membuat tombol / button donwload seperti template viomagz, berhubung saya menggunakan template viomagz jadi saya tau persis code yang di gunakan oleh mas sugeng ( desainer template viomagz ) dalam pembuatan tombol download yang keren ini.

Keuntungan dari tombol download ini dibandingkan dengan tombol download lainnya ialah , penggunaan script yang dibilang tidak terlalu banyak sehingga sangat mudah intuk digunakan bahkan untuk orang awam sekalipun, responsive ( tampilannya menyesuaikan ukuran layar yang digunakan ) serta terdapat animasi yang akan bergerak jika cursor menyentuh tombol download tersebut.

Nah untuk kalian yang ingin memasang tombol download ini agar terlihat keren, yuk simak tutorial berikut ini  

 Cara Membuat Tombol Download Seperti Template Viomagz

Demo

Download

 
1.  silahkan login akun blogger anda terlebih dahulu
2. setelah itu pada menu dasbord silahkan masuk ke   Tema -> Edit Html 
3. kemudian cari code  ]]></b:skin> ( untuk mempermudah silahkan gunakan ctrl + f )
4. dan copy dan paste script di bawah ini tepat diatas kode ]]></b:skin> 

/* Tombol Download */
.buttonDownload {
	border-radius: 3px;
	display: inline-block;
	position: relative;
	padding: 10px 25px;
	background-color: $(link.color);
	color: white !important;
	font-weight: 500;	
	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;
	}
}

5. setelah itu klick Save

Cara Menggunakan Tombol Download Pada Artikel / Postingan Blog

untuk menggunakannya sangatlah mudah

1.  bukalah postingan anda
2. kemudian masuk ke bagian Html  bukan compose
3. tulis

 <a class="buttonDownload" href="https://link-yang-dituju/" target="_blank">Text Yang Anda Inginkan</a> 

4. Silahkan edit sesuai kebutuhan anda kemudian klick Simpan

https://link-yang-dituju/ = link yang akan terbuka saat anda memencet tombol tersebut

Text Yang Anda Inginkan = adalah text yang akan tampil pada tombol tersebut

target="_blank" = berfungsi agar link terbuka pada new tab

Akhir Kata 

Itulah artikel mengenai Cara Membuat Tombol Download Seperti Template Viomagz, Perlu anda Ketahui artikel ini adalah artikel hasil revisi saya dari berbagai sumber, jadi jika ada kesamaan kata dengan artikel lainnya mohon dimaafkan. semoga artikel ini dapat bermanfaat bagi anda semua.

apabila anda memiliki pertanyaan, kritik ataupun saran mengenai artikel ini silahkan hubungi saya melalui halaman contact admin atau dengan memberi komentar dibawah ini.

see you next time

Bagikan Artikel ini