Hộp đăng ký nhận tin (Subscribe ) dạng Popup cho blogger

Khung đăng ký nhận tin (Subscribe by email) được sử dụng hầu hết trong các blogger/website để giúp cho độc giả yêu thích có thể đăng ký nhận tin từ blog của bạn. Trong bài viết này namkna giới thiệu cho các bạn thủ thuật được viết bời mybloggertricks giúp bạn tích hợp các tính năng popup và đăng ký của FeedBurner để cài đặt nó trên blog của bạn.

Lợi ích từ thủ thuật này?

Lý do chính tại sao để sử dụng là bởi vì nó sẽ không chỉ làm cho Blog của bạn trông chuyên nghiệp mà còn làm tăng lượng đăng ký email cho Blog của bạn. Phiên bản gốc của hộp subscribe được tạo ra bởi franklin.Phiên bản sửa đổi này được namkna việt hóa lại cho các blogger việt.

Xem Demo: View Demo

Ảnh minh họa:

Tiến hành thủ thuật.

Bạn có thể cài đặt Widget này một cách dễ dàng trong Blog của bạn bằng cách làm theo các bước đơn giản ....

Cảnh báo: Trước khi bạn bắt đầu áp dụng bất cứ thay đổi mẫu blogger của bạn, Namkna khuyên bạn nên sao lưu nó, bằng cách nhấp vào liên kết Mẫu -> Tải về bản đầy đủ(Download Template Full Version).

☼ Cách tiến hành:
1- Đăng nhập (login) vào Blog
2- Vào Mẫu (Template)

3- Chọn Chỉnh sử HTML (Edit HTML) => Xem vdeo:

4- Dán đọn code bên dưới vào trước thẻ ]]></b:skin>

/* ColorBox Core Style: The following CSS is consistent between example themes and should not be altered. */
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
/* User Style: Change the following styles to modify the appearance of ColorBox.  They are ordered & tabbed in a way that represents the nesting of the generated HTML. */
    #cboxOverlay{background:#000;opacity:0.5 !important;}
    #colorbox{
            box-shadow:0 0 15px rgba(0,0,0,0.4);
           -moz-box-shadow:0 0 15px rgba(0,0,0,0.4);
            -webkit-box-shadow:0 0 15px rgba(0,0,0,0.4);
           }
          #cboxTopLeft{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfRBrk6ZBco8DLxZQmhctX9hnKp3NqN94mYCCjKDvF0wC-9gEmtj90uFkDZVLK-vTmgm8YxCQhKA0LNMZYaIhYx7cKX1C4Zuyff3JHmEqFfvWBMVWOijRleAJmy_bDr9JqGpH5U0punSE/s1600/controls-namkna-blogspot-com.png) no-repeat 0 0;}
