RSS Feed Subscription đẹp - Nhận tin theo dõi cho blogger - V2

Demo : hoặc xem tại website : vusteven.info

+Chào các bạn, hôm nay Vũ Steven chia sẻ các tiện ích cao cấp cho blogger và thủ thuật.Trong bài viết này mình sẽ chia sẻ một tiện ích đăng ký xã hội cho các blogger.Phép người dùng thích ( đăng ký ) theo bạn trên các mạng xã hội như Facebook, Twitter, Google+ và đăng ký nguồn cấp dữ liệu của bạn bằng cách sử dụng RSS Feedburner tích hợp.Các mạng xã hội đang đóng vai trò quan trọng trong việc viết blog hiện này.Cũng cho phép kết nối với các độc giả trực tuyến của bạn và chia sẻ nội dung của bạn .Mình sẽ hướng dẫn  để thêm tiện ích này vào blog của bạn.

+Widget này là hoàn toàn được mã hóa trong HTML / CSS và không có nội dung flash, vì vậy nó sẽ phụ tùng tải nhanh. Tiện ích này bao gồm 4 biểu tượng xã hội với các hiệu ứng CSS và Feedburner email mẫu đăng ký.

+ Đăng nhập  Blogger -> Bố cục (Layout) -> Thêm tiện ích  -> HTML/ Javascript
   Dán đoạn code sau đây vào tiện ích mới thêm

<style type="text/css">
    #vusteven-ssw-wrap
    {
        height:222px;
        width:250px;
        background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinEaC_ZVuv1Rik4msVb0CztzyG_KATktDb2lIXY7tBsXRC9fs99tbOY61rwLDShG2gE3fb_1CJaVuw2iPGzTJzecLzthe14TXRcR2lvVjsppGYTpWgBeDmDn3Jx4FjhzUOJv0hXtOxhnjU/s1600/background.png) repeat;
        color:#009;
        font-family:Georgia, "Times New Roman", Times, serif;
        padding:22px;
        border:1px solid #dcdcdc;
        box-shadow: 1px 1px 2px #000;
    }
    
    #vusteven-ssw-icons-wrap
    {
        text-align:center;
        height:50px;
        padding: 5px 0px; 
    }
    
    .vusteven-ssw-icons
    {
        height:40px; 
        width:40px;
        float:left;
        margin-left:15px;
        margin-bottom:10px;
    }
    
    .vusteven-ssw-icons:hover
    {
        opacity: .7;
        filter:alpha(opacity=70);
        height:40px;
        width:40px;
        cursor:pointer;    
    }
    
    .vusteven-ssw-lbl
    {
        color:#0F4794;
        font-weight:bold;
        text-align:center;
        padding: 2px 0px 10px 0px;        
    }
    
     .vusteven-email-field
     {
         -moz-border-radius:4px;
         -webkit-border-radius:4px;
         background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWSOATGIVTSH2dxLhnE5f0dlHTWDEJCTBgP_j5rQ2htr6g8B73vyX35ra2sgTDbQWhom8-vr8Bo4Qm0vc5KE_sCKhsPDWFCRiuwMZ3g1Gq6Q2W05akGG1a41AwgiSjVSaLvVg0obvBSYto/s1600/icons.png) no-repeat 0 -27px;
         border:1px solid #dcdcdc;
         border-radius:4px;
         color:#444;
         margin:0 0 15px;
         padding:10px 40px;
         width: 166px;
     }
    
     #vusteven-ssw-submit
     {
         height:30px;
        width:100px;;
        background:#0F4794;
        color:#FFF;
        font-weight:bold;
        text-align:center;
        margin-left: 70px;
        border-radius: 10px;
     }    
</style>
<div id="vusteven-ssw-wrap">
    <div class="vusteven-ssw-lbl">Đăng ký theo dõi!!</div>
    <div id="vusteven-ssw-icons-wrap">
        <a href="https://facebook.com/Vusteven.infoplus" rel="nofollow" title="Like Facebook">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKkXC5Ztmdz0wmeL-5cRMocSCOxxhHE0oRwDb-XZpTmQCV1eIaRU5Fdo_Wlvcz_LdHVrsrSeJmCMlraodi5ylcsR3Q2tgW1yAH2CDMk2A7eu8KDTgCtgFDJszZk14UIz2u8mwLV1PrSEaN/s1600/Facebook.png" class="vusteven-ssw-icons" alt="FB"/>
        </a>
      <a href="https://twitter.com/VSteven3" rel="nofollow" title="Follow Twitter">
        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwde0qzZohfLUm9t6CPq-X0QpO4ESrouwz2UFbpuTCR02bmJMJQr2btgPqrPbhgxL3tBpZ7djmF1Dju9sTJ5EA5f4mfpZDZlmANg7cpvVFfVd3FpsaIB3S10v01CE7iYo9ClIbaEwAY2zH/s1600/Twitter.png" class="vusteven-ssw-icons" alt="TW" />
        </a>
        <a href="https://plus.google.com/+VũSteveninfo" rel="nofollow" title="Follow Google +">
        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT1SgkoZRDMKIzM0b4oCiIxd07zHYUVvaNgQQTlHMo8LJjAYQnckZyt_GQ6RBScQ60RWQiim9Mhc4MxiGqkzUIf1sVVCSgqFGT4f99FjOw8NesUSxCB0wiHDwEACtc4lSN0iYlx5vl0T5M/s1600/Google+.png" class="vusteven-ssw-icons" alt="Google +"/>
        </a>
        <a href="http://feeds.feedburner.com/vusteven" rel="nofollow" title="RSS">
        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifhqqp7fIs0XLjksVae1R5ffA4dYzyVXNU8InP4MG3ZPm0MAZxJsQB3sNDwoEyLsm9fdmF_H3l6OWk87Q75CtInxINQrF4MqkHaXDt-tdiwShYZLOGHjjdSKMM-lBMsTn2wentPCLwTSw4/s1600/RSS.png" class="vusteven-ssw-icons" alt="RSS"/>
        </a>                              
    </div>
    <div class="vusteven-ssw-lbl">Đăng ký nhận <br /> bài mới miễn phí</div>
     <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=vusteven', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
        <input  type="text" class="vusteven-email-field" name="email" autocomplete="off" placeholder="Enter your email address"/><br />
        <input type="hidden" value="vusteven" name="uri"/>
        <input type="hidden" name="loc" value="en_US"/>
        <input type="submit" value="Đăng ký" id="vusteven-ssw-submit"/>   
    </form>
</div>

+ Bạn hãy thay ID của bạn vào phần màu đỏ nhé

+ Bạn có thể tùy chỉnh giao diện của tiện ích này. Các quy tắc  CSS được đưa ra với các mã trên kèm theo trong </ style> thẻ <style>.Mình  khuyên không cố gắng để sửa đổi nó.

Chúc bạn thành công