Tất cả mọi người khi phát triển web/blog ai cũng muốn blog của mình được nhiều người quan tâm và thực sự có ích với họ.Bằng nhiều cách như xây dựng nội dung hữu ích, tạo giao diện dễ sử dụng, các gói khuyến mại tri ân...thì việc tạo các tiện ích giúp khách truy cập dễ dàng kết nối với web/blog cũng là một lựa chọn.
Dưới đây là Popup nhận tin bài qua Email có hỗ trợ giao diện Mobile - The popup receives the new post through the email for blogspot giúp bạn thực hiện điều đó.
DEMO
<style type='text/css'>
.follow-email {
float: left;
width: 100%;
background: #006600;
position: relative;
}
.follow-email .left {
width: 220px;
float: left;
background: #004400;
padding: 10px;
position: relative;
z-index: 99;
}
.follow-email .left input {
line-height: 40px;
float: left;
width: 90%;
margin: 5px 0;
padding: 0 10px;
border: 0;
}
.submitbutton{background:#ff0000;color:#fff
}
.follow-email .right {
float: left;
position: absolute;
padding: 20px 20px 20px 270px;
}
.follow-email .right h3 {
font-size: 28px;
text-align: center;
color: #fff;
border-bottom: 3px dashed #004400;
padding-bottom: 10px;
margin-bottom: 10px;
margin-top: 0px;
}
.follow-email .right ul {
padding-left: 20px;
margin: 0;
}
.follow-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: #ff0000;
border: 5px solid #ff0000;
width: 700px;
height: 180px;
position: absolute;
top: 33%;
left: 15%;
-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: -1px;
}
#fbox-button:before {
content: "CLOSE";
padding: 5px 8px;
background: #ff0000;
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;
}
@media screen and (max-width:800px){
#fbox-display{max-width:100%;top: 20%;left: 2%;float:none}
}
@media screen and (max-width:640px){
#fbox-display{max-width:100%;top: 20%;left: 0%;float:none;}
.follow-email .right h3{font-size:22px}
.follow-email .right ul li{font-size:14px}
}
@media screen and (max-width:480px){
.follow-email .right{max-width:100%;padding:180px 5px 5px;float:none;text-align:center;position: relative;}
.follow-email .left{background: #006600;width:100%;text-align:center;float:none;margin-top:20px}
.follow-email .left input{width:100%;text-align:center;}
#fbox-display{height:auto}
#fbox-button:before{width:100%;}
svg{display:none}
}
@media screen and (max-width:360px){.follow-email .right{padding-top:150px}}
@media screen and (max-width:240px){.follow-email .right ul li{display:none}}
</style>
<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='follow-email'>
<div class='left'>
<form action='https://feedburner.google.com/fb/a/mailverify?uri=Tdblimag' method='post' onsubmit='window.open('https://feedburner.google.com/fb/a/mailverify?uri=Tdblimag, 'popupwindow', 'scrollbars=yes,width=550,height=520');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='Tdblimag'/>
<input name='loc' type='hidden' value='vi_VN'/>
<input class='submitbutton' type='submit' value='Nhận tin'/>
</form>
</div>
<svg fill='#004400' 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>Tuyệt đối không spam</li>
</ul>
</div>
</div>
</div>
</div>
Việc cần làm tiếp theo là thay Your FeedBurner feed vào uri trong fom email tại thông số bôi màu vàng chanh.
Để lấy Your FeedBurner feed bạn vào bố cục thêm một tiện ích theo dõi qua Email và thông số khoanh đỏ chính là Your FeedBurner feed blog của bạn.Chỉ copy thông số feed chứ không cần lưu(hoàn thành) tiện ích.
Hoặc bạn cũng có thể lấy thông số này tại feedbuner.
