Item: Code đăng kí nhận bài viết qua Email góc phải cho Blogspot
Rating: 9.5
Author: Bùi Tấn Đạt

Bởi: Bùi Tấn Đạt - Lúc: 00:43

(Vietmkt360.com) - 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 Vietmkt360 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

Các bạn xem thêm các bài viết tùy biến giao diện Blogspot : Tại đây

Ảnh minh họa :

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

Feedburner là gì ?

Feedburner là một dịch vụ miễn phí của Google cho phép quản trị viên có thể tạo nguồn cấp RSS trên website (tổng hợp nội dung theo trình tự thời gian - ví dụ). Feedburner hiện đang cung cấp khá nhiều tính năng hữu ích nhưng để tạo ra được 1 form theo dõi hoàn chỉnh như trên thì chúng ta sẽ cần sử dụng tới tính năng gửi bài viết qua email.

Mình thích sử dụng feedburner vì nó mang đến ít nhất 3 lợi ích cho website

- Tăng tính chuyên nghiệp, từ khi bổ sung thêm thằng này vào footer mình có cảm giác website giá trị hơn hẳn. Bạn có thể kéo xuống dưới và ngó qua nhé :))

- Thể hiện sự quan tâm tới người dùng bằng việc gửi email thông báo đều đặn mỗi khi có bài viết mới.

- Tăng thêm nguồn truy cập thụ động, vừa nhàn vừa tốt cho SEO.

Okie, giờ thì đi vào vấn đề chính :D

Lấy url feedburner cho blogspot

URL feedburner là điều kiện quan trọng để form đăng ký nhận bài viết mới hoạt động ổn định. Có lẽ vì cùng chung cha đẻ Google mà mỗi blogspot khi vừa sinh ra đã có sẵn URL feedburner.

- Đăng nhập blogger, bên menu trái chọn Bố cục.

- Kéo nội dung xuống phần Sidebar và nhấn Thêm tiện ích.

Tạo form đăng ký nhận bài viết mới qua email cho blogspot bằng Feedburner

Thêm tiện ích trong blogspot

- Tại tab Cơ bản (có 27 tiện ích), chọn Theo dõi qua email (Subcribe via email). Đây chính là phiên bản thu nhỏ của feedburner.

Tiện ích Theo dõi qua Email

- Cửa sổ mới xuất hiện, copy đoạn text khoanh đỏ như hình dưới đây (123itvn/feJm). Sau đó nhấn Hủy để kết thúc, chỉ cần lấy được đoạn text này là okie rồi.

Copy đoạn text trong url feedburner 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


<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/AVvXsEiJvBRgJ8j4vwlzvgLaNTf8GHoypuBMjUs4xx36wd4F-3sGShueGgLHqBCZKPe0oP22nWcbxSzQ_McuZgpgJj5-YYbN2_DTqPRdUjIRLF_-2CfQ84soG1EmAnSfa36t4cf1guEItu9PknU/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">


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

            <input type="text" name="email" placeholder="Enter your email address..." />

            <input type="hidden" value="kenhtai2" 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>