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 !!

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

17 Nhận xét