Tạo hiệu ứng theo dõi email cho blogger bằng popup

Ảnh demo full

Giờ chúng ta bắt đầu nhé:

Đầu tiên các bạn vào chỉnh sửa HTML của Blog bạn, tìm thẻ ]]>< và copy toàn bộ code dưới chèn lên thẻ vừa tìm.

.theo-doi-qua-email {
    float: left;
    width: 100%;
    background: #bc382e;
    position: relative;
   
}.theo-doi-qua-email .left {
    width: 220px;
    float: left;
    background: #731a13;
    padding: 10px;
    position: relative;
    z-index: 99;
}.theo-doi-qua-email .left input {
       line-height: 40px;
    float: left;
    width: 90%;
    margin: 5px 0;
    padding: 0 10px;
    border: 0;
}.theo-doi-qua-email .right {
    float: left;
    position: absolute;
    padding: 20px 20px 20px 270px;
}.theo-doi-qua-email .right h3 {
    font-size: 28px;
    text-align: center;
    color: #fff;
    border-bottom: 3px dashed #731a13;
    padding-bottom: 10px;
    margin-bottom: 10px;
    margin-top: 0px;
}.theo-doi-qua-email .right ul {
    padding-left: 20px;
    margin: 0;
}.theo-doi-qua-email .right ul li {
    list-style-type: circle;
    font-size: 18px;
    line-height: 26px;
    color: #fff;
}
#fbox-background {
    display: none;
    background: rgba(0,0,0,0.8);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
}

#fbox-close {
    width: 100%;
    height: 100%;
}

#fbox-display {
  background: #eaeaea;
    border: 5px solid #3a5795;
    width: 700px;
    height: 170px;
    position: absolute;
    top: 33%;
    left: 33%;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

#fbox-button {

    z-index: 99;
    float: right;
    cursor: pointer;
    position: absolute;
    right: 0px;
    top: 0px;
}

#fbox-button:before {
    content: "CLOSE";
    padding: 5px 8px;
    background: #3a5795;
    color: #eaeaea;
    font-weight: bold;
    font-size: 10px;
    font-family: Tahoma;
}

#fbox-link,#fbox-link a.visited,#fbox-link a,#fbox-link a:hover {
    color: #aaaaaa;
    font-size: 9px;
    text-decoration: none;
    text-align: center;
    padding: 5px;
}

Xong các bạn lưu lại, vào phần bốc cục Blog thêm tiện ích vị trí bất kì và copy toàn bộ code dưới vào:

<script type='text/javascript'>
//<![CDATA[
jQuery.cookie = function (key, value, options) {
// key and at least value given, set cookie...
if (arguments.length > 1 && String(value) !== "[object Object]") {
options = jQuery.extend({}, options);
if (value === null || value === undefined) {
options.expires = -1;
}
if (typeof options.expires === 'number') {
var days = options.expires, t = options.expires = new Date();
t.setDate(t.getDate() + days);
}
value = String(value);
return (document.cookie = [
encodeURIComponent(key), '=',
options.raw ? value : encodeURIComponent(value),
options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
options.path ? '; path=' + options.path : '',
options.domain ? '; domain=' + options.domain : '',
options.secure ? '; secure' : ''
].join(''));
}
// key and possibly options given, get cookie...
options = value || {};
var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;
};
//]]>
</script>
<script type='text/javascript'>
jQuery(document).ready(function($){
if($.cookie('popup_facebook_box') != 'yes'){
$('#fbox-background').delay(5000).fadeIn('medium');
$('#fbox-button, #fbox-close').click(function(){
$('#fbox-background').stop().fadeOut('medium');
});
}
$.cookie('popup_facebook_box', 'yes', { path: '/', expires: 1});
});
</script>
<div id='fbox-background'>
<div id='fbox-close'>
</div>
<div id='fbox-display'>
<div id='fbox-button'>
</div>
<div class='theo-doi-qua-email'>
<div class='left'>
<form action='https://feedburner.google.com/fb/a/mailverify?uri=vanthangit/PQTX' method='post' onsubmit='window.open(&#39;https://feedburner.google.com/fb/a/mailverify?uri=vanthangit/PQTX, &#39;popupwindow&#39;, &#39;scrollbars=yes,width=550,height=520&#39;);return true' target='popupwindow'>
<input name='name' onblur='if (this.value == "") {this.value = "Your Name";}' onfocus='if (this.value == "Your Name") {this.value = "";}' type='text' value='Your Name'/>
<input name='email' onblur='if (this.value == "") {this.value = "Your Email";}' onfocus='if (this.value == "Your Email") {this.value = "";}' type='text' value='Your Email'/>
<input name='uri' type='hidden' value='vanthangit/PQTX'/>
<input name='loc' type='hidden' value='vi_VN'/>
<input class='submitbutton' type='submit' value='Nhận tin!'/>
</form>
</div>
<svg fill='#731a13' height='170' style='float: left' width='25'>
<path d='M0 0 L0 170 L25 85 Z'></path>
</svg>
<div class='right'>
<h3>Nhận tin mới qua Email</h3>
<ul>
<li>Cập nhật tin tức hoàn toàn miễn phí qua Email</li>
<li>Đảm bảo an toàn thông tin của bạn</li>
<li>Nhận quà hàng tháng - Tri ân độc giả</li>
</ul>
</div>
</div>
</div>
</div>

Được 50% rồi , giờ thì các bạn chỉ cần chỉnh sửa lại ID cho blog mình bằng những dòng bôi đỏ trên thôi.
Chúc các bạn thành công. Share nếu thấy hay nhé!