Membuat Modal Popup Dengan JavaScript di Blogger

  • Whatsapp
Membuat Modal Popup Dengan JavaScript di Blogger
Membuat Modal Popup Dengan JavaScript di Blogger

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.

Bacaan Lainnya

Sebelumnya saya juga sudah pernah posting artikel tentang membuat popup di blogger secara otomatis tanpa button, bisa kalian lihat di artikel berikut.

Contoh

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

Selanjutnya kalian tinggal memasang HTMLnya. Bisa kalian pasang di dalam postingan, laman, widget / di edit html.
Tapi pada tutorial ini, saya akan memasangnya di dalam postingan.

Buat postingan baru atau edit postingan yang ingin dipasang popup windowsnya.

Kalau sudah, pilih mode HTML bukan Compose

Lalu kalian copy dan paste kode popup dibawah ini

<button class="openPopup" type="button">Open Popup</button> <script type="text/javascript">document.querySelector('.openPopup').addEventListener('click', function() { var jPopupDemo = new jPopup({ contentHtml: "KODE POPUP KALIAN SIMPAN DI SINI" });});</script>

Open Popup, tombol button untuk membuka popupKODE POPUP KALIAN SIMPAN DI SINI, ganti dengan script yang ingin dijadikan popup.
bisa di isi dengan iframe, jpg, video dll
#contoh

<button class="openPopup" type="button">Open Popup</button> <script type="text/javascript">document.querySelector('.openPopup').addEventListener('click', function() { var jPopupDemo = new jPopup({ contentHtml: "<div class='container'>\ <div class='popup'><div class='smile'>&#9786</div>\ <h1>This is a popup!</h1>\ <p>This is a nice little message that shows what the popup is for.</p>\ <p>Isn't this pleasant. Serene. Lovely.</p>\ <a href='https://mastamvan.blogspot.com'>Back To Tutorial</a>\ </div></div>" });});</script>

Kalian juga bisa membuat beberapa popup yang berbeda di satu halaman dengan mengganti atau menambah class yang akan di targetkan.

Pemasangan html popup di javascriptnya jangan ada kutip dua ” tapi gunakan kutip satu ‘

Untuk melihat hasilnya kalian bisa priview / pertinjauan dulu.

Kalo sudah, tinggal publikasikan

Cukup sekian artikel tentang Cara Membuat Button Popup Di Blogger ini semoga bermanfat. Apabila ada yang tidak dimengerti, silahkan bertanya di kolom komentar.