Skip to main content

Membuat Modal Popup Dengan Javascript Di Blogger

popup button with pure javascript

Cara Membuat Modal Popup Button Responsive Full Screen

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 sanggup di sesuaikan dengan cita-cita kalian.

Sebelumnya saya juga sudah pernah posting artikel perihal menciptakan popup di blogger secara otomatis tanpa button, sanggup kalian lihat di artikel berikut.

Tutorial Blogger Lainnya :
  • 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,.btndisplay:block .openPopup,.btn,.MasTamvan .contenttext-align:center .openPopupmargin: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 .btncolor:#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 strongfont-size:50px .MasTamvan .content pfont-size:22px @-webkit-keyframes a0%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 a0%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 b0%opacity:1toopacity:0 @keyframes b0%opacity:1toopacity:0 .MasTamvanOpen,.MasTamvanOpen bodyoverflow: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 .MasTamvanposition:absolute;z-index:9999;max-width:100%;padding:50px 15px 15px;box-sizing:border-box .MasTamvan,.MasTamvan:aftertop:0;right:0;bottom:0;left:0 .MasTamvan:aftercontent:"";position:fixed;z-index:9998;background:#fff .MasTamvan>.TSloseBtnposition: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>svgwidth: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:activemargin-top:1px .MasTamvan>.contenttop: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).MasTamvanpadding:80px 30px 30px.MasTamvan>.TSloseBtnright:10px;top:0.50em;width:40px;height:40px.MasTamvan>.TSloseBtn>svgwidth:30px;height:100%.MasTamvan>.contentleft: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)  )' + cssClass + '($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.sasaran.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'>&#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 risikonya kalian mampu 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. Keyword Terkait : cara membuat pop up di website, cara menciptakan pop up window di blogspot, cara menciptakan pop up box card

Labels:

Comments

Post a Comment

Popular posts from this blog

Cara Membuat Daftar Isi / Sitemap Di Blog

document.getElementsByTagName('head')[0]; var style = document.createElement('style'); style.type = 'text/css'; var css = '#sitemap-blogpadding:7px 10px;margin:0 auto#sitemap-blog tablewidth:auto;margin:0 auto;border:none!important#sitemap-blog table tdborder:none!important;padding:0!important#sitemap-blog formfont:inherit#sitemap-blog labeldisplay:block;text-align:right;margin:0 10px 0 0;padding:4px 0 0#sitemap-blog select[disabled]opacity:.4#post-searcherdisplay:block;margin:0;padding:0#sitemap-blog input,#sitemap-blog selectwidth:100%;border:1px solid #dedede;border-radius:5px;margin:0;padding:5px;font-family:Roboto,sans-serif!important;font-size:16px!important;font-weight:500!important;text-transform:capitalize!important;outline:0;color:#333!important;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box#sitemap-blog select optionmin-height:1.4em!important#sitemap-blog input#feed-qpadding:5px 10px!important#daftar-isi-blogbackgr...
Post a Comment
Read more

Cara Memasang Widget Recent Post By Label Di Blog

Tutorial cara membuat recent post menurut label Cara Menambahkan Widget Recent Post By Label Di Bawah Postingan Blog . Kali ini saya akan berbagi tutorial menciptakan 2 (dua) widget gres dibawah postingan blog yang akan menampilkan recent post berdasarkan label tertentu. Widget Recent Post by Label ini saya ambil dari Template Evo Magz buatan Mas Sugeng yang sangat fenomenal. Widget Recent Post by Label With Thubnial ini akan menampilkan 4 artikel terbaru ditambah dengan menampilkan Komentar , Tanggal Di Publikasikannya dan juga readmore . Kalian juga bisa mengatur berapa artikel yang akan ditampilkan. Nah, untuk memasang Widget Recent Post by Label di bawah postingan blog , bisa ikuti tutorial singkat dibawah ini... Membuat Recent Post Berdasarkan Kategori Langkah pertama, silahkan login ke akun Blogger Setelah login, masuk ke menu, Template , Edit HTML , Cari Kode </head&gt Kalo sudah ketemu, masukan script Widget Recent Post by Label With Thubnial di...
Post a Comment
Read more

Cara Membuat Tabel Responsive Di Blogger

Tutorial Membuat Tabel Keterangan Responsive Di Dalam Postingan Blog Tutorial Cara Memasang / membuat semoga tabel keterangan responsive di dalam postingan blog , pada postingan kali ini saya kan memberikan table atau kotak keterangan yang responsive untuk di pasang pada postingan blog... Bagi agan blogger yang suka atau ingin menciptakan tabel / kotak keterangan untuk memisahkan, mengelompokan bagian tertentu pada sebuah text dengan tampilan yang suport untuk semua device seperti hp, tablet, laptop, notebook dan yang lainnya... ... agar tampilan tabel tersebut tidak melebihi ukuran layar maka kita harus membuatnya menjadi responsive, mobile friendly agar enak di pandang dan di bacanya.... Sebelumnya saya juga sudah pernah posting artikel tentang cara menciptakan tabel keterangan yang responsive dengan tampilan yang anggun dan berwarna .... Bagi kalian yang ingin mencobanya, silahkan kunjungi artikel berikut ini..... Membuat Beautiful Table Responsive With CSS Untuk tutor...
Post a Comment
Read more