Cara Mudah Membuat Subscribe Pop Up di Blogger


Assalamualaikum, slam sjtra Pada postingan kali ini, saya akan membahas mengenai bagaimana cara membuat Subscribe pop up Di blogger ,
Cara Mudah Membuat Subscribe Pop Up di Blogger

Sebenarnya cara Cara Mudah Membuat Subscribe Pop Up di Blogger agak senang untuk di pasang namun saya akan berkongsikan apa yang anda mahukan tentang Cara Mudah Membuat Subscribe Pop Up di Blogger.

Kita teruskan ke topik utama kita ia itu Cara Mudah Membuat Subscribe Pop Up di Blogger.

Subscribe Pop Up


Pasangkan code css berikut tepat di atas code </head>


<style type='text/css'>
.container h2{margin-top:30px}.box{width:40%;margin:0 auto;padding:35px;text-align:center}.overlay{position:fixed;top:0;bottom:0;left:0;right:0;background:rgba(0,0,0,0.7);transition:opacity 500ms;visibility:hidden;opacity:0}.overlay:target{visibility:visible;opacity:1;z-index:1000}.popup{background-color:#fff;position:absolute;top:calc(50% - 130px);left:0;right:0;width:75%;max-width:640px;margin:auto;padding:20px;text-align:center;line-height:initial;border:15px solid rgba(0,0,0,.07);box-shadow:0 20px 10px -10px rgba(0,0,0,0.15);z-index:5;animation:o4uanimated .5s;-moz-animation:ignielWobble .5s;-webkit-animation:o4uanimated .5s;-o-animation:o4uanimated .5s}.popup h2{margin-top:0;color:#333;font-family:Tahoma,Arial,sans-serif}.popup .content{max-height:30%;overflow:auto}.popup form{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:nowrap;align-items:center;margin:15px 0;padding:0;position:relative}.popup form:before{content:'';position:absolute;left:15px;display:block;width:20px;height:20px;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20,8L12,13L4,8V6L12,11L20,6M20,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6C22,4.89 21.1,4 20,4Z' fill='%23657786'/%3E%3C/svg%3E") center no-repeat}.popup input{background-color:#ededed;width:calc(100% - 35px);line-height:1.5em;border:1px solid #ddd;border-right:0;padding:7px 10px 7px 45px;text-align:left!important;border-radius:50px 0 0 50px;outline:none;outline-width:0;box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;transition:all .3s ease}.popup button{background-color:#008c5f;width:40px;min-width:40px;margin:0;padding:10px 0;border:0;box-shadow:none;vertical-align:top;cursor:pointer;background-image:unset;border-radius:0 50px 50px 0;transition:all .3s ease}.popup button:hover,.ignielPopup button:focus{background-color:#1d2129}.popup button:before{content:'';vertical-align:-3px;display:inline-block;width:20px;height:20px;margin:0;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2,21L23,12L2,3V10L17,12L2,14V21Z' fill='%23fff'/%3E%3C/svg%3E") center no-repeat}.popup .judul{font-size:30px;margin:0}.popup .text{font-size:16px}.popup .close{color:#657786;display:block;text-align:right;font-size:28px;font-weight:700;margin-top:-15px;transition:all .3s ease}.popup .close:hover,.popup .close:focus{color:#333;text-decoration:none;cursor:pointer}@media screen and (max-width: 700px){.box{width:70%}.popup{width:70%}}
</style>

Setelah selesai Pasangkan code berikut tepat di atas code <body>
<div class='overlay' id='popup'>
<div class='popup'>
<a class='close' href='#close'><svg style='width:24px;height:24px' viewBox='0 0 24 24'>
<path d='M19,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3M19,19H5V5H19V19M17,8.4L13.4,12L17,15.6L15.6,17L12,13.4L8.4,17L7,15.6L10.6,12L7,8.4L8.4,7L12,10.6L15.6,7L17,8.4Z' fill='currentColor'></path>
</svg></a>
<p class='judul'>SUBSCRIBE</p>
<p class='text'>If you like articles on this blog Subscribe for free via email. Free!</p>
<div class='content'>
<form action='https://feedburner.google.com/fb/a/mailverify?uri=Onet4ucomTeachForever' method='post' onsubmit='window.open("https://feedburner.google.com/fb/a/mailverify?uri=Onet4ucomTeachForever", "popupwindow", "scrollbars=yes,width=550,height=520");return true' target='popupwindow'>
<input class='email' name='email' placeholder='Example: YourName@Gmail.com'/>
<input name='uri' type='hidden' value='Onet4ucomTeachForever'/>
<input name='loc' type='hidden' value='en_US'/>
<button type='submit'></button>
</form>
</div>
</div>
</div>


Gantikan code Onet4ucomTeachForever yang saya tandakan sesuai dengan blog anda, Dan simpan Anda suda sellesai Membuat Subscribe Pop Up di Blogger,

Bagai mana ? Senang kan Cara Mudah Membuat Subscribe Pop Up di Blogger, saya harapkan apa yang saya kongsikan tentang Cara Mudah Membuat Subscribe Pop Up di Blogger ini dapat membantu anda.
Related Posts!
Comments!