#cboxTopCenter{height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilbKRoDblb-SgVOl8705STWbamTmEQG3awFkxAq6pWcz_k-7mBwbKtf1pLbmLWXa6W867NtKpXxKOd0_yLOPoGACtG-4y_KFMjpHUP0jl85GTYzNZaxGGNjrzZqI6qOfT0W4oABPFZX7k/s1600/border-namkna-blogspot-com.png) repeat-x top left;}
    #cboxTopRight{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfRBrk6ZBco8DLxZQmhctX9hnKp3NqN94mYCCjKDvF0wC-9gEmtj90uFkDZVLK-vTmgm8YxCQhKA0LNMZYaIhYx7cKX1C4Zuyff3JHmEqFfvWBMVWOijRleAJmy_bDr9JqGpH5U0punSE/s1600/controls-namkna-blogspot-com.png) no-repeat -36px 0;}
    #cboxBottomLeft{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfRBrk6ZBco8DLxZQmhctX9hnKp3NqN94mYCCjKDvF0wC-9gEmtj90uFkDZVLK-vTmgm8YxCQhKA0LNMZYaIhYx7cKX1C4Zuyff3JHmEqFfvWBMVWOijRleAJmy_bDr9JqGpH5U0punSE/s1600/controls-namkna-blogspot-com.png) no-repeat 0 -32px;}
    #cboxBottomCenter{height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilbKRoDblb-SgVOl8705STWbamTmEQG3awFkxAq6pWcz_k-7mBwbKtf1pLbmLWXa6W867NtKpXxKOd0_yLOPoGACtG-4y_KFMjpHUP0jl85GTYzNZaxGGNjrzZqI6qOfT0W4oABPFZX7k/s1600/border-namkna-blogspot-com.png) repeat-x bottom left;}
    #cboxBottomRight{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfRBrk6ZBco8DLxZQmhctX9hnKp3NqN94mYCCjKDvF0wC-9gEmtj90uFkDZVLK-vTmgm8YxCQhKA0LNMZYaIhYx7cKX1C4Zuyff3JHmEqFfvWBMVWOijRleAJmy_bDr9JqGpH5U0punSE/s1600/controls-namkna-blogspot-com.png) no-repeat -36px -32px;}
    #cboxMiddleLeft{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfRBrk6ZBco8DLxZQmhctX9hnKp3NqN94mYCCjKDvF0wC-9gEmtj90uFkDZVLK-vTmgm8YxCQhKA0LNMZYaIhYx7cKX1C4Zuyff3JHmEqFfvWBMVWOijRleAJmy_bDr9JqGpH5U0punSE/s1600/controls-namkna-blogspot-com.png) repeat-y -175px 0;}
    #cboxMiddleRight{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfRBrk6ZBco8DLxZQmhctX9hnKp3NqN94mYCCjKDvF0wC-9gEmtj90uFkDZVLK-vTmgm8YxCQhKA0LNMZYaIhYx7cKX1C4Zuyff3JHmEqFfvWBMVWOijRleAJmy_bDr9JqGpH5U0punSE/s1600/controls-namkna-blogspot-com.png) repeat-y -211px 0;}
    #cboxContent{background:#fff; overflow:visible;}
        #cboxLoadedContent{margin-bottom:5px;}
        #cboxLoadingOverlay{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNeShpT_bhtAtVIIhT_jCndLHe-A55WXZ88F0ujOY13PCrEm4RfbLs3X3Tv7GccCqRXtACoOZdmb1PeMrKTKrv3vTpUbvHxenoddnxcZgkJ0u5m6s6OJeA01A3SJLaIhFSVPhp6KSSASs/s1600/loadingbackground-namkna-blogspot-com.png) no-repeat center center;}
        #cboxLoadingGraphic{https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX75l39vKW8kpNiOFvwHGY1oiqVaI_MfBIxPE0BLzmCDUPcFALyio4SGwsvQaHannbqSrdPgduMvyk2kj-Gw3SC_fv8mn8BQn3IqJ0l5iSuCm1issByxVH7hpUg936navJnVQPTeNvLl4/s1600/loading-namkna-blogspot-com.png) no-repeat center center;}
        #cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#7C7C7C;}
        #cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;}
        #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{position:absolute; bottom:-29px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfRBrk6ZBco8DLxZQmhctX9hnKp3NqN94mYCCjKDvF0wC-9gEmtj90uFkDZVLK-vTmgm8YxCQhKA0LNMZYaIhYx7cKX1C4Zuyff3JHmEqFfvWBMVWOijRleAJmy_bDr9JqGpH5U0punSE/s1600/controls-namkna-blogspot-com.png) no-repeat 0px 0px; width:23px; height:23px; text-indent:-9999px;}
        #cboxPrevious{left:0px; background-position: -51px -25px;}
        #cboxPrevious.hover{background-position:-51px 0px;}
        #cboxNext{left:27px; background-position:-75px -25px;}
        #cboxNext.hover{background-position:-75px 0px;}
        #cboxClose{right:0; background-position:-100px -25px;}
        #cboxClose.hover{background-position:-100px 0px;}
        .cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px; right:27px;}
        .cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px;}
        .cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px; right:27px;}
        .cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px;}
