بِسْــــــــــــــــمِ اﷲِالرَّØْÙ…َÙ†ِ الرَّØِيم
POP UP modal menu biasa disebut dari Menu Pilihan Baru menjadi item widget pilihan blogger yang mendukung tampilan blognya. Ketika diklik pada menu yang dipilih maka akan secara otomatis muncul menu baru sebagai penjelasan dari menu yang telah dibuka. Kita sebut hal ini dengan Pop Up.
Dan biasanya pop ini ini bisa dipasang di halaman sidebar, halaman postingan dan bisa di halaman lainnya dari display blog. Tidak ada aturan baku untuk memasangnya. Alias bisa disesuaikan dengan keinginan kalian juga bisa kok. Mau ditaruh dimana saja asal tidak mengurangi code yang ada di dalamnya tidak masalah.
Baca Juga :
Untuk itu kita langsung saja ke tutorialnya ya :
1. Masuk ke halaman Dashboard Blogger
2. Klik Tema
3. Pilih Sesuaikan : Edit HTML
4. Tempelkan kode dibawah ini diatas kode </head>
<style type="text/css">
.openPopup,.btn{display:block}
.openPopup,.btn,.jPopup .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}
.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:0;left:0;right:0;bottom:0}
.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}}
</style>5. Masih di template, cari kode </body>. Tempelkan kode dibawah ini diatas kode </body>
<script type="text/javascript">
//<![CDATA[
{'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;}
//]]>
</script>6. Save semua proyek dan publikasikan.
Sekarang waktunya untuk menampilkan Pop Upnya. Cara menempelkannya juga mudah karena kalian tinggal menempelkan kode dibawah ini dalam halaman postingan saja. Ingat pada halaman postingan pilih :
Mode HTML bukan Compose
Ini dia scriptnya :
<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 TARUH SINI"
});
});
</script>Catatan :
Untuk tulisan : KODE POP UP KALIAN TARUH SINI adalah kode script bisa iframe, embed, foto, tulisan dan koding lainnya.
Untuk script yang sudah dibungkus tersebut untuk diperhatikan adalah " diganti '. Petik dua diganti dengan petik satu supaya kode bisa tampil sempurna.
Label Postingan :
Javascript
,
Tips Blog
Terima kasih ya udah mempraktekkan tutorial blog di web alifacode.com dengan judul Cara Membuat Menu Modal Pop Up Blogger dengan Javascript . Semoga tutorial blog ini dapat bermanfaat. Salam Blogger.
