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 - LazaTV

LỌC THEO TRẠNG THÁI

Trailer
Đang Chiếu
Hoàn Thành

LỌC THEO THƯ MỤC

Phim Bộ
Phim Lẻ
Chiếu Rạp

LỌC THEO QUỐC GIA

Âu Mỹ
Hàn Quốc
Trung Quốc
Ấn Độ
Thái Lan
Nhật Bản
Việt Nam
Thông Báo: Hiện Nay LazaTv.Com Đã Có App Xem Phim Online cho Android Free.Để Tải Hãy Click Vào Đây Để Xem Phim Nhanh Hơn Bản mới nhất cập nhật Xóa QUẢNG CÁO.BQT LazaTv.Com
Nếu không xem được hãy để lại bình luận phía dưới Phim để ADMIN sửa lỗi.Giờ Cao điểm sever có lúc bị quá tải các bạn chỉ cần đợi 1 lúc và load lại phim là xem bình thường. BQT LaZaTV !
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
Thể Loại:
Quốc Gia:
Năm Phát Hành:
Trạng Thái


Đã 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/AVvXsEgGy1mjnkDJc-FsWeXsIp8Fn_nmamnOeTcf2l_g4UfGBAzBkIyQW_lb6gpA0gvuxBb4CeI_zYSuIvCnpXA42VjQQYVIwbLJlhjWc4lTQspLsE1PPel0uzl0vWScZpcr8JymUmI0AydiU_4/s851/Facebook-Profile-Template-Timeline.png' title='Timeline Cover'/>



<b:if cond='data:comment.author != &quot;Trọng Khanh Nguyễn&quot;'>
<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 == &quot;TÊN BẠN&quot;'>
<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 == &quot;TÊN BẠN&quot;'><span class='tick-fb'/>
<style>
.tick-fb {
content: &quot;&quot;;
position: absolute;
top: -1px;
margin-left: 5px;
height: 26px;
width: 26px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ8wtg1xikwd7DGrdHcsP0eXlAZaaoQniD-mtI4kf1XoJfnyGnaZ_UgcVEiDv-G60qotfn7giATXnSWVDFoQktE75LzW5t39WBWD8AN7nvffbH0R9XxNOmsS_znn0LjtaWswYenfiMPk8/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/AVvXsEgGy1mjnkDJc-FsWeXsIp8Fn_nmamnOeTcf2l_g4UfGBAzBkIyQW_lb6gpA0gvuxBb4CeI_zYSuIvCnpXA42VjQQYVIwbLJlhjWc4lTQspLsE1PPel0uzl0vWScZpcr8JymUmI0AydiU_4/s851/Facebook-Profile-Template-Timeline.png' title='Timeline Cover'/>


<b:if cond='data:comment.author != &quot;Trọng Khanh Nguyễn&quot;'>
<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 == &quot;TÊN BẠN&quot;'>
<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 == &quot;TÊN BẠN&quot;'><span class='tick-fb'/>
<style>
.tick-fb {
content: &quot;&quot;;
position: absolute;
top: -1px;
margin-left: 5px;
height: 26px;
width: 26px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ8wtg1xikwd7DGrdHcsP0eXlAZaaoQniD-mtI4kf1XoJfnyGnaZ_UgcVEiDv-G60qotfn7giATXnSWVDFoQktE75LzW5t39WBWD8AN7nvffbH0R9XxNOmsS_znn0LjtaWswYenfiMPk8/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 !