Cara Membuat Tombol Download Button Di Blogger : 100% WORK - Jejakdzgn

Cara Membuat Tombol Download Button Di Blogger : 100% WORK

Jejakdzgn.my.id - Pada kesempatan kali ini, saya akan membagikan sebuah tutorial Cara Membuat Tombol Download Button Di Blogger : 100% WORK.

Cara-Membuat-Tombol-Download-Button.

Tombol download button ini bisa digunakan diberbagai template dan tentunya akan terlihat keren, jika anda menggunakannya.

Tombol download button terinpirasi dari salah satu blogger terkenal yaitu mba arlina, mba arlina merupakan seorang blogger yang cukup terkenal karena blog yang dia bahas merupakan blog design template, untuk itulah saya ingin membuatnya tombol download button tersebut.

Tombol download button ini sangat responsive dan sudah pernah saya gunakan, hasilnya pun sangat bagus dan keren.

Tombol download button ini menggunakan flat UI, yang dimana jika kita mengklick tombol download tersebut, maka akan bergeser arah panahnya. Nah, jika anda penasaran dan ingin membuatnya, anda bisa mengikuti langkah-langkah dibawah ini.

Cara Membuat Tombol Download Button Di Blogger : 100% WORK

Sebelum membuat nya, saya ingin bilang terlebih dahulu, tampilan widget ini menggunakan font awesome, jadi kalian harus menambahkan link CSS terlebih dahulu.

Langkah 1 : kalian masuk ke Blogger > Template > Edit HTML.

Langkah 2 : Pastika anda sudah ada kode font awesome, jika tidak ada kalian bisa tambahkan kode font awesome tersebut, caranya adalah kalian coppy kode dibawah ini, lalu pastekan kode tersebut di atas kode </head>.

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>

Langkah 3 : setelah kalian tambahkan kode tersebut, maka langkah selanjutnya adalah kalian coppy kode dibawah ini, lalu pastekan kode tersebut diatas kode ]]></b:skin>.

/* CSS Button Style 2 by www.jejakdzgn.my.id */
.button2{float:left;list-style:none;text-align:center;width:95%;margin:10px;padding:2px;font-size:14px;clear:both}
.button2 ul{margin:0;padding:0}
.button2 li{display:inline;margin:5px;padding:0;list-style:none}
.button2 li a.demo,.button2 li a.download{position:relative;padding:14px 48px 14px 16px;background:#f39c12;display:block;color:#fff!important;font-weight:700;font-size:14px;text-align:left;text-transform:uppercase;letter-spacing:.2px;border-radius:3px;box-shadow:0 1px rgba(0,0,0,0.1);line-height:normal;transition:all .3s;max-width:170px;margin:auto;overflow:hidden}
.button2 li a.download{background:#3498db}
.button2 li a.demo:hover,.button2 li a.download:hover{background:#666}
.button2 li a.demo:active,.button2 li a.download:active{cursor:pointer}
.button2 li a.demo:after,.button2 li a.download:after{content:'F054';background:rgba(0,0,0,0.1);position:absolute;right:0;top:0;font-weight:normal;display:inline-block;margin:0 0 0 10px;color:#fff;padding:16px 24px;font-family:fontawesome;transition:all .3s}
.button2 li:hover a.demo:after,.button2 li:hover a.download:after{background:transparent;-webkit-animation:bounceright .3s alternate ease infinite;animation:bounceright .3s alternate ease infinite}
@-webkit-keyframes bounceright{from{-webkit-transform:translateX(0)}to{-webkit-transform:translateX(3px)}}
@keyframes bounceright{from{transform:translateX(0)}to{transform:translateX(3px)}}

Langkah 4 : kemudian kalian simpan template nya.

Langkah 5 : langkah selanjutnya adalah penggunaan nya, untuk menggunakan tombol download dan demo, kalian tinggal tambah kode dibawah di postingan kalian.

<div style="text-align: center;">
<ul class="button2">
<li><a class="demo" href="https://www.jejakdzgn.my.id" target="_blank">Demo Link</a></li>
<li><a class="download" href="https://www.jejakdzgn.my.id" target="_blank">Download Link</a></li>
</ul>
</div>
<div class="clear"></div>

PENTING : Ganti URL https://www.jejakdzgn.my.id/ dengan URL website kalian.

Akhir Kata :

Sampai sini, kalian sudah berhasil membuat tombol download dan demo tersebut.

Itulah Cara Membuat Tombol Download Button Di Blogger : 100% WORK, semoga dengan adanya artikel ini, dapat membantu kalian semua.
Show Comments
Hide Comments

Belum ada Komentar untuk "Cara Membuat Tombol Download Button Di Blogger : 100% WORK"

Posting Komentar

Catatan Untuk Para Jejaker
  • Mohon Tinggalkan jejak sesuai dengan judul artikel.
  • Tidak diperbolehkan untuk mempromosikan barang atau berjualan.
  • Dilarang mencantumkan link aktif di komentar.
  • Komentar dengan link aktif akan otomatis dihapus
  • *Berkomentarlah dengan baik, Kepribadian Anda tercemin saat berkomentar.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel