Tiện ích đăng ký qua Email dạng Popup tự động nhằm tăng email đăng ký. Widget này sẽ hiện một popup đăng ký Email được cuộn lên xuống, qua lại. Yếu tố này có thể được thay đổi theo yêu cầu của bạn. Theo mặc định nó được thiết lập tại commnet. Vì vậy, khi bạn di chuyển qua phần bình luận của blog, nó sẽ sổ xuống từ đầu trang.
XXEM DEMOMinh hoa:
☼ Cách tiến hành:
1- Đăng nhập vào Blog
2- Vào Bố cục
3- Chọn Thêm tiện ích => Tạo 1 HTML/Javascipt và dán code bên dưới vào/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<style type="text/css">
#slider{position:fixed;top:-125px;right:0;height:120px;width:100%;background-color:#fff;opacity:0.98;-moz-box-shadow:0 0 8px #ccc;-webkit-box-shadow:0 0 8px #ccc;box-shadow:0 0 8px #ccc}
#slider #slider-shell{width:800px;height:110px;margin:10px auto;position:relative}
#slider #slider-tab{position:absolute;bottom:0;right:0;width:400px;text-align:right;padding-right:10px;cursor:pointer;font-size:0.6em}
#syb_embed_signup{background:#fff;clear:left;font:14px Helvetica,Arial,sans-serif}
#syb_embed_signup form{display:block;text-align:left;padding:10px 0 10px 3%}
#syb_embed_signup h2{font-weight:bold;padding:0;margin:15px 0;font-size:1.4em}
#syb_embed_signup input{border:1px solid #999;-webkit-appearance:none}
#syb_embed_signup input[type=checkbox]{-webkit-appearance:checkbox}
#syb_embed_signup input[type=radio]{-webkit-appearance:radio}
#syb_embed_signup input:focus{border-color:#333}
#syb_embed_signup .button{clear:both;background-color:#aaa;border:0 none;border-radius:4px;color:#FFF;cursor:pointer;display:inline-block;font-size:15px;font-weight:bold;height:32px;line-height:32px;margin:0 5px 10px 0;padding:0;text-align:center;text-decoration:none;vertical-align:top;white-space:nowrap;width:auto}
#syb_embed_signup .button:hover{background-color:#777}
#syb_embed_signup .small-meta{font-size:11px}
#syb_embed_signup .nowrap{white-space:nowrap}
#syb_embed_signup .clear{clear:none;display:inline}
#syb_embed_signup label{display:block;font-size:16px;padding-bottom:10px;font-weight:bold}
#syb_embed_signup input.email{padding:8px 0;margin:0 4% 10px 0;text-indent:5px;width:58%;min-width:130px}
#syb_embed_signup input.button{width:35%;margin:0 0 10px 0;min-width:90px}
</style>
<div id="slider" style="top: -108px;">
<div id="slider-shell">
<div id="syb_embed_signup">
<form action="http://feedburner.google.com/fb/a/mailverify?uri=--namkna--" id="syb-embedded-subscribe-form" method="post" onsubmit="window.open("http://feedburner.google.com/fb/a/mailverify?uri=--namkna--", "popupwindow", "scrollbars=yes,width=550,height=520"); return true" target="popupwindow">
<label for="syb-EMAIL">Get my next article in your inbox!</label>
<input class="email" id="syb-EMAIL" name="email" placeholder="Email Address" required="required" type="email" />
<div class="clear">
<input class="button" id="syb-embedded-subscribe" style="background-color: #0066cc;" type="submit" value="Đăng ký" />
</div>
</form>
</div>
<div id="slider-tab">Wait! I want to get email updates, bring that back...</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
function isScrolledDown(elem) {
var docViewTop = $(window).scrollTop(); //num of pixels hidden above current screen
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top; //num of pixels above the elem
var elemBottom = elemTop + $(elem).height();
return (elemBottom <= docViewBottom); //if the bottom of the current viewing area is lower than the top of the trigger
}
function isScrolledUp(elem) {
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
return (elemTop - 200 >= docViewBottom);
}
function bringSliderOut(){
$(slider).animate({
top: 0
}, "fast");
$('#slider-tab').text("hide this...");
}
function bringSliderIn(){
$(slider).animate({
top: -108
}, "fast");
$('#slider-tab').text("Wait! I want to get email updates, bring that back...");
}
var slider = $('#slider'); //set the trigger
var trigger = $('#comments'); //set the trigger
var reached = false;
var sliderOut = false;
$('#slider-tab').click( function(){
if(!sliderOut){
bringSliderOut()
sliderOut = true;
}
else{
bringSliderIn();
sliderOut = false
}
});
$(window).scroll(function() {
if(isScrolledUp(trigger)) {
if(reached){
bringSliderIn();
reached = false;
sliderOut = false;
}
}
else if(isScrolledDown(trigger)) {
if(!reached){
bringSliderOut();
sliderOut = true;
reached = true;
}
}
});
});
</script>
Tùy chinh
Nếu trong template của bạn đã có file JQuery rồi thì xóa code màu xanh đó nha.Tìm uri=--namkna-- và thay --namkna-- thành Id feed blog của bạn.
stylifyyourblog.
Nhận xét
Bạn cho mình hỏi , nếu mình muốn nó chạy ở dưới chạy lên thay vì ở trên xuống được ko vậy ? Vì ở trên site của mình có cái top menu ở trên rồi, nó bị che mất cái khung
Trả lờiXóaSửa top:-125px thành bottom:-125px sửa -125px cho thích hợp
XóaMột cách lý tưởng để tăng thêm người theo dõi
Trả lờiXóahttp://www.ads24h.com/
Nếu mình muốn widget này tự động mở ra khi vào blog thì làm thế nào hả bạn?
Trả lờiXóaBạn thay:
Xóaif(!sliderOut){
bringSliderOut()
sliderOut = true;
}
else{
bringSliderIn();
sliderOut = false
}
thành:
if(!sliderOut){
bringSliderOut()
sliderOut = false;
}
else{
bringSliderIn();
sliderOut = true
}