Thêm popup subscribe vào blogspot

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!

5
4
3
2
1

Group giao lưu, giải đáp và chia sẻ kinh nghiệm blogspot - blogger :

  • Kích hoạt giao diện tối
  • Giao diện tối giúp bạn nhìn vào ban đêm, làm dịu mắt và tránh căng thẳng khi phải nhìn vào màn hình sáng quá nhiều.

    Đếm ngược thời gian đến tết Kỷ Hợi 2019