[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/AVvXsEgAZEmN8suqoGXIo_ynxuFMm4e8cwytbVkExDuiHAxVGAXMQ8MTvFdzD4Aiq3BdwPQ0SqaCHiERiQj_K_S2WwRTcxDrN8QUjwDoxe-aMOyJd8epL_ZvPNfNz5uGePNFLaJuI2ZhgeuZNX-4/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/AVvXsEgyoEDoBcPkkKXFjVI6hE1dTltfVB_nmx2lCNBB4HCRnoi9IQvcvOma_goRFpKplseTKUa3ZvAA39ajxv7vjl9-zYWxmNPtJwNDjAhKbJeDx63Qh_mjsM2npSrYrQMsDc4f5Ny9YaHnpA9I/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