Cảm ơn bạn đã tham gia khảo sát
Đóng góp của bạn sẽ giúp chúng tôi dần cải thiện về mặt nội dung cũng như giao diện của trang.

Khanh Blogger

Khanh Blogger

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ện
Bướ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 !

Bình luận

  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. ra cái chuyển hướng đi Khanh :*

    Trả lờiXóa
  12. Blog này bữa nay load tốt vậy em!

    Trả lờiXóa
  13. Thấy kì kì nên kg sài :)

    Trả lờiXóa
  14. 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
    Trả lời
    1. Share rồi em view làm gì nữa :v

      Xóa
    2. e ns lúc a chưa share á :v nếu a ko share e cũng ko view đc đâu haha :V

      Xóa
    3. Em cũng chỉ là định view thôi chứ chưa có view :v

      Xóa
  15. Khanh toàn thủ thuật hay nhỉ

    Trả lờiXóa
    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
  16. cái này không áp dụng cho form nhận xét mới pk ad

    Trả lờiXóa
  17. buổi chìu mát mẻ nha
    tương tác tốt

    Trả lờiXóa
  18. Cũng ok đó ông, để test luôn =))~

    Trả lờiXóa
  19. Dạo này bận gì k ra bài mới hả e ? Bài này reup đúng k?

    Trả lờiXóa
  20. Nhận xét này đã bị tác giả xóa.

    Trả lờiXóa
  21. dạo nảy ít ra bài mới vậy ông

    Trả lờiXóa

XEM NHIỀU TRONG TUẦN

Bạn có thể quan tâm