[Tips] - Tạo hộp Theo dõi qua Email / Follow by Email nổi bật & hiện đại cho Blogspot Blogger

[Tips] - Tạo hộp Theo dõi qua Email / Follow by Email nổi bật & hiện đại cho Blogspot Blogger

Đọc thêm»

[Tips] - Theo dõi qua email kết hợp mạng xã hội ở bài viết Blogger V1

Bạn có muốn có một tiện ích theo dõi và mạng xã hội thế này ở chân bài viết blogger không?

Terocket sẽ tiếp tục hướng dẫn các bạn các thủ thuật thiết kế một tiện ích theo dõi bài viết qua email, biến thể có thêm theo dõi qua nút tương tác mạng xã hội. Với tiện ích Theo dõi qua email kết hợp mạng xã hội ở bài viết Blogger này, thì Terocket đã thay đổi sao cho phù hợp với các thiết kế dành cho mobile, có nghĩa chính là thiết kế responsive đáp ứng. Hoàn toàn chuẩn SEO và có lợi cho công cụ tìm kiếm.

Live Demo

Cách thức thực hiện Theo dõi qua email kết hợp mạng xã hội ở bài viết Blogger mà Terocket sẽ hướng dẫn sau đây:

>>Sửa lỗi: The reference to entity "zx" must end with the ';' delimiter.

>>Sửa lỗi "The feed does not have subscriptions by email enabled"

>>RSS Feeds là gì?

>>Sửa lỗi "feed filesize is larger than 576K..." khi đăng ký FeedBruner

>>Fix lỗi không lưu được feedburner 512K limit trong blogspot

>>Đăng ký và cài đặt Feedburner Atom cho Blogspot

>>Tạo hộp đăng ký (Subscription) trên sidebar cho blogger

>>Hộp đăng ký nhận tin (Subscribe ) dạng Popup cho blogger

>>Tạo nút RSS màu cam bằng CSS thuần túy

>>Hộp Subscribe kết hợp twitter, google pluss, feed cho blogger

>>Đổi màu widget "Follow by Email" của blogger

>>Tạo Feed cho tất cả các nhãn bài đăng

>>Cách đăng ký và sử dụng FeedBurner cho Blogspot

Bước 1 - Chèn đoạn code vào trong mẫu của bạn. Trước hết hãy vào Blog Title → Template → Edit HTML. Nhấn Ctrl. + F và tìm kiếm <data:post.body/> . Sau đó hãy thay thế đoạn code vào sau <data:post.body/> nhé. Bạn phải nhớ rằng, có đến tận 2-4 cái <data:post.body/> ở trong mẫu của bạn. Bạn phải dự đoán nó và thay thế vào, nếu không hiệu ở đoạn này, hãy thay thế vào <data:post.body/> ở đoạn khác nhé.

<section class="newsletter">
<h2>
Tired of checking for new posts ?
</h2>
<div id="form-newsletter">
<div class="social facebook">
<a href="https://www.facebook.com/Terocket" target="_blank">
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjZVljbbMzkMSMhrJBmo9eD8TDZNMcDfnT47Qb6Dak8vLNLQHdVMlgIJsss1p2gi84sB1bryBEnw2kqTekZ-fK3MA1Ql91BjbrzBJNVD5UVXB-fe5rR1T8vC3N18gT9yIxZqJeCyhwhoEE/s1600/nl-facebook@2x.png" />
    </a>
    <iframe allowtransparency="true" class="social-box fb-like" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2FTerocket&amp;width=90&amp;height=21&amp;colorscheme=light&amp;layout=button_count&amp;action=like&amp;show_faces=false&amp;send=false&amp;appId=519648428126767&amp;locale=en_US" style="border: none; height: 21px; overflow: hidden; width: 90px;">
    </iframe>
  </div>
