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

Đã Xuất Bản
Đã 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://lh5.googleusercontent.com/-_EpTcCn6wL4/U3yk_9zVUnI/AAAAAAAAPHw/6iBiiT9FWQ8/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://lh6.googleusercontent.com/-lDDfoOPV0Es/U3uN9lmgP1I/AAAAAAAAPEQ/2IJJ3xHFqV4/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://lh5.googleusercontent.com/-_EpTcCn6wL4/U3yk_9zVUnI/AAAAAAAAPHw/6iBiiT9FWQ8/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://lh6.googleusercontent.com/-lDDfoOPV0Es/U3uN9lmgP1I/AAAAAAAAPEQ/2IJJ3xHFqV4/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 !
Mọi hình ảnh/bài viết trên trang web này điều được tự mình design hoặc sưu tầm từ các trang khác ! Mọi hành động Copy & Reup vui lòng ghi rõ nguồn Lê Anh Đức

Bài Viết Bạn Nên Xem


69 bình luận

Hãy cùng tham gia bình luận về bài viết này nhé!

  1. - Chất chơi :v Đơn giản nhưng chuyên nghiệp !!!

    Trả lờiXóa
  2. lúc trc cũng view soure phần này của bác nhưng cũng lỗi ở phần sau như bác nói này

    Trả lờiXóa
    Trả lời
    1. lỗi này đơn giản mà. mà lỗi temp cũng có báo chứ nhỉ

      Xóa
    2. có bác nhưng cái sai 1 số cái thẻ đóng

      Xóa
    3. sai thẻ đóng thì sửa đc chứ có j đâu :v

      Xóa
  3. Cơ mà cái này nặng không a nhỉ. Giờ ngồi hóng anh làm bài viết khung chát bạn bè ngay trên blog lun :). Với event 25h nửa

    Trả lờiXóa
    Trả lời
    1. không nặng. dùng toàn css mà e :v
      còn khung chat sắp xog rồi, không biết có ok không

      Xóa
  4. blog của a đây à. nhìn thấy giống giống facebook

    Trả lờiXóa
    Trả lời
    1. giống giống thôi à :( buồn thế

      Xóa
    2. nó đen thui mà :3 nếu màu sáng với cái thanh menu ở trên mà xanh là ok anh ạ

      Xóa
    3. blog a xịn lắm :V tối nó đen, sáng là sáng, bảo vệ mắt người dùng. em dùng blog đi a chỉ cho vài thứ :v

      Xóa
    4. thôi mệt. nghe nói chỉnh code này nọ. con gái ai chơi :v

      Xóa
    5. trời. con gái là blogger bình thường mà. còn code a chỉnh giúp cho. e viết bài và xuất bản thôi :v

      Xóa
    6. anh ơi sao nó không hiện avatar facebook khi em cmt a nhỉ.

      Xóa
    7. cái này là blogger của google em ơi :3 em có tài khoản google plus ko,đăng nhập gmail r cmt là đc :v

      Xóa
  5. Trả lời
    1. mình xóa đó bạn ! để biết hơn lý do bạn đọc bài này của a Cường nha. lý do của a ý cũng là lý do của mình
      http://phucuongblogger.blogspot.com/2017/11/tam-su-cuoi-ngay-lien-ket-hay-khong-lien-ket.html

      Xóa
  6. Cái này mặc định có 1 ảnh bìa FB à :v

    Trả lờiXóa
    Trả lời
    1. vâng. tại vì tài khoản cmt ng thì dùng tài khoản blogger, ng dùng google plus nên lấy dữ liệu nó làm ảnh hưởng tốc độ nên thôi =))

      Xóa
  7. Cái này nó tự động thay tên với ảnh đại diện khi hover hả ta, hay sao?

    Trả lờiXóa
    Trả lời
    1. dùng thẻ lấy dữ liệu nên tự động thay tên vs avatar. chỉ có cái ảnh bìa vì ng dùng blogger ng dùng google plus cmt nên dữ liệu nó lấy ảnh hưởng speed. còn lại là auto =)

      Xóa
    2. Ngon, rảnh rảnh test phát trên con bacsiwindows xem sao :v

      Xóa
    3. Vãi cả Người đàn anh @@ có thể cho anh cái danh hiệu gì đó ko Khanh !!??

      Xóa
    4. Ủa sao nó zính bên Trường Nguyễn rồi @@

      Xóa
  8. - Ông sửa phần datnguyenblogger giùm tui thành:
    - Tên hiển thị: Còi Offical
    - Link: http://www.coioffical.net/
    - Thks ông <3

    Trả lờiXóa
  9. Trả lời
    1. Ông phải nhận xét về bài viết chứ cmt là sao??

      Xóa
  10. A tính lấy cái này về xài chơi, mà đọc xong thấy rối qá Khanh ơi @@

    Trả lờiXóa
    Trả lời
    1. mấy đứa trẻ trên kia còn làm đc =))) a phải làm đc chứ :v

      Xóa
  11. Blog này bữa nay load tốt vậy em!

    Trả lờiXóa
  12. Giờ mới để ý là có bài này :v Mà cái này chất này :v Tính view từ lúc anh chưa viết bài cơ mà lười :))

    Trả lờiXóa
  13. Trả lời
    1. thanks ô nha <3 đang cố gắng viết theo lối riêng và đổi mới. năm mới phải khởi nghiệp thôi :v

      Xóa
  14. cái này không áp dụng cho form nhận xét mới pk ad

    Trả lờiXóa
Có Thể Bạn Đang Tìm