Hộp popup gửi email sử dụng tiện ích liên hệ của blog

Chào các bạn, để bắt nhịp với xu thế hiện nay sử dụng blog với thiết kế phẳng lấy giao diện material design làm chủ đạo do đó mình có thiết kế form đăng ký bài viết qua email theo phong cách material design và mình cũng thiết kế theo dạng tiện ích và dạng popup giúp các bạn có nhiều tùy chọn sử dụng hơn. Dưới đây là hướng dẫn chi tiết theo từng dạng

1. Dạng tiện ích (widget)

Cách thực hiện:

Bước 1: Lấy uri của Blog

Vào bố cục chọn thêm tiện ích Theo dõi qua Email, trong tiện ích để ý phần URL FeedBurner nó có dạng http://feeds.feedburner.com/blogthuthuatwin10 thì bạn chỉ cần lấy phần blogthuthuatwin10 vì đó là uri của Blog xong bỏ không thêm tiện ích.

Bước 2: Thêm tiện ích HTML

Chọn thêm tiện ích HTML/Javascript đặt tên cho tiện ích sau đó copy đoạn code bên dưới vào tiện ích

<style>
.subcribe-content {
    width: auto;
    padding: 2em;
    background: #fff;

}
.blanterinput {
    float: none;
    position: relative;
    margin-bottom: 45px;
    margin-right: 10px
}
.blanterinput input {
    font-size: 16px;
    padding: 15px 0;
    display: block;
    width: 100%;
    border: none;
    border-bottom: 1px solid #ddd
}
.blanterinput input:focus {
    outline: none
}
.blanterinput label {
    color: #999;
    font-size: 16px;
    font-weight: 400;
    position: absolute;
    pointer-events: none;
    left: 0;
    top: 10px;
    transition: .2s ease all
}
.blanterinput input:focus ~ label,
.blanterinput input:valid ~ label {
    top: -20px;
    font-size: 14px;
    color: #07ACEC
}
.bar {
    position: relative;
    display: block;
    width: 100%
}
.bar:before,
.bar:after {
    content: '';
    height: 2px;
    width: 0;
    bottom: 1px;
    position: absolute;
    background: #07ACEC;
    transition: .2s ease all
}
.bar:before {
    left: 50%
}
.bar:after {
    right: 50%
}
.blanterinput input:focus ~ .bar:before,
.blanterinput input:focus ~ .bar:after {
    width: 50%
}
.highlight {
    position: absolute;
    height: 50%;
    width: 100px;
    top: 25%;
    left: 0;
    pointer-events: none;
    opacity: .5
}
.blanterinput input:focus ~ .highlight {
    animation: inputHighlighter .3s ease
}
.blanterinput input:focus ~ label,
.blanterinput input:valid ~ label {
    top: -20px;
    font-size: 14px;
    color: #07ACEC
}
.button {
    position: relative;
    display: inline-block;
    padding: 12px 24px;
    width: 100%;
    vertical-align: middle;
    color: #fff;
    font-size: 16px;
    line-height: 20px;
    -webkit-font-smoothing: antialiased;
    text-align: center;
    letter-spacing: 1px;
    border: 0;
    cursor: pointer;
    transition: all 0.15s ease;
}
.button:focus {
    outline: 0;
}
.buttonBlue {
    background: #07ACEC;
    text-shadow: 1px 1px 0 rgba(39, 110, 204, .5);
}
.buttonBlue:hover {
    background: #07ACEC;
}
</style>
<div class="subcribe-content">
      <form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="popup();return true" target="popupwindow">
        <input name="uri" type="hidden" value="gethow" />
        <input name="loc" type="hidden" value="en_US" />
        <div class="blanterinput">
          <input class="validate" name="name" required="" type="text" value="" />
            <span class="highlight"></span>
            <span class="bar"></span>
            <label><i class="fa fa-user"></i>&nbsp;&nbsp;Name</label>
          </div>
        <div class="blanterinput">
          <input class="validate" name="email" required="" type="email" value="" />
            <span class="highlight"></span>
            <span class="bar"></span>
            <label><i class="fa fa-envelope"></i>&nbsp;&nbsp;Email</label>
        </div>
        <button class="button buttonBlue" name="submit" type="submit">Subscribe</button>
      </form>
    </div>
<script>
  function popup() {
    var win = window.open('http://feedburner.google.com/fb/a/mailverify?uri=blogthuthuatwin10', 'popupwindow', 'scrollbars=yes,width=550,height=520');
    var win_timer = setInterval(function() {
      if(win.closed) {
        window.location.reload();
        clearInterval(win_timer);
      }
    }, 100);
  }
</script>

Thay blogthuthuatwin10 trong code bằng uri Blog của bạn đã lấy ở bước 1. Xong chọn lưu tiện ích.

2. Dạng popup

Dạng này không bị cố định có thể đặt bất cứ vị trí nào, xem demo click vào nút bên dưới

Subscribe by Email

Cách thực hiện:

Bước 1: Lấy uri của Blog

Làm tương tự như bước 1 của dạng tiện ích.

Bước 2: Thêm css trong <b:skin> </b:skin>

