Hiển thị box thông tin giống facebook khi rê chuột vào tên người bình luận cho Blogspot

Đã có rất nhiều bạn hỏi về cái này thì hôm nay rảnh rỗi share cho mọi người. Để xem demo các bạn có thể rê chuột vào tên của người bình luận bất kì sẽ biết =)) Hoặc có thể xem ảnh bên dưới.

Các bước thực hiệnBước 1: Chèn đoạn CSS sau vào trong HTML của blog

<style>
#timeline {
position: relative;
height: 204px;
border: 1px solid ddd;
-webkit-border-radius: 0 0 3px 3px;
-moz-border-radius: 0 0 3px 3px;
-o-border-radius: 0 0 3px 3px;
-ms-border-radius: 0 0 3px 3px;
border-radius: 3px;
background: #fff;
}
.timelinepic {
height: 140px;
width: 350px;
margin-top: -5px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
.timeline_menu {
height: 50px;
background: #fff;
position: relative;
padding-top: 5px;
}
.profilepic {
background: #fff;
border: 1px solid rgba(0, 0, 0, .3);
padding: 4px;
height: 90px;
width: 90px;
position: relative;
top: -90px;
left: 10px;
}
#timeline h1 a {
color: #fff;
text-decoration: none;
font-size: 17px!important;
}
#timeline h1 {
position: relative;
top: -170px;
left: 100px;
font-weight: bold;
font-size: 17px!important;
}
.tooltiptext {
visibility: hidden;
position: absolute;
width: 350px;
height: 212px;
border-radius: 3px;
border: 1px solid #ddd;
padding: 5px 0;
border-radius: 6px;
z-index: 1;
opacity: 0;
transition: opacity 1s;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
.tooltip-top {
bottom: 120%;
left: 10%;
}
.timeline_menu l {padding-left: 110px; font-size: 13px!important}
.timeline_menu l a {color: #4080ff!important; font-size: 13px!important}
.timeline_menu l i {padding-right: 2px}
</style>

Bước 2: Tìm đoạn sau:

<div class='comment_name'>

Trong đoạn này, các bạn sẽ nhìn thấy 1 đoạn dạng:

<a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'><data:comment.author/></a>

Các bước thêm đoạn code dưới đây vào phía trên thẻ <a expr....... đó đoạn code dưới đây:

<span class='tooltip'>
<span class='tooltiptext tooltip-top'>
<div id='timeline'><img alt='Timeline Cover' class='timelinepic' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtNOAYAdIHJ240HCi3PilbQ26oHZPLYUNKGkjSEMit1W6h_7zUmiZIVd5tmQB0rSLQqNYnZwKFNopswAv9-2kVtYxP57jW0hrvQYjt505Ikj7OsAFZHF0Xgj505BKyL2crTLQ_Z3yJxGw/s851/Facebook-Profile-Template-Timeline.png' title='Timeline Cover'/>

<b:if cond='data:comment.author != "Trọng Khanh Nguyễn"'>
<div class='timeline_menu'>
<l><i aria-hidden='true' class='fa fa-user-o'/> 1 bạn chung:<a href='/'>TKN Blog</a></l>
<l style='padding-top: 2px'><i aria-hidden='true' class='fa fa-bookmark-o'/> 5 bài viết mới</l>
</div>
</b:if>
<b:if cond='data:comment.author == "TÊN BẠN"'>
<div class='timeline_menu'>
<l><i aria-hidden='true' class='fa fa-briefcase'/> Làm việc tại<a href='http://www.linkthuthuat.com'>Link Thủ Thuật</a></l>
<l style='padding-top: 2px'><i aria-hidden='true' class='fa fa-id-card-o'/> Là Blogger Việt nhỏ tuổi !</l>
</div>
</b:if>

<img alt='' class='profilepic' expr:src='data:comment.authorAvatarSrc' title=''/><h1><a href=''><data:comment.author/>

<b:if cond='data:comment.author == "TÊN BẠN"'><span class='tick-fb'/>
<style>
.tick-fb {
content: "";
position: absolute;
top: -1px;
margin-left: 5px;
height: 26px;
width: 26px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPR4SH69VCO1ydhMLpqvtX8TAdgh83BgiPgnTtsvURchDUozYzievKIbPyk3t1aRhU7QC5Z_LlJ293MHnEYBwVZ5oibupJ8_yC7ZriHu21K7AqMbiZoSUxMzAsfhgJ53xC_mZSI9GvxN4/s160/Images.png) -121px 0px no-repeat;
}
</style></b:if></a></h1></div></span>

*Thay các dòng màu đỏ, xanh phù hợp với blog của bạn !
Khoan lưu nhé, vì nếu lưu sẽ bị lỗi, Bây giờ sau khi thêm đoạn code trên thì code mới sẽ thành:

<span class='tooltip'>
<span class='tooltiptext tooltip-top'>
<div id='timeline'><img alt='Timeline Cover' class='timelinepic' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtNOAYAdIHJ240HCi3PilbQ26oHZPLYUNKGkjSEMit1W6h_7zUmiZIVd5tmQB0rSLQqNYnZwKFNopswAv9-2kVtYxP57jW0hrvQYjt505Ikj7OsAFZHF0Xgj505BKyL2crTLQ_Z3yJxGw/s851/Facebook-Profile-Template-Timeline.png' title='Timeline Cover'/>

<b:if cond='data:comment.author != "Trọng Khanh Nguyễn"'>
<div class='timeline_menu'>
<l><i aria-hidden='true' class='fa fa-user-o'/> 1 bạn chung:<a href='/'>TKN Blog</a></l>
<l style='padding-top: 2px'><i aria-hidden='true' class='fa fa-bookmark-o'/> 5 bài viết mới</l>
</div>
</b:if>
<b:if cond='data:comment.author == "TÊN BẠN"'>
<div class='timeline_menu'>
<l><i aria-hidden='true' class='fa fa-briefcase'/> Làm việc tại<a href='http://www.linkthuthuat.com'>Link Thủ Thuật</a></l>
<l style='padding-top: 2px'><i aria-hidden='true' class='fa fa-id-card-o'/> Là Blogger Việt nhỏ tuổi !</l>
</div>
</b:if>

<img alt='' class='profilepic' expr:src='data:comment.authorAvatarSrc' title=''/><h1><a href=''><data:comment.author/>
<b:if cond='data:comment.author == "TÊN BẠN"'><span class='tick-fb'/>
<style>
.tick-fb {
content: "";
position: absolute;
top: -1px;
margin-left: 5px;
height: 26px;
width: 26px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPR4SH69VCO1ydhMLpqvtX8TAdgh83BgiPgnTtsvURchDUozYzievKIbPyk3t1aRhU7QC5Z_LlJ293MHnEYBwVZ5oibupJ8_yC7ZriHu21K7AqMbiZoSUxMzAsfhgJ53xC_mZSI9GvxN4/s160/Images.png) -121px 0px no-repeat;
}
</style></b:if></a></h1></div></span>
<a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'>
<data:comment.author/>
</a>

Bây giờ như code trên có 1 thẻ đóng </a> nằm ở cuối dòng code, các bạn thêm thẻ đóng </span> là xong !

Bước 3: Lưu lại và xem thành quả =)

Nó khá phức tạp nhưng nhìn chung khá đơn giản, một số bạn biết qua về CSS hay HTML Blogspot cũng có thể làm được rất nhanh chóng ! Hi vọng bài viết này sẽ giúp blog của bạn đẹp hơn và tăng tính chuyên nghiệp cho Blog ! Các bạn đừng lo đến cái này ảnh hưởng đến tốc độ mà vì nó được làm hoàn toàn bằng CSS nên không làm giảm tốc độ blog đâu nhé !
Chúc các bạn thành công !

Thể Loại

Quốc Gia

KHÁC

Hiển thị box thông tin giống facebook khi rê chuột vào tên người bình luận cho Blogspot