Beranda
Blogger

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

5 komentar

  1. 14 April 2020 pukul 11.33
    Akhirnya bisa kunbaljuga.
    Kalau soal CSS tema/ Template, saya sudah tahu cuman malas desainnya, agan ahmad ini masih semangat nge blognya. Teruskan edukasi nya mas biar blogger semakin pintar.

    Salam hangat http://infosais.blogspot.com
    • 14 April 2020 pukul 16.29
      Trimakasih mas sudah berkunjung
  2. 15 April 2020 pukul 06.51
    Saya download template disini.. jadi tidak perlu setting edit html.. cuma ambil kode pemanggilnya aja hehe

    Btw ditunggu tutor biar tombol sharenya banyak seperti di blog agan ya :)

  3. 25 Mei 2020 pukul 08.42
    Gan, template viomagz bisa yang dijagodezign kok wewnya gk berfungsi lagi ya.. padahal yang baca banyak tapi di vew templatenya 0

    Itu kenapa gan??
    • 14 Juni 2020 pukul 16.27
      Tenplate yang mana gan coba taruh link nya
Jago Design - Teaching is Our Passion