Share widget giới thiệu cực đẹp mà mình đang sử dụng

Hôm nay mình xin share một widget giới thiệu cực đẹp mình đang dùng muốn với các bạn.

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 0px 5px 86px;
max-width: 190px;
width: 100%;
color: #bbb;
font-size: 16px;
box-shadow: none !important;
-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.3s linear;
}
.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:hover figcaption,
.snip1566.hover figcaption {
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>
<fail class="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ó <b style="color: #bda04b;"><span id="Stats1_totalPosts">218</span></b> bài viết và <b style="color: #bda04b;"><span id="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>
<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>
</div>

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