<style>
.subcribe {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.4);
}
.subcribe-content {
    width: 360px;
    margin: 0 auto;
    padding: 2em;
    background: #fff;
    border: 1px solid #ddd;
    box-shadow: rgba(0, 0, 0, 0.14902) 0px 1px 1px 0px, rgba(0, 0, 0, 0.09804) 0px 1px 2px 0px;
}
@media (max-width:360px){
  .subcribe-content{width:100%}
}
.close {
    display: block;
}
.blanterinput {
    float: none;
    position: relative;
    margin-bottom: 45px;
    margin-right: 10px
}
.blanterinput input {
    font-size: 16px;
    padding: 15px 0;
    display: block;
    width: 100%;
    border: none;
    border-bottom: 1px solid #ddd
}
.blanterinput input:focus {
    outline: none
}
.blanterinput label {
    color: #999;
    font-size: 16px;
    font-weight: 400;
    position: absolute;
    pointer-events: none;
    left: 0;
    top: 10px;
    transition: .2s ease all
}
.blanterinput input:focus ~ label,
.blanterinput input:valid ~ label {
    top: -20px;
    font-size: 14px;
    color: #07ACEC
}
.bar {
    position: relative;
    display: block;
    width: 100%
}
.bar:before,
.bar:after {
    content: '';
    height: 2px;
    width: 0;
    bottom: 1px;
    position: absolute;
    background: #07ACEC;
    transition: .2s ease all
}
.bar:before {
    left: 50%
}
.bar:after {
    right: 50%
}
.blanterinput input:focus ~ .bar:before,
.blanterinput input:focus ~ .bar:after {
    width: 50%
}
.highlight {
    position: absolute;
    height: 50%;
    width: 100px;
    top: 25%;
    left: 0;
    pointer-events: none;
    opacity: .5
}
.blanterinput input:focus ~ .highlight {
    animation: inputHighlighter .3s ease
}
.blanterinput input:focus ~ label,
.blanterinput input:valid ~ label {
    top: -20px;
    font-size: 14px;
    color: #07ACEC
}
.button {
    position: relative;
    display: inline-block;
    padding: 12px 24px;
    width: 100%;
    vertical-align: middle;
    color: #fff;
    font-size: 16px;
    line-height: 20px;
    -webkit-font-smoothing: antialiased;
    text-align: center;
    letter-spacing: 1px;
    border: 0;
    cursor: pointer;
    transition: all 0.15s ease;
}
.button:focus {
    outline: 0;
}
.buttonBlue {
    background: #07ACEC;
    text-shadow: 1px 1px 0 rgba(39, 110, 204, .5);
}
.buttonBlue:hover {
    background: #07ACEC;
}
</style>

Bước 3: Thêm form và javascript trước thẻ đóng </body>

<div class="subcribe" id="mySubcribe">
  <div class="subcribe-content">
    <span class="close"></span>
      <form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="popup();return true" target="popupwindow">
        <input name="uri" type="hidden" value="gethow" />
        <input name="loc" type="hidden" value="en_US" />
        <div class="blanterinput">
          <input class="validate" name="name" required="" type="text" value="" />
            <span class="highlight"></span>
            <span class="bar"></span>
            <label><i class="fa fa-user"></i>&nbsp;&nbsp;Name</label>
          </div>
        <div class="blanterinput">
          <input class="validate" name="email" required="" type="email" value="" />
            <span class="highlight"></span>
            <span class="bar"></span>
            <label><i class="fa fa-envelope"></i>&nbsp;&nbsp;Email</label>
        </div>
        <button class="button buttonBlue" name="submit" type="submit">Subscribe</button>
      </form>
    </div>
</div>
<script>
//<![CDATA[
  var subcribe = document.getElementById('mySubcribe');
  var btn = document.getElementById("subscribe");
  var span = document.getElementsByClassName("close")[0];
  btn.onclick = function() {
    subcribe.style.display = "block";
}
  span.onclick = function() {
    subcribe.style.display = "none";
}
  window.onclick = function(event) {
    if (event.target == subcribe) {
        subcribe.style.display = "none";
    }
}
  function popup() {
    var win = window.open('http://feedburner.google.com/fb/a/mailverify?uri=blogthuthuatwin10', 'popupwindow', 'scrollbars=yes,width=550,height=520');
    var win_timer = setInterval(function() {
      if(win.closed) {
        window.location.reload();
        clearInterval(win_timer);
      }
    }, 100);
  }
//]]>
</script>

Thay blogthuthuatwin10 bằng uri blog của bạn.

Bước 4: Đặt nút theo dõi

Bạn có thể đặt nút này ở bất kỳ vị trí nào và ngay trong bài viết cũng được, đoạn mã cần đặt là

<a id="subscribe" href="javascript:void(0);">Subscribe by Email</a>

Thay chữ Subscribe by Email bằng chữ khác theo ý bạn, nếu bạn muốn làm nổi bật nút có thể sử dụng style sau:

<style>
#subscribe{color: #fff!important;background: #07ACEC;padding: 7px 20px;border-radius: 4px;border: none;outline: none;box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);cursor: pointer;transition: all .4s ease-in-out;text-transform:uppercase}
#subscribe:hover{background-color:#07ACEC}
</style>

Như vậy mình đã vừa hướng dẫn các bạn hai cách thêm hộp đăng ký nhận bài viết qua email, cách thực hiện rất đơn giản. Hi vọng bài viết sẽ giúp ích bạn.

nguồn: blogthuthuatwin10

Blogger Tips

https://severphim.blogspot.com/2018/08/hop-popup-gui-email-su-dung-tien-ich.html

Previous Post

Next Post

Top Post