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

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

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

Hồng Hải đã đăng Thứ Năm, 31 tháng 5, 2018
Hiện có lượt xem và 0 bình luận

Chi tiết

Liên quan

Nhận xét

Tác giả

Ủng hộ tôi

  • Xem toàn trang
  • 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 !! 
    Lưu ý:
    Sử dụng tiếng Việt có dấu khi bình luận, hạn chế viết tắt.
    Bình luận đúng chủ đề bài viết, không SPAM trong bình luận.
    Gửi kèm ảnh chụp màn hình để được hỗ trợ tốt nhất. Up ảnh lên trang imgur.com, sau đó sao chép link ảnh dán vào khung bình luận.
    Để chèn hình ảnh, khi đăng nhận xét bạn nhập như sau: [img]https://i.imgur.com/iIEPcxC.png[/img]

    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
    7. có khả thi k hải

      Trả lờiXóa

    Author Image

    Hồng Hải

    Nếu thấy các bài viết trên blog hữu ích đối với bạn thì hãy mời tôi một ly cà phê tại đây nhé. Xin cảm ơn!