Hộp đăng ký nhận bài viết qua Email (Subscribe by email) cho Blogspot Version 1

Xin chào tất cả bạn đọc trên Windows2it. Hôm trước Mình kết thúc một Seri thủ thuật nó về “Thêm nút Share Pro Version vào Blogspot”. Hôm nay Mình viết một Seri mới nói về thủ thuật “Theo dõi bài viết qua Email (hay Subscribe by email)”.

Khung đăng ký nhận tin (Subscribe by email) được sử dụng hầu hết trong các Blog/Website để giúp cho độc giả yêu thích có thể đăng ký nhận tin từ Blog của bạn.

Đọc thêm:

● Tạo chức năng Responsive Video chèn (nhúng) từ Youtube vào Blogspot.

● Thêm hộp tìm kiếm (search) cho Blogspot.

☼ Lợi ích của thủ thuật này? Làm cho Blog của bạn trông chuyên nghiệp mà còn nhận lượng truy cập lớn từ Email.

☼ Tính năng cơ bản:

· Thiết kế đáp ứng Responsive (Tự động co giãn cho phù hợp kích thước cột Sitebar)

· Sử dụng các đoạn CSS và đoạn Scipts mở nên việc tùy biến rất dễ dàng.

· Trong thiết này Mình sử dụng Font Family "Oswald" trong thiết kế này.

· Quá trình cài đặt rất dễ dàng chỉ việc Copy và Paste.

Dưới đây là DEMO mình đã chụp lại cho các bạn xem trước thành quả. Ngoài ra, bạn có thể cài đặt nút mạng xã hội kết hợp với Subscribe by email mà mình đã phát hành trước đó.

☼ Giờ bắt đầu thủ thuật cùng Windows2it

Bước 1: Vào Blog => Mẫu => Chỉnh sửa HTML. Nhấn tổ hợp phím Ctrl + F và tìm đến thẻ <head>. Sau đó dán đoạn mã Code sau ở phía dưới thẻ <head>.

<link href='http://fonts.googleapis.com/css?family=Oswald%3A400&subset%3Dlatin%2Clatin-ext&ver%3D4.1' rel='stylesheet' type='text/css'/>

Bước 2: Tiếp đó nhấn tổ hợp phím Ctrl + F và tìm đến thẻ </b:skin>. Sau đó dán đoạn mã Code sau ở phía trên thẻ </b:skin> và Lưu mẫu.

/*------- Stylish Sidebar Subscription Box Widget by 123tailieufree.com------*/
#twist-blogger-sbox {
  padding: 0;
  margin: 0;
  width: 100%; /*---- Change width here - You can use pixels or in percentage -----*/
  height: 355px;
  border-radius: 1px;
  border: 0;
  background: #3A3939; /*------ Change background color of widget here--------*/
}
#twist-blogger-sbox .tagline {
  padding: 5px 0px 0px 0px;
  line-height: 35px;
  height: 45px;
  font-size: 25px; /*----- Change the Font Size of Main Tagline here -----*/
  font-weight: normal;
  font-family: "Oswald",sans-serif;
  text-shadow: 0px -1px 0px #999;
  color: #FFF;
  text-align: center;
  background: #FF7400; /*---- Change background color of Tagline here -----*/
  border: 5px solid #FD6A00;
  border-bottom: 7px solid transparent;
  border-bottom-left-radius: 50px;
}
#twist-blogger-sbox .sub-tagline {
  font-family: "Oswald", sans-serif;
  font-size: 19px;      /*--Sub Tagline Font Size - Change here ---*/
  color: #FFF;
  text-shadow: 0px -1px 0px #000;
  line-height: 30px;
  padding: 0px 10px 0px 10px;
  text-align: center;
  margin: 0;
}
#twist-blogger-sbox .item-list {
  margin: 10px 0px 0px 0px !important;
}
#twist-blogger-sbox .item-list > ul {
  padding: 0px 0px 0px 50px !Important;
  margin: 0 !important;
}
#twist-blogger-sbox .item-list > ul > li {
  font-family: "Oswald", sans-serif;
  font-size: 15px; /*----- Change Font Size of List here ------*/
  margin-left: 10px;
  color: #E8E8E8; /*------ Change font color of List here ----*/
  line-height: 24px;
  text-align: left;
  text-shadow: 0px -1px 0px #000;
  list-style: none !important;
  list-style-type: none !important;
  margin: 0px !important;
  padding: 0px !important;
  border: 0 !important;
}
#twist-blogger-sbox .rssform {
  padding: 0px 20px;
  margin: 16px 0px 16px 0px;
}
#twist-blogger-sbox .rssform input {
  padding: 8px;
  font-size: 13px;
  font-family: "Oswald", sans-serif;
  font-weight: normal;
  width: 100%;
  text-transform: uppercase;
  outline: none !important;
  border: none;
  border-radius: 1px;
  box-sizing: border-box !important;
  -moz-box-sizing:border-box;
}
#twist-blogger-sbox .rssform .button:hover {
  background: #ED6D00; /*----- Change Subscribe button hover color here -----*/
}
#twist-blogger-sbox .rssform .button {
  background: #FF7400; /*----- Change Subscribe button background color here -----*/
  color: #FFF!important; /*------ Change Font color here ------*/
  border: 0;
  margin-top: 15px;
  outline: none !important;
  transition: all .3s ease-in-out;
  width: 100%;
  padding: 6px !important;
  float: none;
  text-transform: uppercase;
  font-family: "Oswald", sans-serif;
  font-size: 18px;
  font-weight: normal;
  cursor: pointer;
}
#twist-blogger-sbox .lock-policy a {
  color:#818181;
  text-decoration:none !Important;
}
#twist-blogger-sbox .lock-policy {
  font-family: "Oswald",sans-serif;
  background: url(http://4.bp.blogspot.com/-kYVqV9JYDHY/VPMC8jPKTGI/AAAAAAAAA28/zxv0TYRIZe4/s1600/Lock-twistblogger.png) no-repeat 10px -2px; /*--- image URL of Lock appears in footer ---*/
  color: #818181;
  text-align: center;
  font-size: 12px; /*--- Font size of footer line ----*/
  margin-left: 10px;
  padding: 0px;
  line-height: 30px;
  margin-top: -5px;
}

