Thanh theo dõi qua mạng xã hội flat ui cực đẹp

Lâu rồi do bận quá không đăng bài được, hôm nay tìm được một thanh theo dõi mạng xã hội khá đẹp từ tác giả của All Blogger Tricks và đem về đây chia sẻ với các bạn. Trên thanh công cụ này gồm có 2 mạng xã hội phổ biến là Facebook, Twitter, kèm theo khung đăng ký theo dõi từ Feedburner. Với phong cách Flat UI Design thì bạn chắc cũng biết rồi, giao diện rất đơn giản chỉ gồm màu sắc rất tinh tế và đẹp. Tại bài viết này mình sẽ chia sẻ với bạn chèn thanh mạng xã hội này xuống cuối mỗi bài đăng trên blog của bạn.

Thanh theo dõi qua mạng xã hội flat ui cực đẹp

Chuyện của muôn thuở với Blogger, tìm đến Mẫu → Chỉnh sửa HTML. Tại đây bạn tìm đến thẻ

<div class='post-footer'>

và chèn đoạn mã này xuống dưới (thông thường sẽ có 2 thẻ như vậy)

<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/KslZone" target="_blank">
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbJZJ6hBBoysYrNsWrgh7EKom5Z3DXmFbC8FLvP9A7LSFayLlb2TE47AgnC7tensgswmJftcxrvpy8lB6UNSN7CeZhmKPs45-9qRJAvqoGibu7omUUZBkGyrGcVkZu9vQyCic5a_SasFlS/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%2FKslZone&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/KslZone" target="_blank">
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGjM_-H9quTxSUXlejLKUFJOJ4t2o_S_UjtYacoaGWrxIBtmQqPJWOvDlJXX49L0R9TVjqbE87eGSrqL9bv4rQbVDv9zmc-oCZg1msujSWpKqA_WdRFJ7CbytQywa7QSwaGQT8vxxcs_1N/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=KslZone&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>
       Đăng ký nhận email khi có bài viết mới.
      </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=KslZone', '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="Nhập email của bạn vào đây.." />
          <input name="uri" type="hidden" value="KslZone" />
          <input name="loc" type="hidden" value="en_US" />
          <input class="subscribe" name="commit" type="submit" value="Đăng ký" />
        </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>

thay toàn bộ KslZone cho đúng với địa chỉ Facebook, Twitter, và Feedburner của bạn rồi lưu lại.

Lời kết

Chỉ đơn giản như vậy, bạn đã thêm vào thành công cho mình một thanh theo dõi qua mạng xã hội cực đẹp và tinh tế. Mọi thắc mắc hoặc góp ý bạn có thể để lại nhận xét phía dưới mình sẽ tiếp nhận và hỗ trợ ngay khi nhận được.