Hiển thị trích đoạn cho bài đăng phổ biến dạng tooltip

Trước đây đã có bài giới thiệu một cách để hiển thị trích đoạn cho bài đăng phổ biến dạng tooltip của Fan Dũng nhưng mình thấy hơi phức tạp một chút. Và mình thấy rằng áp dụng phương pháp Hiển thị đoạn trích dẫn dạng title cho bài đăng phổ biến của Duy Phạm kết hợp với  thủ thuật này nhanh hơn và không phải động chạm gì đến file js cả

Demo

Thực hiện

Bước 1: Vào blogger → Mẫu → Chỉnh sửa HTML
Bước 2: Mở rộng mẫu tiện ích
Bước 3: Chèn code bên dưới trước thẻ ]]></b:skin>

.tooltip{position:relative;display:block}
.tooltip span{visibility:hidden;position:absolute;bottom:30px;left:50%;z-index:999;width:230px;margin-left:-127px;padding:10px;border:2px solid #0F83A0;opacity:.9;background-color:#A6CED8;background-image:-webkit-linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,0));background-image:-moz-linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,0));background-image:-ms-linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,0));background-image:-o-linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,0));background-image:linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,0));-moz-border-radius:4px;border-radius:4px;-moz-box-shadow:0 1px 2px rgba(0,0,0,.4),0 1px 0 rgba(255,255,255,.5) inset;-webkit-box-shadow:0 1px 2px rgba(0,0,0,.4),0 1px 0 rgba(255,255,255,.5) inset;box-shadow:0 1px 2px rgba(0,0,0,.4),0 1px 0 rgba(255,255,255,.5) inset;text-shadow:0 1px 0 rgba(255,255,255,.4)}
.tooltip:hover{border:0;}
.tooltip:hover span{visibility:visible}
.tooltip span:before,.tooltip span:after{content:"";position:absolute;z-index:1000;bottom:-7px;left:50%;margin-left:-8px;border-top:8px solid #A6CED8;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:0}
.tooltip span:before{border-top-color:#0F83A0;bottom:-10px}

Bước 4: Tìm đoạn code sau trong template (nhấn Ctrl + F và tìm đoạn code bôi màu xanh sẽ ra)

<!-- (4) Show snippets and thumbnails -->
<div class='item-content'>
    <b:if cond='data:post.thumbnail'>
        <div class='item-thumbnail'>
            <a expr:href='data:post.href' target='_blank'><img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/></a>
        </div>
    </b:if>
    <div class='item-title'>
        <a expr:href='data:post.href'><data:post.title/></a>
    </div>
    <div class='item-snippet'>
        <data:post.snippet/>
    </div>
</div>

Và thay thế toàn bộ bằng code bên dưới

      <!-- (4) Show snippets and thumbnails -->
<div class='item-content'>
    <div class='item-title'>
        <b:if cond='data:post.thumbnail'>
            <img border='0' class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail' height='38px' width='38px'/>
        </b:if>
<a class='tooltip' expr:href='data:post.href'><data:post.title/><span><data:post.snippet/></span></a>   </div>
</div>

Lưu lại template và xem kết quả! Nếu có vấn đề gì thắc mắc hãy để lại comment nhé! Chúc bạn thành công!