Cara Membuat Pop Up di blogger
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGGHX438z3yymtexejJCPaV_yNKSqru3oKlcSjdQm0uI-pBONeVy_HrlZcjvBn6n6zbFOjKFOmrTKgASFdAfnOKH-KFJd218T3d2d8QdBqBKvvVoq8EE3y-RKZln_Q46UQmuqXTZzkH7Oz/s320/popup+by+ztncode.jpg)
tombol Pop Up ini bisa diletakkan dimanapun kalian inginkan.
tombol Pop Up ini biasanya digunakan untuk menampilkan menu lain seperti formulir, pemberitauan atau ucapan terimakasih dan dll.
oke tanpa berlama-lama silahkan disimak tutorial nya.
1). pertama jika kamu menggunakan blogger, cariCSS
/* By https://ztncoding.blogspot.com */
.openPopup {
display: block;
margin: 1.5em auto;
padding: 12px 15px;
outline: 0;
border: 0;
box-sizing: border-box;
cursor: pointer;
background-color: #0091ea;
font-size: 16px;
color: #fff;
text-align: center;
border-radius: 3px;
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.26);
min-width: 7em;
}
.btn {
color: #3A3A3A;
text-align: center;
background: #f9f9f9;
padding: 20px;
margin: 60px auto 50px auto;
border: 2px solid #3A3A3A;
border-radius: 2px;
text-decoration: none;
display: block;
width: 120px;
font-size: 14px;
}
.jPopup .content {
text-align: center;
}
.jPopup .content strong {
font-size: 50px;
}
.jPopup .content p {
font-size: 22px;
}
@-webkit-keyframes a {
0% {
opacity: 0;
-webkit-transform: scale(.85);
transform: scale(.85)
}
70% {
opacity: 1;
-webkit-transform: scale(1.03);
transform: scale(1.03)
}
to {
-webkit-transform: scale(1);
transform: scale(1)
}
}
@keyframes a {
0% {
opacity: 0;
-webkit-transform: scale(.85);
transform: scale(.85)
}
70% {
opacity: 1;
-webkit-transform: scale(1.03);
transform: scale(1.03)
}
to {
-webkit-transform: scale(1);
transform: scale(1)
}
}
@-webkit-keyframes b {
0% {
opacity: 1
}
to {
opacity: 0
}
}
@keyframes b {
0% {
opacity: 1
}
to {
opacity: 0
}
}
.jPopupOpen,
.jPopupOpen body {
overflow: hidden;
position:absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px
}
.jPopupOpen .jPopup {
-webkit-animation: a .5s cubic-bezier(.34, .34, .26, .99);
animation: a .5s cubic-bezier(.34, .34, .26, .99)
}
.jPopupClosed .jPopup {
-webkit-animation: b .25s ease-in;
animation: b .25s ease-in
}
.jPopup {
position: absolute;
z-index: 9999;
max-width: 100%;
padding: 50px 15px 15px;
box-sizing: border-box
}
.jPopup,
.jPopup:after {
top: 0;
right: 0;
bottom: 0;
left: 0
}
.jPopup:after {
content: "";
position: fixed;
z-index: 9998;
background: #fff
}
.jPopup>.jCloseBtn {
position: absolute;
right: 0;
top: 0;
z-index: 9999;
outline: 0;
border: 0;
box-sizing: border-box;
cursor: pointer;
width: 50px;
height: 50px;
background: transparent
}
.jPopup>.jCloseBtn>svg {
width: 30px;
height: 100%;
fill: #adadad;
-webkit-transition: transform .3s ease-in-out;
transition: transform .3s ease-in-out
}
.jPopup>.jCloseBtn:hover>svg {
-webkit-transform: rotate(180deg);
transform: rotate(180deg)
}
.jPopup>.jCloseBtn:active {
margin-top: 1px
}
.jPopup>.content {
top: 83px;
left: 15px;
right: 15px;
position: absolute;
z-index: 9999;
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
bottom: 0;
border-radius: 1em;
overflow: hidden;
}
@media screen and (min-width:680px) {
.jPopup {
padding: 80px 30px 30px
}
.jPopup>.jCloseBtn {
right: 10px;
top: 0.50em;
width: 40px;
height: 40px;
}
.jPopup>.jCloseBtn>svg {
width: 30px;
height: 100%
}
.jPopup>.content {
left: 30px;
right: 30px
}
}
.container {
background-size: 600% 600%;
display: flex;
align-items: center;
height: 100%;
justify-content: center;
-webkit-animation: gradientShift 10s ease infinite;
-moz-animation: gradientShift 10s ease infinite;
animation: gradientShift 10s ease infinite;
}
.popup {
color: #aaa;
width: 400px;
height: 300px;
background-color: white;
border-radius: 5px;
box-shadow: 1px 1px 5px 3px rgba(0, 0, 0, .1);
padding: 30px;
position: relative;
}
.popup h1 {
color: #000;
font-size: 1em;
text-align: center;
}
.popup p {
font-size: .8em;
line-height: 1.4em;
text-align: center;
}
2). Kedua Cari
JavaScript
// By https://ztncoding.blogspot.com
{'use strict';var $html;let jPopup = function(content = '') {this.content = content.contentHtml;$html = document.querySelector('html');this.init();};function removeClass(element, cssClass) {var reg = new RegExp('(^| )' + cssClass + '($| )','g');element.className = element.className.replace(reg,' ');}jPopup.prototype = {init() {$html.className += ' jPopupOpen';this.buildPopup();},buildPopup() {document.body.insertAdjacentHTML('beforeend','<div class="jPopup">\<button type="button" class="jCloseBtn">\<svg height="32px" viewBox="0 0 32 32" width="32px" xml:space="preserve"><path d="M17.459,16.014l8.239-8.194c0.395-0.391,0.395-1.024,0-1.414c-0.394-0.391-1.034-0.391-1.428,0 l-8.232,8.187L7.73,6.284c-0.394-0.395-1.034-0.395-1.428,0c-0.394,0.396-0.394,1.037,0,1.432l8.302,8.303l-8.332,8.286 c-0.394,0.391-0.394,1.024,0,1.414c0.394,0.391,1.034,0.391,1.428,0l8.325-8.279l8.275,8.276c0.394,0.395,1.034,0.395,1.428,0 c0.394-0.396,0.394-1.037,0-1.432L17.459,16.014z"/></svg>\</button>\<div class="content">' + this.content + '</div>\</div>');this.setupEvents();},setupEvents() {document.getElementsByClassName('jCloseBtn')[0].addEventListener('click', this.close.bind(this));},close() {$html.className += ' jPopupClosed';document.getElementsByClassName('jPopup')[0].addEventListener('animationend', function(e) {e.target.parentNode.removeChild(this);removeClass($html, 'jPopupOpen jPopupClosed');});}};window.jPopup = jPopup;window.jPopup.close = jPopup.prototype.close;}
3). Terakhir letakan kode
HTML
<!-- By https://ztncoding.blogspot.com -->
<button class="openPopup a" type="button">Contoh 1</button>
<script>
document.querySelector('.openPopup.a').addEventListener('click', function() {
var jPopupDemo = new jPopup({
contentHtml: "<div class='container'>TULIS DISINI! </div>"
});
});
</script>
ganti yang bertuliskan "TULIS DISINI"
atau bisa juga ganti dari
Posting Komentar untuk "Cara Membuat Pop Up di blogger"
Posting Komentar