Chào tất cả mọi người, theo yêu cầu của một số bloger bảo mình là viết bài hướng dẫn tạo popup subscribe như blog mình đi, thì hôm nay mình sẽ viết bài hướng dẫn nó nhé. Các bạn có thể xem demo ảnh bên dưới để biết nó như nào.
HƯỚNG DẪN CÁCH LÀM:
Để thêm được popup subscribe thì các bạn đăng nhập vào
blogger.com >
Chủ đề >
Chỉnh sửa HTML rồi tìm thẻ đóng
</body> và thêm đoạn code bên dưới lên
trên nó
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- Popup sub -->
<style>
#pop-sub .headerContainer,#pop-sub .bodyContainer,#pop-sub .footerContainer{max-width:960px;margin:0 auto;background:#FFF}
#pop-sub .padding{padding:20px}
#pop-sub .bodyContainer{min-height:500px}
#pop-sub .pop-contaner{position:fixed;background:rgba(0, 0, 0, 0.68);width:100%;height:100%;top:0;left:0;color:#FFF;z-index:999999;display:none}
#pop-sub .show-content{position:absolute;top:23%;right:29%;left:25%;width:450px;margin:0 auto}
#pop-sub .closeButton{background:#d25252;color:#fff;right:-95px;top:15px;position:relative;text-decoration:none;font-size:15px;padding:0;border-radius:50%;width:30px;height:30px;line-height:30px;text-align:center}
#pop-sub .closeButton:hover{transform:rotate(360deg)}
#pop-sub .closeButton i{font-size:17px;font-weight:700}
#pop-sub a.closeButton{float:right}
#sub-box-pop p{font-family:inherit;font-size:15px;color:#fff;margin:0 0 15px;padding:0;line-height: normal;}
#sub-box-pop .emailfield{margin:auto}
#sub-box-pop .emailfield input{padding:12px;color:#bcc4ca;border:none;font-size:14px;margin-bottom:20px;width:100%;font-family:inherit;box-sizing:border-box}
#sub-box-pop .emailfield input:focus{color:#454545;outline:none}
#sub-box-pop .emailfield .submitbutton{background-color:rgba(0,0,0,0.15);color:#fff;margin:0;width:100%;font-size:16px;font-weight:700;text-transform:uppercase}
#sub-box-pop .emailfield .submitbutton:active,#sub-box-pop .emailfield .submitbutton:hover{background-color:rgba(0,0,0,0.15);color:#fff}
#sub-box-pop{background:#34a853;box-shadow:0 5px 20px rgba(0,0,0,0.1);border-radius:10px;height:auto;width:100%;font-family:inherit;margin:0;padding:40px;overflow:hidden;text-align:center}
#sub-box-pop h4{color:#fff;font-size:20px;text-transform:uppercase;margin:0 0 15px;font-size:1.5em;font-weight:700;font-family:inherit}
@media only screen and (max-width:980px) {#pop-sub{display:none}}
</style>
<div id='pop-sub'>
<div class='pop-contaner'>
<div class='show-content'>
<p><a class='closeButton' href='#'><i class='fa fa-times'/></a></p>
<div id='thongtinkh'>
<!-- Sub -->
<div id='sub-box-pop'>
<h4>Đăng ký nhận những thủ thuật</h4>
<p>Chúng tôi sẽ cập nhật đến bạn những thủ thuật bổ ích vào hòm thư đến của bạn.</p>
<div class='emailfield'>
<form action='https://feedburner.google.com/fb/a/mailverify?uri=StarBnhBlog' method='post' onsubmit='window.open('https://feedburner.google.com/fb/a/mailverify?uri=StarBnhBlog', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<input name='email' onblur='if (this.value == "") {this.value = "Nhập địa chỉ email...";}' onfocus='if (this.value == "Nhập địa chỉ email...") {this.value = "";}' type='text' value='Nhập địa chỉ email...'/>
<input name='uri' type='hidden' value='StarBnhBlog'/>
<input name='loc' type='hidden' value='vn_VN'/>
<input class='submitbutton' type='submit' value='Đăng ký'/>
</form>
</div>
</div>
<!-- End sub -->
</div>
</div>
</div>
</div>
<script type='text/javascript'>
//<![CDATA[
// Pop
function showPopUpBanner(){$(".pop-contaner").fadeIn("2000")}setTimeout(showPopUpBanner,8e3),$(".pop-contaner").click(function(a){if(!$(a.target).is(".show-content, .show-content *"))return $(".pop-contaner").fadeOut("2000"),!1}),$(".closeButton").click(function(){return $(".pop-contaner").fadeOut("2000"),!1});
//]]>
</script>
<!-- End Popup -->
</b:if>
Các bạn xem ảnh dưới để dễ hình dung ra nha
Chúc bạn thành công!
0 Nhận xét