[Tips] - Theo dõi qua email kết hợp mạng xã hội ở bài viết Blogger
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:


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/AVvXsEgPKVm5OIhW1TjvRYExHnJ-NAceyHw9ev3XdC6CbAe4K31EES79dPqhTSyAgC_yBgcTgOzVH4qewM8f_OXPwYYFWgaF8XdVTJSBYL0U6LfV_1p-_xc1zBjv_RteXIOi7O3_pPASJ1LvjeBC/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/AVvXsEhXVEbY9DY65vQkWirivdBfPHmr0Db4lGaYDzfnHzSKkZMDBmpOzGJ81D6_WAlW84JpOrrf5__w4UqclUAWrn6quPVTM3XbTcb6Eeyz9HjHQcsJ76ZokdqTIsfqwl-qtjTiM4ynNDMJpSVB/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