Tạo hộp đăng ký qua email dạng Popup xổ dọc cho blog

Đăng bởi Admin | 12/8/13 | 0 nhận xét

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 DEMO

Minh hoạ:

☼ 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(&quot;http://feedburner.google.com/fb/a/mailverify?uri=--namkna--&quot;, &quot;popupwindow&quot;, &quot;scrollbars=yes,width=550,height=520&quot;); 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.

Nguồn: stylifyyourblog- Namkna

Thu thuat vi tinh