<div class="social twitter">
<a href="https://twitter.com/AllBloggerTrick" target="_blank">
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihd9fbCM6WbVqHWyizdsHlnjdM_i-5RTcgqaUn-ukkTzLS183nk77akuJjjuWJQXUaY_H9oJn9VJbCLuqR-y31Niy6U7ekO_k_Y-lMRyIbJ3DN78a30mEFUmj2y05n07Dadez86pTUCyCn/s1600/nl-twitter@2x.png" />
    </a>
    <iframe allowtransparency="true" class="social-box twitter-follow-button twitter-follow-button" data-twttr-rendered="true" frameborder="0" id="twitter-widget-0" scrolling="no" src="http://platform.twitter.com/widgets/follow_button.1399599786.html#_=1399785529920&amp;id=twitter-widget-0&amp;lang=en&amp;screen_name=AllBloggerTrick&amp;show_count=false&amp;show_screen_name=false&amp;size=m" style="height: 20px; width: 60px;" title="Twitter Follow Button">
    </iframe>
    <script>
      !function(d,s,id){
        var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?&#39;http&#39;:&#39;https&#39;;
        if(!d.getElementById(id)){
          js=d.createElement(s);
          js.id=id;
          js.src=p+&#39;://platform.twitter.com/widgets.js&#39;;fjs.parentNode.insertBefore(js,fjs);}}(document, &#39;script&#39;, &#39;twitter-wjs&#39;);
    </script>
  </div>
<div class="newsletter-form">
<fieldset>
<h2>
       Get all posts directly in your mail.
      </h2>
<div class="fields">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=Terocket', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input class="email" id="email" name="email" onblur="ifundefinedthis.value=='')this.value=this.defaultValue;" onfocus="ifundefinedthis.value==this.defaultValue)this.value='';" type="text" value="Enter Your Email here.." />
          <input name="uri" type="hidden" value="Terocket" />
          <input name="loc" type="hidden" value="en_US" />
          <input class="subscribe" name="commit" type="submit" value="Subscribe" />
        </form>
</div>
</fieldset>
</div>
</div>
</section>
<style>
.newsletter{text-align:center;margin:20px 0;}
.newsletter .social.facebook{background:none repeat scroll 0 0 #3661A0}
.newsletter .social{padding-top:20%;width:20%;float:left;position:relative}
.newsletter #form-newsletter{display:block;width:90%;max-width:900px;min-width:500px;margin:0 auto}
.newsletter:before,.newsletter:after{content:&quot; &quot;;display:table}
.newsletter:after{clear:both}
.newsletter h2{color:#3B434D;font-family:Open Sans,sans-serif;font-size:1.5em;font-weight:300;width:65%;margin:1em auto}
.newsletter .social.twitter{background:none repeat scroll 0 0 #00ACED}
.newsletter .social a{display:block;left:30%;position:absolute;top:20%;width:40%}
.newsletter .social a img{max-width:100%;width:100%;transition: transform 0.3s ease-out 0s}
.newsletter .social a:hover img{transform:scale(1.1)}
.newsletter .social .social-box{bottom:20px;left:50%;position:absolute}
.newsletter .social .social-box.fb-like{margin-left:-45px}
.newsletter .social .social-box.twitter-follow-button{margin-left:-30px}
.newsletter .newsletter-form{background:none repeat scroll 0 0 #1E293B;float:left;padding-top:20%;position:relative;width:60%}
.newsletter .newsletter-form fieldset{height:38px;left:10%;position:absolute;top:10%;width:80%;border:none}
.newsletter .newsletter-form fieldset h2{color:#FFF;font-family:Open Sans, sans-serif;font-weight:300;width:100%;margin:0 0 1.5625em;font-size:16px;}
.newsletter .newsletter-form fieldset .fields{position:relative}
.fields .email{border-radius:10px 0 0 10px;outline:0 none;width:84%;border:0;left:0;position:absolute;padding:10.5px}
.fields .subscribe{background:none repeat scroll 0 0 #F0553B;border:medium none;border-radius:0 10px 10px 0;color:#FFF;right:0;position:absolute;padding:10px;transition:all ease 0.6s;}
.fields .subscribe:hover {background: none repeat scroll 0 0 #161616;}
</style>
<script type="text/JavaScript">
fontsize = function () {
    var abtSubs = $(".newsletter #form-newsletter").width() * 0.025; // 10% of container width
    $(".newsletter .newsletter-form fieldset h2").css('font-size', abtSubs);
};
$(window).resize(fontsize);
$(document).ready(fontsize);
</script>

***Bạn có thấy các chữ màu đỏ Terocket không? Hãy thay thế vào của bạn tương ứng nhé. Trong tiện ích này có sử dụng Feedbuner đó, nếu bạn không biết hãy vào cách Đăng ký và cài đặt Feedburner Atom cho Blogspot mà Terocket cung cấp để tạo cho mình một cái Feed nha!

Xong rồi, chúc bạn thành công với tiện ích Theo dõi qua email kết hợp mạng xã hội ở bài viết Blogger mà Terocket giới thiệu nhé. Nếu có gì thắc mắc và không hiểu, hãy gửi một câu hỏi ở phần bình luận, Terocket sẽ trả lời bạn nhé!

An Thành Adthinks - Terocket

Sửa lỗi: The reference to entity "zx" must end with the ';' delimiter.

Lỗi "The URL does not appear to reference a valid XML file. We encountered the following problem: Error on line 12: The reference to entity "zx" must end with the ';' delimiter." gặp phải khi đăng ký feedbuner khiến rất nhiều người gặp khó khăn và nhiều khi không thể khắc phục.

Ảnh minh họa lỗi bạn gặp phải khi đăng ký feed cho blog của mình

Đọc thêm»

Sửa lỗi "The feed does not have subscriptions by email enabled"

Feedburner có 1 dịch vụ đó là giúp người đọc của bạn theo dõi các bài viết hằng ngày mà không cần phải lên website kiểm tra đó là Email Subscription (theo dõi bài viết qua email)Nhưng có một lỗi thường gặp, là sau khi tạo xong FeebBurner chèn vào blog để độc giả đăng ký nhận tin qua email, ta hay gặp thông báo lỗi “The feed does not have subscriptions by email enabled” không thể đăng ký nhận tin qua email như hình dưới:

Lỗi này do bạn chưa bật chức năng đó trên trang cài đặt của feedbunner. Bài viết này mình sẽ hướng dẫn các bạn cách khắc phục lỗi này..

Đọc thêm»

RSS Feeds là gì

Một website muốn nhanh chóng lên được top kết quả tìm kiếm của Google với các từ khóa liên quan thì đòi hỏi nội dung website luôn được cập nhật tươi mới, bài viết được update liên tục để các bộ máy tìm kiếm đánh giá tốt về website của bạn. Một website không cập nhật tin tức thường xuyên, đều đặn thì sẽ nhanh chóng bị tụt hạng trong bảng kết quả tìm kiếm. Bởi vì khi mà các website đối thủ luôn cập nhật tin tức thường xuyên mà website của bạn lại không cập nhật thì rõ ràng là bạn đã giành ít sự quan tâm cho nó, vậy thì làm sao mà các công cụ tìm kiếm đánh giá cao websie của bạn khi nội dung chậm cập nhật, lượng traffic ngày càng giảm.

Đọc thêm»

Sửa lỗi "feed filesize is larger than 576K..." khi đăng ký FeedBruner

Feedburner là một nguồn cấp dữ liệu rất quan trong với nhũng blogger thích tùy biến và học hỏi. Có rất nhiều tiện ích và thủ thuật blog yêu cầu bạn phải cài nguồn cấp dữ liệu feedburner. Tuy nhiên trong quá trình đăng ký hẳn một số bạn sẽ gặp một thông báo lỗi như sau: "Your feed filesize is larger than 576K. Your need to reduce it size in order for FeedBruner to process it. Típ for controlling feed file size with Blogger can be found in Tech on FeedBruner Forums, Our support site.". Bài viết sau đây sẽ hướng dẫn các bạn cách khắc phục lỗi này.

Đọc thêm»

Fix lỗi không lưu được feedburner 512K limit trong blogspot

FeedBurner sẽ không xử lý nguồn cấp dữ liệu ban đầu từ blog của bạn nếu nó có kích thước lớn hơn 512K. (Giới hạn này chỉ áp dụng cho kích thước thực tế của các tập tin nguồn cấp dữ liệu riêng của bạn và không bao gồm bất kỳ hình ảnh hoặc các phương tiện truyền thông tập tin mà bạn có thể kết nối tới hoặc nhúng vào trong bài viết của bạn). Để có được một nguồn cấp dữ liệu kích thước nhỏ hơn 512K trên Blogger, bạn cần thêm một tham số vào phía sau địa chỉ URL của nguồn cấp dữ liệu ban đầu của bạn - trong đó FeedBurner kiểm tra các bản cập nhật để giữ cho FeedBurner của bạn hiện tại - mà nói với Blogger để rút ngắn nó để một số cụ thể của bài viết. Để thêm tham số này:

Đọc thêm»

Đăng ký và cài đặt Feedburner Atom cho Blogspot

Nguồn cấp dữ liệu FeedBurner là một tiện ích miễn phí của google có rất nhiều tác dụng đặc biệt là trong quá trình thiết kế của một trang Web, hiện nây rất nhiều tiện ích yêu cầu phải có feed mới có thể chạy được. Lần trước namkna đã giới thiệu các bạn cách đăng ký feddbunner dạng rss, hôm nay namkna sẽ hướng dẫn các bạn đăng ký Feedburner dạng atom cho blogspot của các bạn.

Đọc thêm»

Tạo hộp đăng ký (Subscription) trên sidebar cho blogger

Hôm nay namkna sẽ giới thiệu cho các bạn một số mẫu tạo hộp đăng ký cho blogger. Tiện ích sẽ hiển thị tổng số người đăng ký, chứa liên kết RSS, Facebook và Twitter. Nó cũng chứa một mẫu đăng ký xinh đẹp, nơi độc giả có thể gửi email để nhận được cập nhật miễn phí từ trang web của bạn. Widget này được thực hiện tương thích để làm việc với tất cả các trình duyệt đặc biệt là với IE8.

Đọc thêm»

Hộp đăng ký nhận tin (Subscribe ) dạng Popup cho blogger

Khung đăng ký nhận tin (Subscribe by email) được sử dụng hầu hết trong các blogger/website để giúp cho độc giả yêu thích có thể đăng ký nhận tin từ blog của bạn. Trong bài viết này namkna giới thiệu cho các bạn thủ thuật được viết bời mybloggertricks giúp bạn tích hợp các tính năng popup và đăng ký của FeedBurner để cài đặt nó trên blog của bạn.

Đọc thêm»

Tạo nút RSS màu cam bằng CSS thuần túy

Khi tạo liên kết RSS trên website hoặc webblog, bạn có thể sử dụng nút RSS màu cam tương thích với màu biểu tượng RSS mà không cần sử dụng hình ảnh. Thao tác này có thể được thực hiện bằng thủ thuật CSS đơn giản kết hợp với HTML.

Đọc thêm»

Hộp Subscribe kết hợp twitter, google pluss, feed cho blogger

Hôm nay namkna sẽ giới thiệu cho các bạn cách tạo hộp đăng ký chứa liên kết RSS và Twitter, Goole +, Google pluss cho blogger. Nó cũng chứa một mẫu đăng ký đẹp mắt, nơi độc giả có thể gửi email để nhận được cập nhật miễn phí từ trang web của bạn. Widget này được thực hiện tương thích để làm việc với tất cả các trình duyệt đặc biệt là với IE8.

Đọc thêm»

Đổi màu widget "Follow by Email" của blogger

Hôm nay namkna sẽ hướng dẫn các bạn cách thay đổi màu nền của nút Submit, hộp nhập văn bản, cỡ chữ và màu sắc của nút Submit trong tiện ích THeo dõi bằng email (Follow by Email). Namkna từng giới thiệu các hộp đăng ký email giúp người đọc của bạn đăng ký để cập nhật blog hàng ngày của bạn (theo dõi Tại đây). Tuy nhiên tại sao không cá nhân hóa widget theo dõi qua email của blogger để dùng nhỉ. Xuất phát từ ý tưởng đó namkna đã viết bài hướng dẫn này. Các bước cho tiện ích này là rất dễ dàng.

Đọc thêm»