Trang chủ » Thủ thuật blogger » Hướng dẫn tạo form đăng ký bài viết qua email theo phong cách material design

Chủ Nhật, 24 tháng 9, 2017

Hướng dẫn tạo form đăng ký bài viết qua email theo phong cách material design

on 05:14 0 Comment Lượt xem
Chia sẻ ngay:   

Loading...



Bạn muốn xem:


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=kenh28', 'popupwindow', 'scrollbars=yes,width=550,height=520');

    var win_timer = setInterval(function() {  

      if(win.closed) {

        window.location.reload();

        clearInterval(win_timer);

      }

    }, 100);

  }

</script>

Thay kenh28 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


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>


.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;

}

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=kenh28', 'popupwindow', 'scrollbars=yes,width=550,height=520');

    var win_timer = setInterval(function() {  

      if(win.closed) {

        window.location.reload();

        clearInterval(win_timer);

      }

    }, 100);

  }

//]]>

</script>

Thay kenh28 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:


#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}

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.


loading...
  


Loading...


0 nhận xét: