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

Hộp đăng ký nhận bài viết qua Email (Subscribe by email) cho Blogspot
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:



☼ 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 đó.

Demo bằng hình ảnh mình đã chụp lại cho các bạn xem 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>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/JavaScriptdán đoạn mã code dưới đây vàoLư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

Quá trình cài đặt gặp vấn đề gì cứ để lại Comment !
Liên hệ đặt quảng cáo
Quảng cáo trên windows2it.com

About Quang Mến :

Tôi là Quang Mến. Tôi viết blog theo phong cách chuyên nghiệp. ^^! Dựa trên niềm đam mê học hỏi và mong muốn chia sẽ với mọi người @@!
Theo dõi tôi trên:
  • Image
  • Image
  • Image
  • Image
  • Image
  • Image
  • Image
  • Image
    Blogger Comment
    Facebook Comment

10 nhận xét:

  1. Hay quá nhưng em không biết làm

    ReplyDelete
    Replies
    1. :( Mình hướng dẫn chi tiết như vậy mà ___ Bạn không rõ chỗ nào ?

      Delete
    2. Làm xong rồi mà khi test thử nó báo vậy là sao add ? "The feed does not have subscriptions by email enabled." Mình phải thêm cái gì nữa ah ?

      www.quocduyauto.com

      Delete
    3. ----URL FeedBurner của Blog mình là windows2it/WszY

      Đã xác nhận: Bạn đã điền sai giá trị value ở đây là địa FeedBurner

      >> Chứ ko phải lại địa chỉ Blog của Bạn

      Muốn lấy URL FeedBurner cho Blog của Bạn... Bạn vào Bố cục => Thêm tiện ích => Chọn Theo dõi qua Email tại đây URL Feed có dạng http://feeds.feedburner.com/quocduyauto/???? và đại chỉ Feed của bạn là quocduyauto/????

      >>> Do mình chú thích ko rõ nên bạn hiểu nhầm thành địa chỉ URL của bạn _ Thông cảm cho sự thiếu sót này của mình :)

      Delete
  2. Mình dán đoạn code đầu tiên vào thẻ head nó báo lỗi bạn ơi."Error parsing XML, line 8, column 72: The reference to entity "subset." must end with the ';' delimiter."

    ReplyDelete
    Replies
    1. Vậy đơn giản là bạn coppy thiếu chưa hết đoạn code ở bước 1... bạn nên thử lại.

      Delete
    2. Mình đã copy và kiểm tra rồi bạn, vẫn không được :(

      Delete
    3. Mình cũng không hiểu cho Bạn luôn ở thủ thuật Hộp đăng ký nhận bài viết qua Email (Subscribe by email) cho Blogspot Version 1 mình chỉ chia nhỏ đoạn code ra thì bạn là làm mình ko biết lại báo lỗi ... Những Hộp đăng ký nhận bài viết qua Email (Subscribe by email) cho Blogspot Version 2 mình chỉ gộp các đoạn code lại thì bạn làm được ... :(

      Delete
  3. Báo lỗi "Lỗi khi phân tích cú pháp XML, dòng 5, cột 71: The reference to entity "subset" must end with the ';' delimiter." ngay vòng sửa xe :)

    Demo: http://www.123seo.vn/

    Thanks!

    ReplyDelete
    Replies
    1. Bạn thực hiện thủ thuật trên chỗ nào đâu mình tìm hoài ko thấy :) !!!

      Delete