- Login ke akun blogger kalian
- Pilih menu Template → Edit HTML
- Sekarang, cari kode </head>. Kalo udah ketemu, masukan CSS dibawh 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 membuaka popup
KODE 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'>☺</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
0 comments:
Posting Komentar