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é.
