Email Subscribe Form có lẽ là tiện ích không thể thiếu trên mỗi Blog, vì đây là một trong những công cụ rất quan trọng giúp tăng traffic cho “ngôi nhà” của bạn.
Khi đọc giả đăng ký nhận tin thông qua Email Subscribe form, họ chỉ cần truy nhập vào hòm thư của mình và kích hoạt dịch vụ là có thể cập nhật những bài viết mới trên Blog của bạn một cách nhanh nhất thông qua Email.
Tuy nhiên, hầu hết Subscribe Form trên các Blog hiện nay đều chiếm một vị trí nhất định, có thể là ở Sidebar, bên dưới bài đăng, footer,…vv…Vì vậy, để đỡ chiếm diện tích, cũng như tạo nên sự độc đáo khác biệt, hôm nay iTechPlus xin giới thiệu đến bạn đọc một thủ thuật mới, đó là Pop-up Subscribe Form for Blogger.
Hình minh họa
Pop-up này sẽ chỉ hiển thị ở lần đầu tiên đọc giả ghé thăm Blog bạn, và chỉ xuất hiện lại trong một khoảng thời gian do bạn chỉ định.
Nào, chúng ta bắt tay cùng làm nhé !
Bước 1 : Vào Thiết kế > Chỉnh sửa HTML
Bước 2 : Chèn đoạn code bên dưới vào trước thẻ đóng </b:skin>
#popupContactClose{Bước 3 : Tiếp tục, chèn đoạn code bên dưới vào trước thẻ đóng </body>
cursor: pointer;
text-decoration:none;
}
#backgroundPopup{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:100%;
width:100%;
top:0;
left:0;
background:#000000;
border:1px solid #cecece;
z-index:1;
}
#popupContact{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:328px;
width:438px;
background:#FFFFFF;
border:2px solid #cecece;
z-index:2;
padding:12px;
font-size:13px;
}
#popupContact h1{
text-align:left;
color:#6FA5FD;
font-size:22px;
font-weight:700;
border-bottom:1px dotted #D3D3D3;
padding-bottom:2px;
margin-bottom:20px;
}
#popupContactClose{
font-size:14px;
line-height:14px;
right:6px;
top:4px;
position:absolute;
color:#6fa5fd;
font-weight:700;
display:block;
}
<div id='popupContact'>Bạn cần thay phần được in đậm màu xanh ở đoạn code trên cho phù hợp
<a id='popupContactClose'>x</a>
<h1>Đăng ký nhận thủ thuật mới từ iTechPlus.info</h1>
<p>Bằng cách đăng ký nhận thủ thuật mới từ iTechPlus.info qua Email, bạn sẽ luôn được cập nhật những thủ thuật mới nhất mà không bỏ sót bất cứ bài nào từ iTechPlus.info<br/></p><p><b><i>Lưu ý : Vui lòng đăng nhập hòm thư của bạn để kích hoạt dịch vụ trước khi sử dụng.</i></b></p>
<p id='contactArea'>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=itechplus', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' style='border:1px solid #ccc;padding:3px;text-align:center;' target='popupwindow'><p>Nhập địa chỉ Email của bạn:</p><p><input name='email' style='width:230px' type='text'/></p><input name='uri' type='hidden' value='itechplus'/><input name='loc' type='hidden' value='en_US'/><input type='submit' value='Đăng ký'/><p>Delivered by <a href='http://feedburner.google.com' target='_blank'>FeedBurner</a></p></form>
</p>
</div>
<div id='backgroundPopup'/>
Bước 4: Cuối cùng, chèn đoạn code bên dưới vào trước thẻ đóng </head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js' type='text/javascript'/>Với số 3 tương ứng với số ngày mà Popup sẽ lại hiển thị.
<script src='http://dl.dropbox.com/u/18732740/jquery.cookie.js' type='text/javascript'/>
<script type='text/javascript'>
var popupStatus = 0;
//this code will load popup with jQuery magic!
function loadPopup(){
//loads popup only if it is disabled
if(popupStatus==0){
$("#backgroundPopup").css({
"opacity": "0.7"
});
$("#backgroundPopup").fadeIn("slow");
$("#popupContact").fadeIn("slow");
popupStatus = 1;
}
}
//This code will disable popup when click on x!
function disablePopup(){
//disables popup only if it is enabled
if(popupStatus==1){
$("#backgroundPopup").fadeOut("slow");
$("#popupContact").fadeOut("slow");
popupStatus = 0;
}
}
//this code will center popup
function centerPopup(){
//request data for centering
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var popupHeight = $("#popupContact").height();
var popupWidth = $("#popupContact").width();
//centering
$("#popupContact").css({
"position": "absolute",
"top": windowHeight/2-popupHeight/2,
"left": windowWidth/2-popupWidth/2
});
//only need force for IE6
$("#backgroundPopup").css({
"height": windowHeight
});
}
//CONTROLLING EVENTS IN jQuery
$(document).ready(function(){
if ($.cookie("anewsletter") != 1) {
//centering with css
centerPopup();
//load popup
loadPopup();
}
//CLOSING POPUP
//Click the x event!
$("#popupContactClose").click(function(){
disablePopup();
$.cookie("anewsletter", "1", { expires: 3 });
});
//Click out event!
$("#backgroundPopup").click(function(){
disablePopup();
$.cookie("anewsletter", "1", { expires: 3 });
});
//Press Escape event!
$(document).keypress(function(e){
if(e.keyCode==27 && popupStatus==1){
disablePopup();
$.cookie("anewsletter", "1", { expires: 3 });
}
});
});
</script>
Bước 5 : Save template and done
* Lưu ý : bạn nên download file jquery.cookie.js về upload lên host riêng hoặc chèn thẳng nội dung của nó vào template để tránh các sự cố về sau.
* Update : nếu muốn Popup xuất hiện sau một khoảng thời gian nào đó sau khi Blog được load, bạn thay code ở bước 4 với code bên dưới
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript"></script>với 5000 là thời gian Popup sẽ xuất hiện sau khi Blog được load, tương ứng với 5 giây.
<script src="http://dl.dropbox.com/u/18732740/jquery.cookie.js" type="text/javascript"></script>
<script type="text/javascript">
var popupStatus = 0;
//loading popup with jQuery magic!
function loadPopup(){
centerPopup();
//loads popup only if it is disabled
if(popupStatus==0){
$("#backgroundPopup").css({
"opacity": "0.7"
});
$("#backgroundPopup").fadeIn("slow");
$("#popupContact").fadeIn("slow");
popupStatus = 1;
}
}
//disabling popup with jQuery magic!
function disablePopup(){
//disables popup only if it is enabled
if(popupStatus==1){
$("#backgroundPopup").fadeOut("slow");
$("#popupContact").fadeOut("slow");
popupStatus = 0;
}
}
//centering popup
function centerPopup(){
//request data for centering
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var windowscrolltop = document.documentElement.scrollTop;
var windowscrollleft = document.documentElement.scrollLeft;
var popupHeight = $("#popupContact").height();
var popupWidth = $("#popupContact").width();
var toppos = windowHeight/2-popupHeight/2+windowscrolltop;
var leftpos = windowWidth/2-popupWidth/2+windowscrollleft;
//centering
$("#popupContact").css({
"position": "absolute",
"top": toppos,
"left": leftpos
});
//only need force for IE6
$("#backgroundPopup").css({
"height": windowHeight
});
}
//CONTROLLING EVENTS IN jQuery
$(document).ready(function(){
if ($.cookie("anewsletter") != 1) {
//load popup
setTimeout("loadPopup()",5000);
}
//CLOSING POPUP
//Click the x event!
$("#popupContactClose").click(function(){
disablePopup();
$.cookie("anewsletter", "1", { expires: 3 });
});
//Click out event!
$("#backgroundPopup").click(function(){
disablePopup();
$.cookie("anewsletter", "1", { expires: 3 });
});
//Press Escape event!
$(document).keypress(function(e){
if(e.keyCode==27 && popupStatus==1){
disablePopup();
$.cookie("anewsletter", "1", { expires: 3 });
}
});
});
</script>
Chúc các bạn thành công !
Theo SimplexDesign
No comments:
Post a Comment