Membuat Tombol Demo Dan Download Keren Di Blog (Efek Animasi)

Memiliki blog download memang biasanya harus menyertakan beberapa tombol download ataupun demo/review dari isi file download tersebut, hal ini berkhasiat biar pengunjung dapat tau mana yang harus mereka klik. Nah Agar link demo ataupun download terlihat lebih menarik dari biasanya, maka kita perlu menciptakan instruksi khusus biar terbentuk tombol yang keren, yang mana tombol ini akan mempunyai aneka macam dampak yang luar biasa. Tombol demo dan dowload yang mencolok akan memperjelas pengunjung untuk mengetahuinya sehingga mereka tidak salah klik nantinya. Biasanya bawaan template sudah terpasang tombol ini, namun jikalau Anda menginkannya yang lain, maka tinggal hapus saja dan ganti yang lain. Nah kali ini aku akan memperlihatkan tutorial memasang tombol demo dan download yang keren, manarik, dan pastinya responsive. Lalu bagaimana cara membuatnya? simak aja petunjuknya berikut.

Cara Memasang Tombol Link Demo atau Download di Blog

1. Pertama silahkan Anda login dulu ke Blogger

2. Klik Template → Edit HTML

3. Cari kode ]]></b:skin> atau </style>

4. Kemudian Copy kode CSS dibawah ini, lalu Paste diatas atau sebelum kode ]]></b:skin> atau </style>

 *{transition:all .2s ease-in-out;outline:0}@keyframes text-fade{0%{opacity:0}}body{background-color:#2d7586;font-family:Galdeano,"Hiragino Sans GB","Microsoft YaHei",Trebuchet,"Trebuchet MS",Tahoma,"Lucida Grande","Lucida Sans Unicode",Verdana,sans-serif;color:#fff;animation:text-fade 2s ease-in-out}@media (min-width:768px){.container{max-width:750px;animation:text-fade 1s}}a{color:#ccd1d9}a:hover{color:rgba(170,178,189,.3);text-decoration:none}@keyframes bounce-in{0%{padding-right:30px}40%{padding-right:6px}50%{padding-left:30px}100%{padding-left:6px}}.download{font-size:20px;font-family:Pacifico;overflow:visible;border-radius:5px;position:relative;padding-right:13px;border:none;background-color:#ea3407;color:#fff;display:block;margin:5px auto;height:50px;width:150px}.download:hover{background-color:#68c124}.download:hover i{transform:rotate(10deg)}.download i{position:absolute;top:15px;right:15px}.download.bounce-in{background-color:#328295;border:none;color:#000;padding-right:6px;animation:bounce-in .4s}.block{height:80px}.animate{font-size:20px;overflow:visible;border-radius:4px;background-color:transparent;position:relative;border:1.5px solid #fff;margin-top:15px;margin-bottom:15px;height:40px}.select{border:none;border-radius:4px;padding:.75rem;margin:15px;background-color:#fff;color:#2d7586;font-size:20px}.float{animation:float 4s infinite ease-in-out alternate}@keyframes zoom{from,to{background-color:rgba(170,178,189,.3);transform:scale(.6) rotate(.01deg)}50%{background-color:rgba(170,178,189,.6);transform:scale(.8) rotate(.01deg)}}.shadow:after{position:relative;display:block;width:1em;height:.5em;border-radius:100%;content:"";animation:zoom 4s ease-in-out infinite alternate}@keyframes rotateShake{from{transform:rotate(-10deg)}to{transform:rotate(10deg)}}@keyframes float{from,to{transform:transofrmY(0)}50%{transform:translateY(4px)}}.flyaway{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes pushOut{0%{-webkit-transform:translate(0,0) rotate(0) scale(1);transform:translate(0,0) rotate(0) scale(1)}5%{-webkit-transform:translate(15px,-2px) rotate(10deg) scale(1.2);transform:translate(15px,-2px) rotate(10deg) scale(1.2)}20%{-webkit-transform:translate(130px,-2px) rotate(-20deg) scale(1.5);transform:translate(130px,-2px) rotate(-20deg) scale(1.5)}40%{-webkit-transform:translate(280px,-40px) rotate(10deg) scale(.8);transform:translate(280px,-40px) rotate(10deg) scale(.8);opacity:.8}100%{-webkit-transform:translate(1000px,-200px) rotate(60deg) scale(0);transform:translate(1000px,-200px) rotate(60deg) scale(0);opacity:0}}@keyframes pushOut{0%{-webkit-transform:translate(0,0) rotate(0) scale(1);transform:translate(0,0) rotate(0) scale(1)}5%{-webkit-transform:translate(15px,-2px) rotate(10deg) scale(1.2);transform:translate(15px,-2px) rotate(10deg) scale(1.2)}20%{-webkit-transform:translate(130px,-2px) rotate(-20deg) scale(1.5);transform:translate(130px,-2px) rotate(-20deg) scale(1.5)}40%{-webkit-transform:translate(280px,-40px) rotate(10deg) scale(.8);transform:translate(280px,-40px) rotate(10deg) scale(.8);opacity:.8}100%{-webkit-transform:translate(1000px,-200px) rotate(60deg) scale(0);transform:translate(1000px,-200px) rotate(60deg) scale(0);opacity:0}}@-webkit-keyframes popUp{0%{-webkit-transform:translate(0,0) scale(1);transform:translate(0,0) scale(1)}10%{-webkit-transform:translate(-10px,10px) scale(1);transform:translate(-10px,10px) scale(1)}50%{-webkit-transform:translate(-15px,15px) scale(1);transform:translate(-15px,15px) scale(1);opacity:1}100%{-webkit-transform:translate(500px,-500px) scale(0);transform:translate(500px,-500px) scale(0);opacity:0}}@keyframes popUp{0%{-webkit-transform:translate(0,0) scale(1);transform:translate(0,0) scale(1)}10%{-webkit-transform:translate(-10px,10px) scale(1);transform:translate(-10px,10px) scale(1)}50%{-webkit-transform:translate(-15px,15px) scale(1);transform:translate(-15px,15px) scale(1);opacity:1}100%{-webkit-transform:translate(500px,-500px) scale(0);transform:translate(500px,-500px) scale(0);opacity:0}}.flyaway.pushOut{-webkit-animation-name:pushOut;animation-name:pushOut;-webkit-animation-timing-function:linear;animation-timing-function:lienar}.flyaway.popUp{-webkit-animation-name:popUp;animation-name:popUp}.flyaway.rotateShake{-webkit-animation-name:rotateShake;animation-name:rotateShake}.flyaway.linearShake{-webkit-animation-name:linearShake;animation-name:linearShake}@-webkit-keyframes linearShake{10%,20%,30%,40%,50%,60%,70%,80%,90%,from,to{-webkit-transform:translateX(-4px);transform:translateX(-4px)}15%,25%,35%,45%,5%,55%,65%,75%,85%,95%{-webkit-transform:translateX(4px);transform:translateX(4px)}}@keyframes linearShake{10%,20%,30%,40%,50%,60%,70%,80%,90%,from,to{-webkit-transform:translateX(-4px);transform:translateX(-4px)}15%,25%,35%,45%,5%,55%,65%,75%,85%,95%{-webkit-transform:translateX(4px);transform:translateX(4px)}}@-webkit-keyframes rotateShake{10%,20%,30%,40%,50%,60%,70%,80%,90%,from,to{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}15%,25%,35%,45%,5%,55%,65%,75%,85%,95%{-webkit-transform:rotate(10deg);transform:rotate(10deg)}}@keyframes rotateShake{10%,20%,30%,40%,50%,60%,70%,80%,90%,from,to{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}15%,25%,35%,45%,5%,55%,65%,75%,85%,95%{-webkit-transform:rotate(10deg);transform:rotate(10deg)}}

5. Jika sudah, Copy kode javascript berikut ini dan Paste diatas kode </body>

<script type='text/javascript'> function animate(x) {     $('#demo').removeClass('float shadow').addClass('flyaway ' + x).one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {         $('#demo').addClass('shadow float').removeClass('flyaway ' + x);     }); };  $(document).ready(function() {     $('.download').click(function() {         $(this).addClass('bounce-in').find('span').text(function(span, text) {             return "Success!";         });         $(this).find('i').addClass('flyaway pushOut').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {             $('.download').find('i').removeClass('flyaway pushOut');             $('.download').removeClass('bounce-in').find('span').text(function(span, text) {                 return "Download";             });         });     });     $('.animate').click(function(e) {         e.preventDefault();         var anim = $('.select').val();         animate(anim);     }); });  </script>

