Thêm Tooltip hướng dẫn cho link khi rê chuột đến


Tooltip hiện nay đã trở nên phổ biến và được sử dụng bởi tất cả các trang web lớn để mô tả một liên kết hoặc giúp đỡ nhiều hơn về thông tin trên một phần của bài viết.Khi bạn sử dụng các sản phẩm của Google, bạn sẽ thấy một dấu hỏi nhỏ mà bạn có thể di chuột qua để xem một cửa sổ pop up với một vài điều hướng dẫn. Bài viết này sẽ hướng dẫn bạn làm được điều đó ngay trên blog của mình. Hãy xem demo sau đó làm theo các bước hướng dẫn đơn giản bên dưới


Thêm css vào blog của bạn

  1. Vào Blogger > Mẫu > Tùy chỉnh
  2. Nâng cao > Add CSS sau đó dán code sau vào rồi Lưu lại


.tooltip
{
position: relative;
background: #eaeaea;
cursor: help;
display: inline-block;
text-decoration: none;
color: #222;
outline: none;
}
.tooltip span
{
visibility: hidden;
position: absolute;
bottom: 30px;
left: 50%;
z-index: 999;
width: 230px;
margin-left: -127px;
padding: 10px;
border: 2px solid #ccc;
opacity: .9;
background-color: #ddd;
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; /* IE6 fix */
}
.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 #ddd;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 0;
}
.tooltip span:before
{
border-top-color: #ccc;
bottom: -8px;
}

  • Bạn có thể tùy chỉnh mầu theo sở thích ở các đoạn được bôi màu xanh ở code trên, tham khảo mã màu tại đây 
Thêm Tooltip  cho bài viết
Bạn sử dụng code bên dưới để thêm Tooltip  cho bài viết
<a href="#" class="tooltip">
Troll VL
<span>Blog Chia Sẻ-Thủ Thuật-Fun</span>
</a>
Rất đơn giản phải không? Chúc blog của bạn ngày càng thành công hơn, đừng quên để lại comments góp ý cho mình nhé! Cảm ơn! 

1 Comments
Comments

1 comments :

Cảm ơn bạn đã ghé thăm Troll VL !
» Tạm thời ngăn không cho comment với chế độ ẩn danh vì có một số bạn không có thành ý cố tình spam. Mong các bạn thông cảm!
» Bạn nên viết bằng Tiếng Việt có dấu để mọi người dễ đọc, dễ bình luận
» Để liên hệ,góp ý và đóng góp bài viết bạn click vào đây
Sử dụng các thẻ sau cho comments
» Chèn nội dung vào blockquote <b rel="quote">Nội dung blockquote</b>
» Chèn nội dung vào note <em rel="note">Nội dung note</em>
» Chèn code vào khung pre <i rel="pre">Nội dung code</i>
» Chèn hình ảnh <i rel="image">Link hình ảnh</i>
» Chèn video từ youtube [youtube]link video[/youtube]
» Chèn link <i rel="anchor">Link</i>

Insert Emoticons
:cuoi
:hihi
:thank
:haha
:meu
:cry
:oaoa
1cuoi
:D
@@
:p
:o
:vi
:ko
:ca
:why
:xin
:lanh
:im
:aoi
:ado
:mda
:tat
0:khoa
a:ab
k:ac
q:ad
w:ae
e:af
l:ag
g:ah
8:ai
9:aj
9:ag
:9a
*Phải có khoảng trống trước các code mới hiển thị mặt cười


Mã Hóa Code Tạo và xem trước comments Cancel Reply
-->