Cara Membuat Tombol Download Lighbox

Posted on

Cara Membuat Tombol Download Lighbox ~ Hallo Sobat…, kembali lagi bersama Aak. Pastinya sobat sudah tidak asing lagi dengan Lighbox seperti sebelumnya suda saya ulas yaitu membuat Gambar/Image Lightbox Dengan Efek Transisi.

Sedikit akan saya jelaskan Lighbox adalah halaman yang akan terbuka ketika cursor berada diatas tombol atau ketika tombol dihover. Pada tombol ini memiliki effect balik ketika cursor berada diatas tombol, anda tertarik berikut ini caranya :

Silahkan buka Editor Template, kemudian Anda cari kode ]]></b:skin> lalu salin kode dibawah ini dan pasangkan diatasnya atau sebelumnya .

:root .contain {
  background: white;
  box-shadow: 0 2px 2px #499efc;
  color: #111;
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
  padding: 3em;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
  position: relative;
}
:root .contain + .contain {
  margin-top: 3em;
}

@-webkit-keyframes close-before {
  0% {
    margin-top: 0;
  }
  100% {
    margin-top: -10px;
  }
}

@keyframes close-before {
  0% {
    margin-top: 0;
  }
  100% {
    margin-top: -10px;
  }
}
@-webkit-keyframes close-after {
  0% {
    margin-top: -10px;
  }
  100% {
    margin-top: 0px;
  }
}
@keyframes close-after {
  0% {
    margin-top: -10px;
  }
  100% {
    margin-top: 0px;
  }
}
:root {
  box-sizing: border-box;
  font-family: ‘Oswald’, Arial, sans-serif;
  font-size: 20px;
}
:root * {
  box-sizing: border-box;
}
:root *:before, :root *:after {
  box-sizing: inherit;
}
.vimeo-launch {
  background: white;
  border: none;
  box-shadow: inset 0 0 0 4px white, inset 0 0 0 8px #62abfc;
  color: #3091fb;
  display: block;
  margin: 0 auto;
  overflow: hidden;
  padding: 30px;
  position: absolute;
  text-transform: uppercase;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.vimeo-launch:before, .vimeo-launch:after {
  content: attr(data-label);
  display: block;
  height: 100%;
  padding: 30px;
  position: absolute;
  left: 0;
  right: 0;
  -webkit-transition: 250ms top;
          transition: 250ms top;
}
.vimeo-launch:before {
  background: white;
  box-shadow: inset 0 0 0 4px white, inset 0 0 0 8px #62abfc;
  color: #3091fb;
  top: 0;
}
.vimeo-launch:after {
  background: #62abfc;
  box-shadow: inset 0 0 0 4px #62abfc, inset 0 0 0 8px white;
  color: white;
  top: 100%;
}
.vimeo-launch:hover:before {
  top: -100%;
}
.vimeo-launch:hover:after {
  top: 0;
}

#vimeo-pop-container {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9999999;
  background: rgba(0, 0, 0, 0.75);
}
#vimeo-pop-container div {
  height: 450px;
  width: 800px;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
#vimeo-pop-container .vimeo-close {
  background-color: transparent;
  border: 3px solid white;
  cursor: pointer;
  margin-bottom: 10px;
  height: 30px;
  width: 30px;
  position: absolute;
  bottom: 100%;
  right: 0;
  -webkit-transition: 200ms background-color;
          transition: 200ms background-color;
}
#vimeo-pop-container .vimeo-close:before, #vimeo-pop-container .vimeo-close:after {
  content: ”;
  background: white;
  border-radius: 3px;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
  -webkit-transition: 500ms all;
          transition: 500ms all;
}
#vimeo-pop-container .vimeo-close:before {
  height: 20px;
  width: 2px;
  margin-left: -1px;
  margin-top: -10px;
}
#vimeo-pop-container .vimeo-close:after {
  height: 2px;
  width: 20px;
  margin-left: -10px;
  margin-top: -1px;
}
#vimeo-pop-container .vimeo-close:hover {
  background-color: rgba(0, 0, 0, 0.25);
}
#vimeo-pop-container .vimeo-close.closing:before {
  -webkit-transform: rotate(450deg);
      -ms-transform: rotate(450deg);
          transform: rotate(450deg);
  margin-left: -2px;
  margin-top: 0;
  -webkit-animation: close-before 500ms ease 500ms 1 forwards;
          animation: close-before 500ms ease 500ms 1 forwards;
}
#vimeo-pop-container .vimeo-close.closing:after {
  -webkit-transform: rotate(540deg);
      -ms-transform: rotate(540deg);
          transform: rotate(540deg);
  margin-left: -11px;
  margin-top: -10px;
  -webkit-animation: close-after 500ms ease 500ms 1 forwards;
          animation: close-after 500ms ease 500ms 1 forwards;
}
#vimeo-pop-container iframe {
  border: 6px solid white;
  height: 100%;
  width: 100%;
}

Selanjutnya Anda cari kode </head> atau body, lalu copy kode dibawah ini dan pastekan diatasnya.

<script src=”//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js” />

Catatan: Apabila di template Anda sudah terinstall kode diatas maka lewati langkah tersebut.

Masih pada kode </body> silahkan Anda salin kode dibawah ini dan pasangkan diatasnya atau sebelumnya.

<script type=”text/javascript”>
$(‘body’).on(‘click’, ‘.vimeo-launch’, function () {
    var videoID = $(this).data(‘vimeo-id’), $video = ‘<div id=”vimeo-pop-container”><div><span class=”vimeo-close”></span><iframe src=”http://player.vimeo.com/video/’ + videoID + ‘/?title=1&amp;byline=1&amp;portrait=0&amp;autoplay=1″ width=”500″ height=”281″ frameborder=”0″ webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div></div>’;
    $(‘body’).append($video);
}).on(‘click’, ‘.vimeo-close’, function () {
    $(this).addClass(‘closing’);
    $(‘#vimeo-pop-container’).delay(700).animate({ /*pengaturan waktu putaran pada tombol*/
        height: 0,
        top: ‘50%’
    }, ‘fast’, function () {
        $(‘#vimeo-pop-container’).remove();
    });
});
</script>

Untuk pemasangan HTML, Anda menuju Entri baru kemudian salin kode dibawah ini dan pasangkan pada Mode HTML.

<a href=”URL Tujuan” class=”vimeo-launch” data-label=”Isikan data label Anda disini” data-vimeo-id=”91578623″ >
Isikan kembali Label Anda disini
</a>

Semoga bermanfaat!

Leave a Reply

Your email address will not be published. Required fields are marked *