Baca Juga

6. Lalu Simpan atau Save Templatenya

7. Selanjutnya dikala Anda menciptakan postingan, gunakanlah instruksi berikut ini untuk penarapan atau memanggilnya di Tab HTML dan bukan Compose.

<section class="center-block">      <button class="download" onClick="window.location='#'; return false;">                 <span>Demo</span>                 <i class="fa fa-cog fa-spin animated"></i>             </button>      <button class="download" onClick="window.location='#'; return false;">                 <span>Download</span>                 <i class="fa fa-paper-plane"></i>             </button>     </section>

Silahkan Ganti tanda # dengan url link demo atau download Anda, jikalau Anda hanya ingin memasukan tombol download saja atau demo saja, maka hapus instruksi dari kode <button ke kode </button>, disini Anda dapat menganti nama tombolnya sesuai selera yang aku tandai juga dengan warna kuning.

8. Terakhir silahkan Anda cek tombolnya

[Preview ##eye##]

Nah itulah beberapa cara singkat menciptakan tombol demo atau download di blog, yang mana tombol diatas mempunyai dampak animasi dari awesome. Sekian dulu dari artikel kali ini jikalau ada yang ingin Anda tanyakan atau tidak di mengerti silahkan komentar dibawah ini terima kasih.

Wiki Dzgn

Membuat Tombol Demo Dan Download Keren Di Blog (Efek Animasi)

Menu Halaman Statis