Chào mừng các bạn đã quay trở lại với NamIT Blog. Hôm nay mình sẽ giới thiệu cho các bạn cách tạo một Widget theo dõi tuyệt đẹp.

Demo Widget Theo Dõi

Demo
Click here

Hướng dẫn thực hiện:
Cách làm cực kỳ nhanh, hiệu quả và chạy cực kỳ mượt. Các bạn chỉ cần tạo mới một Widget HTML/JAVASCRIPT rồi các bạn dán CODE dưới đây vào sau đó chỉnh sửa phù hợp với Blogspot của bạn. Cuối cùng Save lại và trải nghiệm thôi nào.

<div class="widget-title"><span class="ti-border"></span></div>
<script type="text/javascript">
//<![CDATA[

function totalPosts(json){document.getElementById('Stats1_totalPosts').innerHTML=json.feed.openSearch$totalResults.$t};function totalComments(json){document.getElementById('Stats1_totalComments').innerHTML=json.feed.openSearch$totalResults.$t};document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalPosts\"><\/script><script type=\"text/javascript\" src=\"/feeds/comments/default?alt=json-in-script&max-results=0&callback=totalComments\"><\/script>');
//]]>
</script><script type="text/javascript" src="/feeds/posts/default?alt=json-in-script&amp;max-results=0&amp;callback=totalPosts"></script><script type="text/javascript" src="/feeds/comments/default?alt=json-in-script&amp;max-results=0&amp;callback=totalComments"></script>
<style>
.lightsosmed-img{position:relative;max-height:202px;overflow:hidden}
.lightsosmed-img img {max-width:100%;width:500px;transition:all .6s;}
.lightsosmed-img:hover img{transform:scale(1.2) rotate(-10deg)}

font-size: 80%;
.lightsosmed-img:before{content:'';background:rgba(0,0,0,0.3);position:absolute;top:0;left:0;right:0;bottom:0;z-index:2;transition:all .3s}
.lightsosmed-img:hover:before{background:rgba(0,0,0,0.6);}
.aboutfloat-img{width:70%;position:absolute;top:20%;bottom:35%;left:15%;z-index:3}
.aboutfloat-imgs{width:70%;position:absolute;top:40%;bottom:35%;left:15%;z-index:3}
.lightsosmed-float{text-align:center;display:table;width:100%;height:35px}
.lightsosmed-float a{  font-weight: 600;
    background: #ead96b;
    color: #ffffff;
    padding: 4px 8px;
    z-index: 2;
    display: table-cell;
    width: 100%;
    text-transform: uppercase;
    vertical-align: middle;

.lightsosmed-fed:hover a{background:#ead96b;color:#395796;border-color:transparent;}
border-radius: 3px;
    box-shadow: 3px 3px 3px rgba(0,0,0,0.05);
    transition: all .3s;}


.lightsosmed-imgs {
    position: relative;
    max-height: 202px;
    overflow: hidden;
}
.lightsosmed-fed {
    text-align: center;
    display: table;
    width: 100%;
    height: 35px;
}
.lightsosmed-fed a {
    font-weight: 600;
    background: #ead96b;
    color: #ffffff;
    padding: 4px 8px;
    z-index: 2;
    display: table-cell;
    width: 100%;
    font-size: 80%;
    text-transform: uppercase;
    vertical-align: middle;
    border-radius: 3px;
    box-shadow: 3px 3px 3px rgba(0,0,0,0.05);
    transition: all .3s;
}

.lightsosmed-icon.twitt a{background:#19bfe5}
.lightsosmed-float:hover a{background:#ead96b;color:#ff5722;border-color:transparent;}
.lightsosmed-float a i{font-weight:normal;margin:0 5px 0 0}
.lightsosmed-wrpicon{display:block;margin:15px auto;position:relative;}
.lightsosmed-wrpicon .extender{width:100%;display:block;}
.extender{text-align:center;font-size:16px}
.extender .lightsosmed-icon{display:inline-block;border:0;margin:0;padding:0;width:32%;}
.extender .lightsosmed-icon a{background:#ccc;display:inline-block;font-weight:400;color:#fff;line-height:32px;border-radius:3px;font-size:12px;width:100%;}
.extender .lightsosmed-icon i{font-family:fontawesome;margin:0 3px 0 0}
.lightsosmed-icon.fbl a{background:#3b5998}

.lightsosmed-info h4:before,.lightsosmed-info h4:after {position:absolute;top:51%;overflow:hidden;width:50%;height:1px;content:'\a0';background-color:rgba(0,0,0,0.08);}
.lightsosmed-icon.crcl a{background:#d64136}
.lightsosmed-icon.fbl a:hover,.lightsosmed-icon.twitt a:hover,.lightsosmed-icon.crcl a:hover{background:#404040}
.extender .lightsosmed-icon:hover a,.extender .lightsosmed-icon a:hover{color:#fff;}
.lightsosmed-info{margin:10px 0 0 0;font-size:13px;text-align:center;}
.lightsosmed-info p{margin:5px 0}
.lightsosmed-info h4{margin-bottom:10px;font-size:16px;text-transform:uppercase;color:#444;font-weight:700}
.lightsosmed-info h4 span {position:relative;display:inline-block;padding:0 10px;margin:0 auto;}
.lightsosmed-info h4:before {margin-left:-50%;text-align:right;}

.aboutfloat-imgsd{width:70%;position:absolute;top:60%;bottom:35%;left:15%;z-index:3}
.lightsosmed-imgsd {

<div class="lightsosmed-img">
position: relative;
    max-height: 202px;
    overflow: hidden;
}
.lightsosmed-feds {
    text-align: center;
    display: table;
    width: 100%;
    height: 35px;
}
.lightsosmed-feds a {
    font-weight: 600;
    background: #ead96b;
    color: #ffffff;
    padding: 4px 8px;
    z-index: 2;
    display: table-cell;
    width: 100%;
    font-size: 80%;
    text-transform: uppercase;
    vertical-align: middle;
    border-radius: 3px;
    box-shadow: 3px 3px 3px rgba(0,0,0,0.05);
    transition: all .3s;
}
.lightsosmed-feds:hover a{background:#ead96b;color:#52537d;border-color:transparent;}
</style>
<div class="sidebar_about_author">
<div class="inner_wrapper">

<div class="aboutfloat-imgsd"><span class="lightsosmed-feds"><a href="https://namittn.blogspot.com/" rel="nofollow" title="Get Design"><i class="fa fa-laptop"></i> Get Design</a></span></div>
<img alt="thu-thuat-blogs" class="img-responsive" height="180" src="https://uphinhnhanh.com/images/2018/11/30/www.NamIT.com-3.jpg" title="NamIT Blog" width="400" />
<div class="aboutfloat-img"><span class="lightsosmed-float"><a href="https://namittn.blogspot.com/" rel="nofollow" target="_blank" title="Theo dõi Blogger"><i class="fa fa-rss"></i> Theo dõi Blogger</a></span></div>
<div class="aboutfloat-imgs"><span class="lightsosmed-fed"><a href="https://namittn.blogspot.com/" rel="nofollow" target="_blank" title="Theo dõi Facebook"><i class="fa fa-facebook"></i> Theo dõi Facebook</a></span></div>
</div>
</div>

</div>