Thêm popup subscribe vào blogspot

Click ngay
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
<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(&apos;https://feedburner.google.com/fb/a/mailverify?uri=StarBnhBlog&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Nhập địa chỉ email...&quot;;}' onfocus='if (this.value == &quot;Nhập địa chỉ email...&quot;) {this.value = &quot;&quot;;}' 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!

Nếu bạn sao chép bài viết trên blog thì vui lòng để nguồn vào giúp mình. Tôn trọng người khác thì người khác sẽ tôn trọng lại bạn.

Nếu có thắc mắc gì về code, code lỗi,... thì liên hệ mình để được giúp đỡ nhé.

Thanh Bình Designer, Developer

Muốn giỏi phải học, muốn học thì phải hỏi. Chính vì thế, hãy cùng tham gia thảo luận với nhau để tìm ra câu trả lời nếu có thắc mắc nhé! Xem thêm nhiều bài viết hay tại đây nhé.
Trong quá trình viết bài chúng tôi sẽ có nhiều thiếu sót mong các bạn đóng góp để chúng tôi rút kinh nghiệm hơn !
Nên Xem
  • Ẩn sidebar