Demo Widget Giới Thiệu
Các bước thực hiệ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ị
<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://www.upsieutoc.com/images/2018/12/01/anh-widget-gioi-thieu6b02092ac68a0dcb.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à NamIT<br />Chào Mừng bạn đến<br />NamIT 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;">NamIT Blog là một website chuyên chia sẻ Thủ Thuật Máy Tính, Thủ Thuật Blogger, Network,Hardware,... 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="https://namittn.blogspot.com/p/form-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>
Bước 3: Save và làm cốc trà thưởng thức tác phẩm nhé
Nếu các bạn thấy bài này hay và giúp ích được cho các bạn thì các bạn vui lòng cho mình 1 Share & 1 Like nhé. Mọi thắc mắc về code vui lòng để lại Comment hoặc Liên hệ trực tiếp với mình nhé. Chúc các bạn thành công!
Trả lờiXóa