Đế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&max-results=0&callback=totalPosts"></script><script type="text/javascript" src="/feeds/comments/default?alt=json-in-script&max-results=0&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!!
Tags:
Thủ Thuật Blogspot
Lkq nhưng thumb đẹp lắm e
Ý nhầm klq
WOW, Thumbnail đẹp lắm đó Hải, Widget cũng chất nữa. 1 like <3
Thumbnail xấu và widget cũng vậy :/ :v
toàn khen thumbnail :/ sao lại không khen cái widget nhỉ ?
Bài hay, thumbnail thì khỏi nói :3 quá đầu tư.
Bao ngầu
đầu tư :v qá
toàn thấy khen thumbnail ko thấy khen bài viết :v
Thumnbail quá chất >< khỏi phải chê điểm nào
Quá chất <3 1 like 1 se liền :v
ngầu vãi :v
1 ngày vui vẻ nhé
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"
bảo trì chút á mà
một ngày vui vẻ nha a
what :v your name ?
cũng đẹp đó ad
nghe nói Nam hacker cải tà quy chánh ? có thật không ạ ?
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