Chuyên mục

Blogger
  • Blogger Template 5
    • Seo Blogspot 29
      • Thiết kế Blogspot 23
        • Thủ thuật Blogspot 64
          • Tiện ích Blogspot 27
            Máy tính
            • Phần mềm 43
              • Sửa lỗi Windows 18
                • Thủ thuật Windows 78
                  • Cài đặt Windows 41

                    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