Bước 1: Đầu tiên ta chèn thẻ thư viện này vào sau thẻ <head> nếu có rồi thì không cần chèn.
<link async='async'href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Condensed:300,400,700|Roboto+Slab:400,500,700'rel='stylesheet'/>
Bước 2: Ta chỉ chỉ cần chèn đoạn code này vào nơi bạn muốn hiển thị là được
<style>
.snip1566 {
position: relative;
display: inline-block;
margin: 0px 0px5px 86px;
max-width: 190px;
width: 100%;
color: #bbb;
font-size: 16px;
box-shadow: none ;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.snip1566 *,
.snip1566:before,
.snip1566:after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.3s linear;
transition: all 0.3slinear;
}
.snip1566:before,
.snip1566:after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-radius: 50%;
content: '';
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
z-index: -1;
border: 2px solid #bbb;
border-color: transparent #bbb;
}
.snip1566 img {
max-width: 100%;
backface-visibility: hidden;
vertical-align: top;
border-radius: 50%;
padding: 10px;
}
.snip1566 figcaption {
position: absolute;
top: 5px;
bottom: 5px;
left: 5px;
right: 5px;
opacity: 0;
background-color: rgba(0, 0, 0, 0.8);
border-radius: 50%;
}
.snip1566 i {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
font-size: 4em;
z-index: 1;
}
.snip1566 a {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
}
.snip1566:hoverfigcaption,
.snip1566.hoverfigcaption {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
.snip1566:hover:before,
.snip1566.hover:before,
.snip1566:hover:after,
.snip1566.hover:after{
border-width: 10px;
}
.snip1566:hover:before,
.snip1566.hover:before{
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.snip1566:hover:after,
.snip1566.hover:after{
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
</style>
<failclass="snip1566">
<img alt="sq-sample14"src="https://i.imgur.com/qJgQSxV.png"/>
<figcaption>
<p style="
text-align: center;
left: 14%;
position: absolute;
top: 30%;
font: 700 17px Roboto Condensed;
color: #e4e4e4;
">Xin chào bạn<br/>Mình là Hồng Hải<br/>Chào Mừng bạn đến<br/>Hồng Hải Blog</p>
</figcaption>
<a href="#"></a>
</fail>
<div class="widget-hhb" style="border-radius: 15px;padding: 7px 7px 7px 7px; text-align: center;color: #5d5d5d;">
<p style="font: 700 16px Roboto Condensed; margin-bottom: 0.4em!important;">Hồng Hải Blog là một website chuyên chia sẻ Thủ Thuật Máy Tính, Thủ Thuật Blogger, Thủ Thuật Facebook,... và nhiều kiến thức bổ ích khác.</p>
<p style="
font: 500 15px Roboto;
">Hiện tại có <bstyle="color: #bda04b;"><spanid="Stats1_totalPosts">218</span></b> bài viết và <bstyle="color: #bda04b;"><spanid="Stats1_totalComments">266</span></b>bình luận.
<br/>Liên hệ, góp ý hoặc hợp tác, quảng cáo <a style="
font-weight: 700;
" href="/p/lien-he.html">tại đây</a>.</p>
<scripttype="text/javascript">
//<![CDATA[
functiontotalPosts(json){document.getElementById('Stats1_totalPosts').innerHTML=json.feed.openSearch$totalResults.$t};functiontotalComments(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><scripttype="text/javascript"src="/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalPosts"></script><scripttype="text/javascript"src="/feeds/comments/default?alt=json-in-script&max-results=0&callback=totalComments"></script>
</div>
•Chúc các bạn thành công !!!
No comments