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 - Khanh Blogger
Bài viết của Khanh Blogger
K
Khanh Blogger
Trang chủ
5

Liên hệ

  • facebook.com/tknblog
  • admin@khanhblogger.com
  • +841653009392

Loading...

Loading...

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/AVvXsEig9MrHAtuzNt8H6ngz3TJ4IgVv-QhNDAQBV-rHwDDu8R1Ela4TtA0Fra7qWKykXebano8OImvFOGjKpw4FyMlb6sp0yTo6xpetroFPhuFhw9zoNwfQcoIUvzt76oqLp6HzXW2mdJPR7xY/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/AVvXsEgRnZ1PWpo9gartGPTGb8zO8-bvhFghlJjFeNdcTsX8rjBz2i7WiiiX-5K99If1TgyATInuC26n0jp9R_Q8DbImaCH-zWtnzYI0I2r1drvWR8zlF26gAkpYRZMi1E4HOZqnyxpQu5gW5uo/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/AVvXsEig9MrHAtuzNt8H6ngz3TJ4IgVv-QhNDAQBV-rHwDDu8R1Ela4TtA0Fra7qWKykXebano8OImvFOGjKpw4FyMlb6sp0yTo6xpetroFPhuFhw9zoNwfQcoIUvzt76oqLp6HzXW2mdJPR7xY/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/AVvXsEgRnZ1PWpo9gartGPTGb8zO8-bvhFghlJjFeNdcTsX8rjBz2i7WiiiX-5K99If1TgyATInuC26n0jp9R_Q8DbImaCH-zWtnzYI0I2r1drvWR8zlF26gAkpYRZMi1E4HOZqnyxpQu5gW5uo/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ích
Hashtag:
Bạn và người khác

67 komentar:

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

    BalasHapus
  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

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

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

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

      Hapus
  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

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

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

    BalasHapus
    Balasan
    1. giống giống thôi à :( buồn thế

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

      Hapus
    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

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

      Hapus
    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

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

      Hapus
    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

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

    BalasHapus
    Balasan
    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 =))

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

    BalasHapus
    Balasan
    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 =)

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

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

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

      Hapus
  7. Balasan
    1. Ông phải nhận xét về bài viết chứ cmt là sao??

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

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

      Hapus
  9. ra cái chuyển hướng đi Khanh :*

    BalasHapus
  10. Blog này bữa nay load tốt vậy em!

    BalasHapus
  11. 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 :))

    BalasHapus
    Balasan
    1. Share rồi em view làm gì nữa :v

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

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

      Hapus
  12. Balasan
    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

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

    BalasHapus


:)
=)
:(
:D
:v
;)
^_^
:((
(y)
<3

Posting Lama:

Posting Lebih Baru:

Khanh Blogger