Cách chèn tích xanh hình chiếc khiên hiển thị bên phải ảnh tác giả

Với cách làm này không có tác dụng gì ngoài tác dụng làm nổi bật ảnh của tác giả gây sự chú ý cho người đọc nhấp chuột vào ảnh đến trang hồ sơ Google Plus của bạn. Thủ thuật này cũng rất đơn giản dễ thực hiện, dưới đây là đoạn HTML của ảnh và CSS hiển thị

- HTML

Copy

<div class="user">

  <a href="https://plus.google.com/100425914480365587416/" title="Việt Blogger" target="_blank" rel="nofollow">

    <img alt="Việt Blogger" src="https://lh3.googleusercontent.com/-iRVl7_i8as4/AAAAAAAAAAI/AAAAAAAAAAA/AGDgw-gcU5klLwHU-W-hN9mjIJH2f7nZVA/s32-c-mo/photo.jpg">

    <span class="verified-user-icon">

      <svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">

        <path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-2 16l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z"></path>

      </svg>

    </span>

  </a>

</div>

- CSS

Copy

.user {

    display: inline-block;

    height: 32px;

    width: 32px;

    position: relative;

}

.user a {

    display: block;

    color: unset;

}

.user img {

    width: 100%;

    height: 100%;

    -webkit-border-radius: 50%;

    border-radius: 50%;

    border: 1px solid rgba(0,0,0,0.12);

}

.user .verified-user-icon {

    bottom: 9px;

    position: absolute;

    right: 0;

    display: inline-block;

    height: 14px;

    width: 14px;

}

.user .verified-user-icon svg {

    display: block;

    height: 100%;

    width: 100%;

}

.user .verified-user-icon svg path {

    fill: #4285F4;

    paint-order: stroke;

    stroke-width: 3px;

    stroke: #ffffff;

}

Hiển thị

Nếu áp dụng cho ảnh lớn hơn 32px cần chỉnh lại style cho các class dưới đây ví dụ với ảnh kích thước 96px:

Copy

.user {

    display: inline-block;

    height: 96px;

    width: 96px;

    position: relative;

}

.user img {

    border: 3px solid rgba(0,0,0,0.12);

}

.user .verified-user-icon {

    bottom: 38px;

    position: absolute;

    right: -10px;

    display: inline-block;

    height: 24px;

    width: 24px;

}

Hiển thị

Đoạn thẻ dữ liệu hiển thị ảnh tác giả Blog có dạng sau cho bạn nào muốn chèn vào ảnh tác giả bài viết khi Blog có sử dụng ảnh:

- widget Blog1 version="1"

Copy

<div class='post-author user'>

  <a expr:href='data:post.authorProfileUrl' expr:title='data:post.author' target='_blank'>

    <img expr:alt='data:post.author' expr:src='data:post.authorPhoto.url'/>

    <span class="verified-user-icon">

      <svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">

        <path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-2 16l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z"></path>

      </svg>

    </span>

  </a>

</div>

- widget Blog1 version="2"

Copy

<div class='post-author user'>

  <a expr:href='data:post.author.profileUrl' expr:title='data:post.author.name' target='_blank'>

    <img expr:alt='data:post.author.name' expr:src='data:post.author.authorPhoto.image'/>

    <span class="verified-user-icon">

      <svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">

        <path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-2 16l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z"></path>

      </svg>

    </span>

  </a>

</div>

Lưu ý: liên kết ảnh hiển thị mặc định của tác giả từ thẻ data có kích thước 120px. Thủ thuật chỉ đơn giản có vậy thôi

Nội dung chính