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://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 !
Tác giả: Lê ANh Đức

Tôi là Đức, sinh viên năm cuối ngành Điện tử - Viễn thông trường Đại học Bách Khoa Hà Nội. Say hello to you!

  • Admin của trang web này đã qua đời ! Hãy để lại một comment để thể hiện lòng biết ơn, tiếc thương đối với người đã mất. Chúng tôi hy vọng những người yêu quý Lê Anh Đức sẽ cảm thấy được an ủi khi truy cập trang web này, cùng nhớ lại và tôn vinh cuộc đời của anh ấy. Cảm ơn rất nhiều !!!
    ^_^
    =r
    :))
    ;)
    =))
    :((
    <3
    ==
    :v
    :)
    :(
    :*
    :D
    (yy)
    (y)
    =hi
    :P
    =s
    =ok
    =clap
    =he
    =hl
    =hr
    :-)
    =hup
    =hd
    =l
    =ht
    =aa
    =no
    =hum
    =haizz
    =ask

    69 nhận xét:

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

    Một số lưu ý khi bình luận

    Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước (xem nội quy)

    Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời

    Để bình luận một đoạn code, hãy mã hóa code trước nhé !