Hiển thị chú thích khi rê chuột vào chữ cho Blogger/Blogspot (ver 2)

Add CSS Tooltip In A Post For Blogger/Blogspot (ver 2)

Như đã trình bày ở bài viết trước: Hiển thị chú thích khi rê chuột vào chữ cho Blogger/Blogspot, hôm nay sẽ giới thiệu tiếp cho các bạn 1 phiên bản khác của hiệu ứng này. Phiên bản này từ chú thích sẽ trôi vào từ 2 phía thay vì chỉ 1 phía như ở bản trước, mời các bạn theo dõi nhé.

Hiển thị chú thích khi rê chuột vào chữ cho Blogger/Blogspot (ver 2)

Bước 1: Thêm CSS vào blog của bạn

Vào tab Mẫu >> Chỉnh sửa HTML tìm thẻ ]]></b:skin> và chèn trước nó đoạn code sau

 /* Tooltip In A Post edited by Iris-Tips.blogspot.com */
.fun-needed {
position: relative;
text-decoration:none ;
font-size: 22px;
font-weight: 400;
font-family: Verdana;
color: #e06666;
}
.fun1 {
width: 150px;
height: 25px;
top: 50px;
left: -400px;
padding: 3px 10px 3px 3px;
color: #0000CD ;
background-color: #fff ;
font-size: 20px;
font-family: verdana ;
border: none ;
overflow: hidden;
display: block;
text-align: right ;
position: absolute; /* important */
visibility: hidden;
opacity: 0;
transition: 0.3s ease-out;
-webkit-transition: 0.3s ease-out;
}
.fun-needed:hover .fun1 {
visibility: visible;
opacity: 1;
top: 50px;
left: -150px;
z-index: 50;
transition: 0.8s ease-out;
-webkit-transition: 0.8s ease-out;
}
.fun2 {
width: 250px;
height: 25px;
top: 50px;
left: 400px;
padding: 3px 3px 3px 3px;
color: #0000CD ;
background-color: #fff ;
font-size: 20px;
font-family: verdana ;
border: none ;
overflow: hidden;
display: block;
text-align: left ;
position: absolute; /* important */
visibility: hidden;
opacity: 0;
transition: 0.3s ease-out;
-webkit-transition: 0.3s ease-out;
}
.fun-needed:hover .fun2 {
visibility: visible;
opacity: 1;
top: 50px;
left: 5px;
z-index: 50;
transition: 0.8s ease-out;
-webkit-transition: 0.8s ease-out;
}
/* Tooltip In A Post edited by Iris-Tips.blogspot.com */ 

Bước 2: Thêm chú tích vào bài viết của bạn

Khi viết bài bạn cần làm theo cú pháp sau:

 <span class="fun-needed"><br />
<span class="fun1">Bên trái</span><br />
Từ cần chú thích<br />
<span class="fun2">Bên phải</span><br />
</span> 

• DEMO

Bên trái
Từ cần chú thích
Bên phải

Created by Iris Tips

• Twitter
• Facebook
• Google+
• LinkedIn
• Pinterest

Iris Tips

Có thể bạn quan tâm