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 đó.
☼ 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;'>✔</div> Free Photoshop .PSD Templates</li> <li><div style='color: #FFE800; display: inline-block; font-size:18px; letter-spacing: 4px;'>✔</div> Adobe Illustrator Tutorials</li> <li><div style='color: #FF5700; display: inline-block; font-size:19px; letter-spacing: 4px;'>✔</div> 3D Animation Tutorials</li> <li><div style='color: #FFE800; display: inline-block; font-size:20px; letter-spacing: 4px; letter-spacing: 4px;'>✔</div> Straight into your → 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 !
Hay quá nhưng em không biết làm
Trả lờiXóa:( Mình hướng dẫn chi tiết như vậy mà ___ Bạn không rõ chỗ nào ?
XóaLà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 ?
Xóawww.quocduyauto.com
----URL FeedBurner của Blog mình là windows2it/WszY
XóaĐã 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 :)
đọc bình luận cười luôn
XóaMì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."
Trả lờiXóaVậ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.
XóaMình đã copy và kiểm tra rồi bạn, vẫn không được :(
XóaMì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 ... :(
XóaBá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 :)
Trả lờiXóaDemo: http://www.123seo.vn/
Thanks!
Bạn thực hiện thủ thuật trên chỗ nào đâu mình tìm hoài ko thấy :) !!!
Xóa