Bước 3: Blog => Bố cục => Thêm tiện ích => HTML/JavaScript và dán đoạn mã code dưới đây vào và Lưu sắp xếp.

<div id='twist-blogger-sbox'>
            <div class='tagline'>
            Wait! Did You Know?
            </div>
                <div class='sub-tagline'>Why should you subscribe?</div>
     <div class="item-list">
     <ul>
     <li><div style='color: #FF5700; display: inline-block; font-size:17px; letter-spacing: 4px;'>&#10004;</div> Free Photoshop .PSD Templates</li>
     <li><div style='color: #FFE800; display: inline-block; font-size:18px; letter-spacing: 4px;'>&#10004;</div> Adobe Illustrator Tutorials</li>
     <li><div style='color: #FF5700; display: inline-block; font-size:19px; letter-spacing: 4px;'>&#10004;</div> 3D Animation Tutorials</li>
     <li><div style='color: #FFE800; display: inline-block; font-size:20px; letter-spacing: 4px; letter-spacing: 4px;'>&#10004;</div> Straight into your &#8594; INBOX</li>
     </ul>
     </div>
            <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=windows2it/WszY', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
            <input type='text' name='email' placeholder='Enter your email address...' />
            <input type="hidden" value="windows2it/WszY" name="uri"/>
            <input type="hidden" name="loc" value="en_US"/>
            <input value="Subscribe Now" class="button" type="submit" />
            </form>
            </div>
   <div class="lock-policy">
      Safe With Us | <a href="http://www.windows2it.com/p/contact-us.html">About Us</a> | <a href="http://www.windows2it.com/2015/11/hop-dang-ky-nhan-bai-viet-qua-email-subscribe-by-email-cho-blogspot.html">Get This Widget</a>
   </div>
            </div>

☼ Tùy chỉnh:

· Thay đổi các chữ tô màu đỏ cho phù hợp với nội dung Blog của bạn.

· Thay đổi địa chỉ windows2it/WszY thành địa chỉ URL FeedBurner Blog của bạn.

· Ngoài ra bạn có thể bỏ mục liên kết ở mục Footer.

Nếu bạn thích bài viết này, hãy subscribe blog của tôi để thường xuyên cập nhật những bài viết hay nhất, mới nhất qua email nhé. Cảm ơn rất nhiều JJJ

Backlink: Tài liệu ôn thi đại học môn Vật lý

Quá trình cài đặt gặp vấn đề gì cứ để lại Comment !