Hỗ trợ trực tuyến

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!

Trần Thanh Bình

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 về tôi


Cùng tham gia bình luận bài viết này nhé!

» Hãy là con người văn minh từ những câu nói

Loading...