Tiện ích đăng ký nhận bài mới qua email

Một trong những tiện ích làm cho giao diện blog trở nên chuyên nghiệp hơn đó là tiện ích đăng ký nhận bài viết qua email. Tùy biến này vừa làm cho trang blog đẹp mắt hơn và nó còn có khả năng thu hút người đọc quay lại blog. 
DVD giới thiệu cách tạo box đăng kí nhận bài viết bên góc phải (hoặc trái) cho blogspot.

Cách thực hiện:

1. Đăng nhập Blogger
2. Chọn Bố cục ---> Thêm tiện ích HTML/Javascript
3. Dán code bên dưới vào khung nội dung của tiện ích:

<script type="text/javascript">

function hide_float_right() {

    var content = document.getElementById('float_content_right');

    var hide = document.getElementById('hide_float_right');

    if (content.style.display == "none")

    {content.style.display = "block"; hide.innerHTML = '<a href="javascript:hide_float_right()">[X]</a>'; }

        else { content.style.display = "none"; hide.innerHTML = '<a href="javascript:hide_float_right()">Đăng kí mail...</a>';

    }

    }

</script>

<style>

.float-ck { position: fixed; bottom: 0px; z-index: 9000}

* html .float-ck {position:absolute;bottom:auto;top:expression(eval (document.documentElement.scrollTop+document.docum entElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0))) ;}

#float_content_right {border: 1px solid #01AEF0;}

#hide_float_right {text-align:right; font-size: 12px;}

#hide_float_right a {background: #01AEF0; padding: 3px 6px; color: #FFF;}

</style>

<div class="float-ck" style="right: 0px" >

<div id="hide_float_right">

<a href="javascript:hide_float_right()">[X]</a></div>

<div id="float_content_right">

<!-- Start quang cao-->

  
<style>
#twist-blogger-sbox-v2 {
  padding: 0;
  padding-bottom: 5px;
  font-family: Arial,Helvetica;
  display: block;
  margin: 0;
  width: 100%;
  border-radius: 1px;
  border: 0;
  background: #363636;
}
#twist-blogger-sbox-v2 .main_tagline {
  padding: 0px 0px;
  line-height: 2.5em;
  font-size: 26px;
  margin: 0;
  height: 95px !important;
  overflow: hidden;
  font-weight: normal;
  color: #FFF;
  text-align: center;
  border: 0;
  background-color: #FF5959;
}
#twist-blogger-sbox-v2 .email_icon {
  display: table;
  margin: -35px auto 0px;
  font-size: 25px;
  padding: 12px;
  height: 25px;
  width: 25px;
  background-color: #363636;
  color: #FFF;
  border-radius: 50px;
  border: 10px solid #FFFFFF;
  line-height: 0;
}
#twist-blogger-sbox-v2 p {
  font-size: 15px;
  color: #F9F9F9;
  text-shadow: 0px -1px 0px #000;
  line-height: 27px;
  padding: 5px 10px 5px;
  text-align: center;
  width: 80%;
  margin: 5px auto 20px;
  border-bottom: 2px solid #6A6A6A;
  border-radius: 20px;
}
#twist-blogger-sbox-v2 .rssform {
  padding: 0;
  margin: 0 auto;
  display: block;
}
#twist-blogger-sbox-v2 .rssform input {
  padding: 8px;
  margin: 20px auto 15px;
  font-size: 13px;
  color: #000;
  text-align: center;
  display: block;
  font-family: Arial,Helvetica;
  font-weight: normal;
  width: 90%;
  height: 38px;
  text-transform: uppercase;
  outline: none !important;
  border: 1px solid #FFFFFF;
  border-radius: 1px;
  background-color: #FCFCFC;
  box-sizing: border-box !important;
}
#twist-blogger-sbox-v2 .rssform .button:hover {
  background: #000000;
}
#twist-blogger-sbox-v2 .rssform .button {
  background: #FF5959;
  color: white!important;
  border: 1px solid #FFFFFF;
  margin-top: 15px;
  outline: none !important;
  transition: all .3s ease-in-out;
  padding: 5px 2px !important;
  float: none;
  text-transform: uppercase;
  font-size: 18px;
  font-weight: normal;
  cursor: pointer;
}
#twist-blogger-sbox-v2 .bottom_lock_policy {
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQtdaVweILPm-TENKbo-QZ3zb7oxeXg2eV57nM2GLU1s3qgxa56Lih091970YuqrFUW180dMW7nW2o0ib5kn32J8VKaOAfLFS-IhtmrYc0PXncI8-wvJeHd2BLNjAW4obuKNwnvw5H-yc/s1600/Lock-twistblogger.png) no-repeat 3% -2px;
  color: #959595;
  text-align: center;
  font-size: 12px;
  margin: 0;
  padding: 3px;
  line-height: 25px;
}
#twist-blogger-sbox-v2 .bottom_lock_policy a {
  color: #959595;
  text-decoration: none !Important;
}
#twist-blogger-sbox-v2 .social_profiles {
  line-height: 1.2em;
  display: table;
  float: none;
  margin: 0px auto;
  text-align: center;
  min-width: 157px;
  padding: 5px 0px;
  border: 0;
}
#twist-blogger-sbox-v2 .social_profiles a:hover {
  color: #FFF;
  background-color: #FF5959;
  border-color: #FFF;
}
#twist-blogger-sbox-v2 .social_profiles a {
  color: #000000;
  margin: 0 5px;
  text-align: center;
  float: left;
  display: table;
  padding: 4px 5px;
  background-color: #FFFFFF;
  border-radius: 50px;
  border: 2px solid #2D2D2D;
  width: 15px;
  height: 15px;
  line-height: 0;
  font-size: 16px;
  transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
}
#twist-blogger-sbox-v2 form {
  margin-bottom: 10px !important;
}
</style>
<div id="twist-blogger-sbox-v2">
            <div class="main_tagline">Đăng kí nhận tin</div><div class="email_icon"><i class="fa fa-envelope"></i></div>
                 <p>Nhập ngay Email để nhận bài viết mới nhất</p>
   <div class="rssform">
            <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=vietmkt360com', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
            <input type="text" name="email" placeholder="Enter your email address..." />
            <input type="hidden" value="vietmkt360com" name="uri" />
            <input type="hidden" name="loc" value="en_US" />
            <input value="Đăng kí ngay" class="button" type="submit" />
            </form>
            </div>
       

<!-- End quang cao -->

</div>

</div></div>

Thay đổi các chỗ đổi màu cho phù hợp với blog của bạn.

4. Lưu lại và xem kết quả

DVD chúc các bạn thành công!

dovaden2010

Nguồn:
http://www.vietmkt360.com/2016/01/code-dang-ki-nhan-bai-viet-qua-email-cho-blogspot.html