/*-----------------------------------------------------------------------------------*/
/*    box popup
/*-----------------------------------------------------------------------------------*/
#subscribe {
    font: 12px/1.2 Arial,Helvetica,san-serif;
}
#subscribe a,
#subscribe a:hover,
#subscribe a:visited {
    text-decoration:none;
}
.box-title {
   color: #2C2D31;
   font-size: 20px;
   font-weight: bold;
   margin: 10px 0;
   text-align: center;
}
.box-tagline {
   color: #999;
   font-size: 14px;
   margin: 0;
   text-align: center;
}
#subs-container {
    padding: 35px 0 30px 0;
    position: relative;
}
.box-side {
    width: 170px;
    text-align: center;
}
.box-side.left {
   padding: 0 30px 0 15px;
    border-right: 1px solid #ecedf3;
}
.box-side.right {
    float: right;
   margin-top: -223px;
    margin-right: 10px;
}
.box-icon {
    width: 72px;
    height: 54px;
    padding: 6px 0 0 0;
    margin: 0 auto;
}
.box-icon a.rss{
    display: block;
    width: 70px;
    height: 56px;
    margin: 0 auto;
}
.box-icon a{
    display: block;
    width: 72px;
    height: 54px;   
}
.box-icon a.email img,
.box-icon a.rss img {
   margin: -5px 0 0;
    border: 0 none;
}
.box-side h4,
.box-side h4 a {
    font-size: 14px;
    line-height: 14px;
    color: #f26535;
    font-weight: bold;
}
.box-side h4 { margin: 20px 0 10px 0; }
.box-side h5 {
    font-size: 11px;
    color: #5e6066;
    line-height: 18px;
    margin: 0 0 20px 0;
}
a.sub {
   background: url("http://imgboot.com/images/cybersidh/subscribebutton.png") no-repeat scroll 0 0 transparent;
   color: #996633;
   display: block;
   height: 44px;
   line-height: 29px;
   margin: 0 auto;
   text-indent: -999em;
   width: 130px;
}
.box-side h4 a:hover {
    color: #f26535;
}
#box-or {
   background: #fff;
   font-size: 12px;
   font-weight: bold;
   height: 25px;
   line-height: 25px;
   margin: -115px 0 0 208px;
   position: absolute;
   width: 20px;
}
a:link, a:visited {
border:none;
}
.demo {
display:none;
}

- Bây giờ hãy bấm nút xem trước nếu mọi thứ trên blog hoạt động tốt thì bấm Lưu mẫu lại.

5- Bây giờ bạn thêm 1 widget mới bằng các vào Bố cục (Layout) => Thêm tiện ích (Add Widget) => HTML/Javarscipt và dán đoạn code bên dưới vào:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js'></script>
<script src="http://dl.dropbox.com/u/66256041/JQuery/namkna-blogspot-com/jquery.colorbox-min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
   if (document.cookie.indexOf('visited=true') == -1) {
       var fifteenDays = 1000*60*60*24*15;
       var expires = new Date((new Date()).valueOf() + fifteenDays);
       document.cookie = "visited=true;expires=" + expires.toUTCString();
   $.colorbox({width:"480px", inline:true, href:"#subscribe"});
       }
});
</script>
    <!-- This contains the hidden content for inline calls -->
    <div style='display:none'>
        <div id='subscribe' style='padding:10px; background:#fff;'>
        <h2 class="box-title">Đăng ký để nhận tin mới nhất</h2>
               <h2 class="box-tagline">Tin nhắn sẽ được gửi dến hộp thư của bạn</h2><br/>
               <form style="border:1px solid #ccc;padding:3px;text-align:center;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=--namkna--', 'popupwindow', 'scrollbars=no,width=560,height=540');return true"><p>Điền địa chỉ Email của bạn:</p><p><input type="text" style="width:140px" name="email"/></p><input type="hidden" value="--namkna--" name="uri"/><input type="hidden" name="loc" value="en_US"/><input type="submit" value="Đăng ký" /><p>Delivered by <a href="http://feedburner.google.com" target="_blank">FeedBurner</a> | Powered By <a href="http://namkna.blogspot.com/">Namkna</a></p></form>
        <br/><h2 class="box-tagline">Hãy theo dõi ngay hôm nay để nhận được các bài viết chất lượng và miễn phí.</h2>
</div>
</div>