Hướng dẫn tạo widget theo dõi cực đẹp cho blogspot
/ lúc / 33 bình luận
Truy cập Tại đây để xem CV của tôi!
Đến hẹn lại lên hôm nay mình xin chia sẻ ae một widget nho nhỏ giúp làm đẹp blog của bạn.
Cách Thực Hiện
Rất đơn giản ta chỉ cần chèn code bên dưới vào Widget HTML/Javascript, chỉnh sửa sao cho phù hợp rồi lưu lại
<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)}
.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:55%;position:absolute;top:20%;bottom:35%;left:22.5%;z-index:3}
.aboutfloat-imgs{width:55%;position:absolute;top:40%;bottom:35%;left:22.5%;z-index:3}
.lightsosmed-float{text-align:center;display:table;width:100%;height:35px}
.lightsosmed-float a{  font-weight: 600;
    background: #ffffff;
    color: #424242;
    padding: 4px 8px;
    z-index: 2;
    display: table-cell;
    width: 100%;
    font-size: 90%;
    text-transform: uppercase;
    vertical-align: middle;
    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: #ffffff;
    color: #424242;
    padding: 4px 8px;
    z-index: 2;
    display: table-cell;
    width: 100%;
    font-size: 90%;
    text-transform: uppercase;
    vertical-align: middle;
    border-radius: 3px;
    box-shadow: 3px 3px 3px rgba(0,0,0,0.05);
    transition: all .3s;
}
.lightsosmed-fed:hover a{background:#ffffff;color:#395796;border-color:transparent;}
.lightsosmed-float:hover a{background:#ffffff;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-icon.twitt a{background:#19bfe5}
.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,.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-info h4:before {margin-left:-50%;text-align:right;}



.aboutfloat-imgsd{width:55%;position:absolute;top:60%;bottom:35%;left:22.5%;z-index:3}
.lightsosmed-imgsd {
    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: #ffffff;
    color: #424242;
    padding: 4px 8px;
    z-index: 2;
    display: table-cell;
    width: 100%;
    font-size: 90%;
    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:#ffffff;color:#52537d;border-color:transparent;}
</style>
<div class="sidebar_about_author">
<div class="inner_wrapper">
<div class="lightsosmed-img">
<img alt="tu-hoc-seo-online" class="img-responsive" height="180" src="https://i.imgur.com/93PJaxx.png" title="Tự học seo online" width="400" />
<div class="aboutfloat-img"><span class="lightsosmed-float"><a href="https://www.blogger.com/follow.g?view=FOLLOW&blogID=7734893201852337172" 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://www.facebook.com/HongHai.H.T.H" rel="nofollow" target="_blank" title="Theo dõi Facebook"><i class="fab fa-facebook-f"></i> Theo dõi Facebook</a></span></div>
<div class="aboutfloat-imgsd"><span class="lightsosmed-feds"><a href="https://www.facebook.com/HongHai.H.T.H" rel="nofollow" title="Get Design"><i class="fas fa-laptop"></i> Get Design</a></span></div>
</div>
</div>
</div>
 Chúc các bạn thành công!!

HIỆN ĐANG CÓ 33 bình luận

avatar
Trần Thanh Bình

Lkq nhưng thumb đẹp lắm e

TRẢ LỜI
avatar
Trần Thanh Bình

Ý nhầm klq

TRẢ LỜI
avatar
Nguyễn Chánh Đức

WOW, Thumbnail đẹp lắm đó Hải, Widget cũng chất nữa. 1 like <3

TRẢ LỜI
avatar
Hồng Hải

ok cảm ơn anh

TRẢ LỜI
avatar
Hồng Hải

hi cảm ơn

TRẢ LỜI
avatar
Nguyễn Bảo Linh

Thumbnail xấu và widget cũng vậy :/ :v

TRẢ LỜI
avatar
Star Cường IT ­

Bài hay, thumbnail thì khỏi nói :3 quá đầu tư.

TRẢ LỜI
avatar
Lê Bá Long IT

Bao ngầu

TRẢ LỜI

đầu tư :v qá

TRẢ LỜI
avatar
Quốc Đẹp Trai

Thumnbail quá chất >< khỏi phải chê điểm nào

TRẢ LỜI
avatar
Lê Bá Long IT

toàn thấy khen thumbnail ko thấy khen bài viết :v

TRẢ LỜI
avatar
⊱⊰ Star Phong Blog ⊱⊰

Quá chất <3 1 like 1 se liền :v

TRẢ LỜI
avatar
Thanh Phú IT

ngầu vãi :v

TRẢ LỜI
avatar
Hồng Hải

oce ghi nhận :vv

TRẢ LỜI
avatar
Hồng Hải

ok thank

TRẢ LỜI
avatar
Hồng Hải

hihi cảm ơn

TRẢ LỜI
avatar
Hồng Hải

vâng cảm ơn a

TRẢ LỜI
avatar
Hồng Hải

ok cảm ơn hì

TRẢ LỜI
avatar
Hồng Hải

ok cảm ơn bác quốc

TRẢ LỜI
avatar
Nguyễn Bảo Linh

toàn khen thumbnail :/ sao lại không khen cái widget nhỉ ?

TRẢ LỜI

1 ngày vui vẻ nhé

TRẢ LỜI

fb sập mẹ rồi à m -.- "Không thể tìm thấy địa chỉ IP của máy chủ www.facebook.com"

TRẢ LỜI
avatar
Lê Bá Long IT

bảo trì chút á mà

TRẢ LỜI
avatar
Thanh Phú IT

một ngày vui vẻ nha a

TRẢ LỜI

what :v your name ?

TRẢ LỜI

cũng đẹp đó ad

TRẢ LỜI
avatar
Nguyễn Bảo Linh

nghe nói Nam hacker cải tà quy chánh ? có thật không ạ ?

TRẢ LỜI

1 ngày vui vẻ nhé

TRẢ LỜI

1 ngày vui vẻ nhé

TRẢ LỜI

một ngày vui vẻ nha e

TRẢ LỜI

you name

TRẢ LỜI

khá đẹp nhưng cái icon trước chữ Design là máy tính thì sang mình lại thành hình vuông vô giá ạ :v

TRẢ LỜI

THAM GIA TRANH TOP BÌNH LUẬN NGAY!

Một số lưu ý khi bình luận

Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước.

Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời.