×

Owner / Author / Admin / etc

    Muhamad Arsad    

"Pada halaman web ini saya akan membagikan informasi informasi menarik seputar Blogger, Template, Widget, Internet, dan juga berbagai tips-tips menarik lainnya."

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
Admin Ganteng Tapi Jomlo :v
  • Facebook
  • Twitter
  • Instagram
  • Tampilkan Komentar
    Sembunyikan Komentar

    5 Responses to "Cara Membuat Tombol Download Di Viomagz"

    1. 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

      ReplyDelete
    2. 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 :)

      ReplyDelete
    3. Gan, template viomagz bisa yang dijagodezign kok wewnya gk berfungsi lagi ya.. padahal yang baca banyak tapi di vew templatenya 0

      Itu kenapa gan??

      ReplyDelete

    Iklan Atas Artikel

    Iklan Tengah Artikel 1

    Iklan Tengah Artikel 2

    Iklan Bawah Artikel