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

Có rất nhiều cách để thể hiện bài đăng phổ biến trên blog được thể hiện theo dạng tooltip, tuy nhiên những cách đó thường hay sử dụng file js để chạy, với cách này của mình thì các bạn không cần phải có file js, các bạn chỉ việc làm theo hướng dẫn bên dưới để có thể tạo hiệu ứng cho bài viết mình thêm sinh động.

Các bước thực hiện:

Bước 1: Login vào Blogger - Mẫu - Chỉnh sửa HTML
Bước 2: Tìm đến thẻ  ]]></b:skin> sau đó chèn đoạn code bên dưới vào trước đoạn thẻ này 

.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 3: Tìm đoạn code được tô màu cam dưới đây:

<!-- (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>

Sau khi tìm được thì thay thế toàn bộ đoạn code đó thành đoạn 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>

Bước 4: Lưu lại template và tận hưởng thành quả các bạn nhé.