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

Membuat Sidebar Navigation Menu Dropdown Responsive

Responsive Sidebar Navigation with CSS and JavaScript Tutorial Cara Membuat Simple Off-canvas Side Navigation With Pure JavaScript , kali ini mas tamvan akan share lagi postingan tentang sajian navigation kafetaria . Tapi pada menu ini letaknya bukan di atas header atau di bawahnya.. Side Menu Navigation ini kita akan letakan di samping kanan / kiri blog kita, dengan tampilan full height dan ketika di scroll tidak akan ikut tergulung Sticky Fixed hidangan ini akan melayang Jangan khawatir akan menutupi bagian postingan blog kalian karena menu ini bisa di buka tutup, Sudah ada Toggle Show Hide dan tentunya responsive Buat kalian yang ingin melihat-lihat postingan sebelumnya wacana responsive sajian navigation bar dropdown, bisa lihat di link ini ↓ Tutorial Blogger Lainnya : Membuat Menu Bar Dropdown Responsive Plus Icon Pure CSS ...
Post a Comment
Read more

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

Membuat Search Box Popup Full Screen Responsive

Pure css Search Box Pop Up Reesponsive Cara Membuat Kotak Pencarian di blog menjadi pop up full screen responsive . Tutorial kali ini saya akan berbagi cara untuk mendesain tampilan search box menjadi popup .. Bagi kalian yang ingin mengganti kolom pencarian blog kalian dengan tampilan yang berbeda, bisa mencoba search box yang akan di share pada tutorial ini. Jangan lupa untuk membaca artikel lainnya yang sudah di share di blog mas tamvan ini ya gan :) Tutorial Blogger Lainnya : Cara Praktis Membuat Tabel Di Postingan Blog Dengan Tool Memasang Hover Share Button Image Di blogger TS Grid - Template Blogger Responsive Dan Valid HTML5 Buat kalian yang igin melihat tampilannya, bisa kunjungi link berikut.. Demo Search Box Pop Up Lanjut saja kita ke tahap pemasangan search box popup responsive pure css ini ya gan :3 Pure CSS PopUp Search Box Responsive Seperti biasa, login terlebih dahulu ke blogger.com Sete...
Post a Comment
Read more