Thứ Năm, 31 tháng 5, 2018

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&amp;max-results=0&amp;callback=totalPosts"></script><script type="text/javascript" src="/feeds/comments/default?alt=json-in-script&amp;max-results=0&amp;callback=totalComments"></script>
</div>
Chúc các bạn thành công !! 

Nhận Thiết Kế

fb.com/HongHai.H.T.H
instagram.com/honghai.des
01682253xxx
honghai251325@gmail.com

Facebook Comments

32 nhận xét :

  1. Chưa test nhưng đã biết đẹp rồi :v

    Trả lờiXóa
  2. Đẹp lắm ông ơi tks for share :v

    Trả lờiXóa
  3. đẹp! Hóng ông share temp <3

    Trả lờiXóa
  4. Khá là đẹp, button trên bài viết cũng đẹp

    Trả lờiXóa
  5. có thể share khung chứa code được ko Hải ?

    Trả lờiXóa
  6. Thiết kế ảnh minh họa đẹp ghê nha, từ trên xuống dưới cái nào cũng đẹp :3

    Trả lờiXóa