Demo Download Button di Blog, caranya ???

Demo Download Button di Blog, caranya ???

Demo Download Button di Blog, caranya ???

infoalya.com

hhhmmm, Jumpa lagi update lagi, demo lagi.
Apakabar nih sahabat, tentu baikkan ? Kali ini admin ingin berbagi langkah tentang membuat tombol / button untuk download dan demo di blog yaaa....... sebenarnya button seperti ini sudah banyak jenisnya dan penampakannya juga banyak serta keren-keren karya para blogger tanah air, salah satu contohnya disini dan disini, baiklah kawan kita intip 👀 dulu demonya yaaaaa

DEMO

Bagaimana demonya, tertarik untuk membuatnya ? yuukkk ikuti langkah-langkahnya.

saya beranggapan kawan-kawan sudah berada di template editor yaa, lalu silahkan kawan - kawan copy dan paste kode dibawah ini dan letakkan tepat diatas tag ]]></b:skin> atau diatas tag </style>

.button{float:left;list-style:none;text-align:center;width:95%;margin:10px;padding:2px;font-size:14px;clear:both;border: 1px solid rgba(0,0,0,0.1)}
.button ul{margin:0;padding:0}
.button li{display:inline;margin:5px;padding:0;list-style:none}
.button li a.demo,.button li a.download{position:relative;padding:14px 48px 14px 16px;background:#303030;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}
.button li a.download{background:#f44336}
.button li a.demo:hover{background:#f44336}
.button li a.download:hover{background:#202020}
.button li a.demo:active,.button li a.download:active{cursor:pointer}
.button li a.demo:after{content:'\f135';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}
.button li a.download:after{content:'\f019';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}
.button li:hover a.demo:after,.button li:hover a.download:after{background:transparent;-webkit-animation:fadeinup .3s alternate ease infinite;animation:fadeinup .3s alternate ease infinite}
@-webkit-keyframes fadeinup{from{-webkit-transform:translateY(0)}to{-webkit-transform:translateX(3px)}}
@keyframes fadeinup{from{transform:translateX(0)}to{transform:translateY(3px)}}


Selanjutnya temukan </head> dan paste kode dibawah ini diatasnya yaaa.

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


jika pada template sudah ada kode diatas maka tidak perlu dipasang lagi


Sekarang untuk penerapannya di blog kawan - kawan hanya menggunakan kode dibawah ini saja.

<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="https://www.infoalya.com.com/" target="_blank">Demo</a></li>
<li><a class="download" href="https://www.madrasah.infoalya.com/" target="_blank">Download</a></li>
</ul>
</div>
<div class="clear">
</div>.

silahkan ganti link yang saya tandai dengan link demo serta link unduhan milikmu kawan

ya wessslaaahhh sampai disini dulu kawan, lain hari jumpa lagi. 💓 byee..............

Share On:

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

0 Comment

Add Comment

[+] Silahkan tinggalkan komentar
[+] Berkomertarlah dengan santun
[+] Mohon tidak meninggalkan live link
[+] Terima kasih untuk komentar anda

https://infoalya.com

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - https://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Info Alya? Keep us running by whitelisting Info Alya in your ad blocker.

This is how to whitelisting Info Alya in your ad blocker.

Thank you!

×
×
×