Code đăng kí nhận bài viết qua Email góc phải cho Blogspot

Tùy biến giao diện cho blog là một chủ đề được rất nhiều bạn quan tâm và tìm hiểu . Một trong những code làm cho giao diện của các bạn trở nên chuyên nghiệp hơn rất nhiều đó là code đăng kí nhận bài viết qua email. Tùy biến này vừa làm cho trang Blog của chúng ta đẹp mắt hơn và nó còn có khả năng thu hút người đọc quay lại Blog. Hôm nay tôi có sưu tầm 1 típ chia sẻ đến các bạn cách tạo box đăng kí nhận bài viết bên góc phải (trái) cho Blogspot

Ảnh minh họa :

Code đăng kí nhận bài viết qua Email góc phải cho Blogspot 

<script type="text/javascript">

function hide_float_right() {


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

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


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



        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">


  height: 95px !important;
<!-- 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;
  overflow: hidden;

#twist-blogger-sbox-v2 p {
  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;
}
  font-size: 15px;

  font-size: 13px;
  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;
  color: #000;

#twist-blogger-sbox-v2 .rssform .button {
  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;
}
  background: #FF5959;
  color: white!important;

  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVId_WYix3CGoJjxNGPnNdv058dbYrB6Ay26R6WFmOAw9J1h3Jp3rjX9_TTJVwlGhrFxOxYD07TZZZv4LioADjU5pWrinh7ga7r3sWO64ndC2UyytSNVVwKMEGmWXIZPH4k68IbtN8guU/s1600/Lock-twistblogger.png) no-repeat 3% -2px;
  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 {
  color: #959595;
  text-align: center;
  font-size: 12px;
  margin: 0;
  padding: 3px;
  line-height: 25px;
}

#twist-blogger-sbox-v2 .social_profiles a {
#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;
}
  color: #000000;
  margin: 0 5px;

            <div class="main_tagline">Đăng kí nhận tin</div><div class="email_icon"><i class="fa fa-envelope"></i></div>
  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">

            <input type="hidden" value="vietmkt360com" name="uri" />
                 <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..." />

</div></div>
            <input type="hidden" name="loc" value="en_US" />
            <input value="Đăng kí ngay" class="button" type="submit" />
            </form>
            </div>
       

<!-- End quang cao -->

</div>

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

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

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

Có gì thắc mắc các bạn comment bên dưới mình sẽ trả lời ngay nhé !

Chúc các bạn thành công

Nguồn: Vietmkt360