Petik.net - Membuat Modal Popup Dengan JavaScript di Blogger – Cara Membuat Popup Button di Postingan Blog, kali ini saya akan membagikan script untuk membuat sebuah popup window ketika button di klik dengan javascript.
Script popup ini bisa kalian pasang di postingan, sidebar, menu dll dan untuk tampilannya bisa di sesuaikan dengan keinginan kalian.
Sebelumnya saya juga sudah pernah posting artikel tentang membuat popup di blogger secara otomatis tanpa button, bisa kalian lihat di artikel berikut.
Membuat Modal Popup Dengan JavaScript di Blogger
Login ke akun blogger kalian
Pilih menu Template → Edit HTML
Sekarang, cari kode </head> .
Kalo udah ketemu, masukan kode css dibawah ini tepat diatasnya
<style type="text/css">
.openPopup,.btn {
display: block;
}
.openPopup,.btn,.MasTamvan .content {
text-align: center;
}
.openPopup {
margin: 0 auto;
padding: 12px 15px;
outline: 0;
border: 0;
box-sizing: border-box;
cursor: pointer;
background-color: #0091ea;
font-size: 16px;
color: #fff;
border-radius: 3px;
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.26);
min-width: 7em;
}
.btn {
color: #3A3A3A;
background: #f9f9f9;
padding: 20px;
margin: 60px auto 50px auto;
border: 2px solid #3A3A3A;
border-radius: 2px;
text-decoration: none;
max-width: 120px;
font-size: 14px;
}
.MasTamvan .content strong {
font-size: 50px;
}
.MasTamvan .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;
}
}
.MasTamvanOpen,.MasTamvanOpen body {
overflow: hidden;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.MasTamvanOpen .MasTamvan {
-webkit-animation: a .5s cubic-bezier(.34,.34,.26,.99);
animation: a .5s cubic-bezier(.34,.34,.26,.99);
}
.MasTamvanClosed .MasTamvan {
-webkit-animation: b .25s ease-in;
animation: b .25s ease-in;
}
.MasTamvan {
position: absolute;
z-index: 9999;
max-width: 100%;
padding: 50px 15px 15px;
box-sizing: border-box;
}
.MasTamvan,.MasTamvan:after {
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.MasTamvan:after {
content: "";
position: fixed;
z-index: 9998;
background: #fff;
}
.MasTamvan>.TSloseBtn {
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;
}
.MasTamvan>.TSloseBtn>svg {
width: 30px;
height: 100%;
fill: #adadad;
-webkit-transition: transform .3s ease-in-out;
transition: transform .3s ease-in-out;
}
.MasTamvan>.TSloseBtn:hover>svg {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.MasTamvan>.TSloseBtn:active {
margin-top: 1px;
}
.MasTamvan>.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) {
.MasTamvan {
padding: 80px 30px 30px;
}
.MasTamvan>.TSloseBtn {
right: 10px;
top: 0.50em;
width: 40px;
height: 40px;
}
.MasTamvan>.TSloseBtn>svg {
width: 30px;
height: 100%;
}
.MasTamvan>.content {
left: 30px;
right: 30px;
}
}
</style>
Selanjutnya cari lagi kode </body>. Kalo udah ketemu, masukan Javascript dibawh ini tepat diatasnya.
<script type="text/javascript">
//<![CDATA[
{'use strict';var $html;let MasTamvan = 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,' ');}MasTamvan.prototype = {init() {$html.className += ' MasTamvanOpen';this.buildPopup();},buildPopup() {document.body.insertAdjacentHTML('beforeend','<div class="MasTamvan">\<button type="button" class="TSloseBtn">\<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('TSloseBtn')[0].addEventListener('click', this.close.bind(this));},close() {$html.className += ' MasTamvanClosed';document.getElementsByClassName('MasTamvan')[0].addEventListener('animationend', function(e) {e.target.parentNode.removeChild(this);removeClass($html, 'MasTamvanOpen MasTamvanClosed');});}};window.MasTamvan = MasTamvan;window.MasTamvan.close = MasTamvan.prototype.close;}
//]]>
></script>
Sekarang Save template
Follow us on
