Posted by Aak
Aak-share.com Updated at: 3:15:00 PM

Cara Membuat Tombol Download Lighbox

5 comments:
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!



Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

5 comments

terima kasih aak infonya.. terkadang memang dibutuhkan tombol download untuk menunjang artikel yang dibuat...
bermanfaat sekali.....
sukses selalu....

Balas

Iya betul sekali sob, dan dengan membuat style pada tombol download dapat juga menambah daya tarik tersendiri.
terimaksih banyak Sob.

Balas

Informasi yang sangat bermanfaat gan, terimakasih :)

Balas

Terima kasih atas infonya, walaupun blog saya bukan blog download tapi tips ini bermanfaat untuk sekedar download template gratis saja! :)

Balas

Iya sam-sama gan.
Ada effect jQuery tombol dowonload jdi lebih menarik gan.

Balas