Cara Membuat Tombol Download Di Viomagz

Cara Membuat Tombol Download Di Viomagz

Cara Membuat Tombol Download Di Viomagz - pada kesempatan kali ini saya akan membagikan cara membuat button demo dan download disini saya menggunakan icon font awesome ya, pastikan sebelum menggunakan button demo dan download ini di blog anda sudah terpasang kode pemanggil font awesome nya jika belum memasang nya silahkan pasang kode dibawah ini tepat dibwah kode <header>
<link href='//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>

Cara Membuat Tombol Download 

Tombol button ini tidak hanya bisa di pasang pada Template Viomagz saja, di Template lain pun bisa

1. Buka Blogger 
2. Buka Tema > Edit HTML > cari kode ]]</b:skin>
3. Kemudian pastekan kode dibawah ini tepat diatas kode tersebut
/* Tombol Download Google Deso*/
#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 #1abc9c; margin:10px; transition:.5s; }
.bie-slide2 { border:2px solid #1abc9c; }
.bie-slide2:hover { background-color:#1abc9c; }
.bie-slide2:hover span.circle2 { left:100%; margin-left:-45px; background-color:#fdfdfd; color:#1abc9c; }
.bie-slide2:hover span.circle2 { color:#1abc9c; }
.bie-slide2:hover span.title2 { left:40px; opacity:0; }
.bie-slide2:hover span.title-hover2 { opacity:1; left:40px; }
.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:#1abc9c; }
.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:#026A2A; transition:.5s; }
.bie-slide2 span.title2,.bie-slide2 span.title-hover2 { color:#1abc9c; left:80px; }
.bie-slide2 span.title-hover2 { left:80px; opacity:0; }
.bie-slide2 span.title-hover2 { color:#fff; }

4. Kemudian simpan tema.

Cara Menggunakan Button Demo dan Download

1. Silahkan membuat Postingan Baru
2. Kemudian pada postingan tersebut klik HTML bukan Compose
3. Pastekan kode dibawah ini kedalam postingan tersebut dalam mode HTML

<div dir="ltr" style="text-align: left;" trbidi="on">
<div id="wrap" style="text-align: center;">
<a class="bie-slide2" href="https://www.blogger.com/URL-DOWNLOAD" target="_blank">
<span class="circle2"><i class="fa fa-eye"></i></span>
<span -7px="" -webkit-animation:kaxtamspin="" -webkit-transform:="" .mutermuter="" 1.25s="" 7px="" animation:="" class="title2" cssmenu="" deg="" fff="" fill:="" from="" ikon="" infinite="" kaxtamspin="" keyframes="" linear="" margin-right:="" normal="" rotate="" svg="" to="" transform:rotate="" vertical-align:="" webkit-keyframes="">Demo</span>
<span class="title-hover2">Klik disini</span></a>
</div>
<div id="wrap" style="text-align: center;">
<a class="bie-slide2" href="https://www.blogger.com/URL-DOWNLOAD" target="_blank">
<span class="circle2"><i class="fa fa-download"></i></span>
<span class="title2">Download</span>
<span class="title-hover2">Klik disini</span></a>

Silahkan ganti kode ini https://www.blogger.com/URL-DOWNLOAD dengan link anda

Penutup

Nah begitulah cara membuat Button Demo dan Download jika ada permintaan saya akan membuatkan nya selagi saya bisa membuat nya trimakasih sudah mampir See you in the next post

Anda mungkin menyukai postingan ini