[New] Tạo khung theo dõi dạng popup cho blogspot, blogger

Tiếp tục chủ để Blogger, mình xin chia sẽ cho các bạn cách làm khung theo dõi blogspot ( feedburner ) dạng popup rất chuyên nghiệp.

Tiện ích này mình vừa làm xong thôi nên viết bài share cho các bạn luôn nên nếu có lỗi các bạn  comment phía dưới nhé.

Nói thêm về khung theo dõi này:

• Khung theo dõi giúp cho nhưng đọc giả ít có thời gian online có thể cập nhật những bài viết mới của blog bạn qua Gmail. 
• Tiện ích này làm theo dạng popup hiện khi load trang xong và có thể tắt nó đi, tiết kiệm được 1 không gian cho blog
• Vì là popup nên sẽ giúp đọc giả dễ tiếp cận hơn
• Theo mặc định tiện ích 1 ngày sẽ hiện 1 lần vì thế sẽ không làm cho đọc giả thấy khó chịu khi load lại trang hoặc đọc bài mới

Ả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é!