Hộp đăng ký email thuần túy CSS Pop Up cho Blogger

Tôi nhận được yêu cầu từ một đọc giả, anh ấy muốn bài viết trước của tôi - Hộp đăng ký Email Flat Fresh ở dạng bật lên tương tự như những gì tôi đã thực hiện trong chủ đề trước đây.


Giới thiệu
Có, như tiêu đề cho thấy đây là hộp đăng ký email Pop up Pop PURELY không chỉ cho Blogger mà cho hầu hết tất cả các loại nền tảng miễn là bạn có quyền truy cập vào feedburner. Tiện ích này là sự kết hợp của hộp đăng ký email bài đăng trước đây của tôi và tiện ích bật lên đơn giản và thú vị được xây dựng bằng CSS. Hãy chắc chắn làm theo các bước để làm cho nó hoạt động!

Chúng ta bắt đầu nào.

HTML
Chuyển đến Blogger »Mẫu» Sao lưu Mẫu của bạn » và Chỉnh sửa HTML
Thêm mã sau đây trước </ body>

<div class='modalDialog' id='signup'>
<div><a class='close' href='#close' title='Close'><i class='fa fa-times'/></a>
<div class='signup-container'>
<div class='newsletter-sm'>
<i class='fa fa-envelope-o enve'/>
<h3>Subscribe to Newsletter</h3>
<p style='text-align:center'>Sign up with your email address to receive news and updates straight in your inbox.</p>
<form action='https://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;https://feedburner.google.com/fb/a/mailverify?uri=MyBloggerAide&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<div class='newsletter-sm-bot'>
<input class='newsletter-input-sm' name='email' placeholder='Enter Your Email' type='text'/>
<button class='newsletter-button-sm' type='submit'>Subscribe</button></div>
<input name='uri' type='hidden' value='MyBloggerAide'/>
</form></div></div></div></div>

Để tiện ích này hoạt động, bạn cần thêm một liên kết sẽ đóng vai trò là nút hoặc trình xử lý cho cửa sổ bật lên.
Thêm mã sau đây bất cứ nơi nào bạn muốn nó được hiển thị.

<a href='#signup'>Signup</a>

CSS
Sao chép và dán mã trước ]]>

.enve{background:#00aa9f;color:#fff;width:50px;height:50px;display:block!important;line-height:50px!important;text-align:center;font-size:24px!important;-webkit-border-radius:50px;-moz-border-radius:50px;border-radius:50px;margin:0 auto}.newsletter-sm{background:#fff;width:100%;margin:0;padding:20px;box-sizing: border-box;}.newsletter-sm h3,.newsletter-sm p{color:#555;font-family:"Maven Pro",sans-serif}.newsletter-sm h3{font-weight:400;text-align:center;margin-bottom:10px;font-size:24px}.newsletter-sm p{font-size:14px;line-height:20px}.newsletter-sm .newsletter-input-sm{border:0;box-sizing: border-box;padding:5px 10px;width:360px;float:left;height:40px;color:#555;border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px}.newsletter-sm .newsletter-sm-bot{background:#00aa9f url(https://4.bp.blogspot.com/-0mBblowuHEI/VKnxGxyRmUI/AAAAAAAAHiU/ewwqQBE8VE0/s1600/bg.png) no-repeat;box-sizing: border-box;padding:20px;margin:0 -20px -20px;height:80px}.newsletter-sm .newsletter-button-sm{float:right;height:40px;display:inline-block;font-size:14px;box-sizing: border-box;padding:5px 10px;position:relative;color:#fff;text-align:center;background:#00aa9f;border:1px solid #fff;cursor:pointer;border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px}.modalDialog{position:fixed;font-family:Arial,Helvetica,sans-serif;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,.6);z-index:99999;opacity:0;-webkit-transition:opacity 200ms ease-in;-moz-transition:opacity 200ms ease-in;transition:opacity 200ms ease-in;pointer-events:none}.modalDialog:target{opacity:1;pointer-events:auto}.modalDialog:target>div{margin:8% auto}.modalDialog>div{-webkit-transition:all 100ms ease-in;-moz-transition:all 100ms ease-in;transition:all 100ms ease-in;width:500px;position:relative;margin:5% auto;background:#fff;min-height:200px}h2.signup{background:#00aa9f;border-bottom:1px solid #008d84;font-weight:400;text-align:center;box-sizing: border-box;padding:10px;color:#fff;font-size:18px}.close{color:#888;position:absolute;top:1px;right:1px;width:30px;height:30px;line-height:30px;text-align:center;font-size:16px}.close:hover{text-decoration:none;color:#555}

DEMO CHO CÁC BẠN

DEMO

Lưu mẫu của bạn và tận hưởng thành quả của mình thôi.
Chúc các bạn thành công.


Mật Khẩu Mặc Định Để Tải Template Hoặc Apps Nếu Có :
hungcoder.com Hoặc Smile92@

Related Posts

Comments