Cara Membuat Tombol Demo & Download Viomagz

Cara Membuat Tombol Download Tombol button ini tidak hanya bisa di pasang pada Template Viomagz saja, di Template lain pun bisa. 

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 Di Viomagz

1. Buka Blogger 

 2. Buka Tema > Edit HTML > cari kode 

3. Kemudian pastekan kode dibawah ini tepat diatas kode tersebut

/* Tombol Download Sobat Blogspot */

#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 

Nah begitulah cara membuat Button Demo dan Download ,semoga bermanfaat.