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="http://1.bp.blogspot.com/-HiD7bFwl-fM/U3nB1ozGbKI/AAAAAAAACb0/5_nqyCGPN8Q/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="http://2.bp.blogspot.com/-NPqgpxxxV1s/U3nB1GvOtwI/AAAAAAAACbw/CmH7ymTRpR4/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.

2 bình luận

  1. avatar says

    14:19 Ngày 17 tháng 06 năm 2014

    nó không hoạt động trên blog mình mặc dù đã thử thêm vào dưới 1 trong 2 đoạn code trên :)

  2. avatar says

    14:50 Ngày 17 tháng 06 năm 2014

    Bác muốn đặt chỗ nào trên blog, để mình dễ xem

    V.d. như em xem qua trang của bác, nếu bác muốn chèn xuống dưới ngay bài viết thì bác tìm đến
    <div id='post_body'>
    ...
    Chèn vào đây
    </div>
    chèn vào trước thẻ đóng của post_body.

    Mỗi template mỗi khác nên chỉ hướng dẫn được cái chung nhất ở mọi template thôi :D

Mọi nhận xét trên blog KslZone.NET sẽ được kiểm duyệt trước khi được xuất bản trên blog. Lưu ý: Nếu bạn để lại backlink về website của bạn, miễn là kèm theo nhận xét hợp lý thì nhận xét đó vẫn sẽ được chấp nhận. Nếu bạn muốn hiện mã HTML thì bạn cần chuyển đổi trước bằng công cụ phía dưới.