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 Senin, 11 Desember 2017
Đã 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>Bước 2: Tìm đoạn sau:
#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>
<div class='comment_name'>
Trong đoạn này, các bạn sẽ nhìn thấy 1 đoạn dạng:
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:
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 !
<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'>*Thay các dòng màu đỏ, xanh phù hợp với blog của bạn !
<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 != "Trọng Khanh Nguyễn"'>
<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 == "TÊN BẠN"'>
<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 == "TÊN BẠN"'><span class='tick-fb'/>
<style>
.tick-fb {
content: "";
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>
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'>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 !
<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 != "Trọng Khanh Nguyễn"'>
<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 == "TÊN BẠN"'>
<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 == "TÊN BẠN"'><span class='tick-fb'/>
<style>
.tick-fb {
content: "";
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ướ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 !
Cmt đầu
BalasHapusNhận xét này đã bị tác giả xóa.
Hapus^^
Hapus- Chất chơi :v Đơn giản nhưng chuyên nghiệp !!!
BalasHapuslet's go !
Hapus- Ok baby
HapusChất chơi người dơi :V
BalasHapuschấm.
HapusChất chơi người nhện logic chưa :3
Hapuschưa nghe bao giờ
Hapustrất's
BalasHapusthanks a :v
HapusQuá chất
BalasHapusthanks :v share nào !
Hapuslú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
BalasHapuslỗi này đơn giản mà. mà lỗi temp cũng có báo chứ nhỉ
Hapuscó bác nhưng cái sai 1 số cái thẻ đóng
Hapussai thẻ đóng thì sửa đc chứ có j đâu :v
HapusCơ 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
BalasHapuskhông nặng. dùng toàn css mà e :v
Hapuscòn khung chat sắp xog rồi, không biết có ok không
blog của a đây à. nhìn thấy giống giống facebook
BalasHapusgiống giống thôi à :( buồn thế
Hapusnó đen thui mà :3 nếu màu sáng với cái thanh menu ở trên mà xanh là ok anh ạ
Hapusblog 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
Hapusthôi mệt. nghe nói chỉnh code này nọ. con gái ai chơi :v
Hapustrờ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
HapusGa lăng quá ta ơi :v
Hapusanh ơi sao nó không hiện avatar facebook khi em cmt a nhỉ.
Hapuscá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
HapusAuto xóa lk à ???
BalasHapusCái này mặc định có 1 ảnh bìa FB à :v
BalasHapusvâ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 =))
HapusCái này nó tự động thay tên với ảnh đại diện khi hover hả ta, hay sao?
BalasHapusđúng rồi anh.
Hapusdù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 =)
HapusNgon, rảnh rảnh test phát trên con bacsiwindows xem sao :v
Hapus:v
HapusVãi cả Người đàn anh @@ có thể cho anh cái danh hiệu gì đó ko Khanh !!??
Hapusrồi a :v
HapusỦa sao nó zính bên Trường Nguyễn rồi @@
Hapusđược rồi :3
HapusHay quấ
BalasHapuscmt 2 lần luôn :v
HapusHay quớ :D
BalasHapusthanks <3
Hapuscmt
BalasHapusÔng phải nhận xét về bài viết chứ cmt là sao??
HapusA tính lấy cái này về xài chơi, mà đọc xong thấy rối qá Khanh ơi @@
BalasHapusmấy đứa trẻ trên kia còn làm đc =))) a phải làm đc chứ :v
Hapusrồi nha ông :v
BalasHapusra cái chuyển hướng đi Khanh :*
BalasHapusBlog này bữa nay load tốt vậy em!
BalasHapustrình cao :v
HapusThấy kì kì nên kg sài :)
BalasHapuschỉ hợp vs temp fb thôi :v
HapusGiờ 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đố e view đó :3
HapusShare rồi em view làm gì nữa :v
Hapuse ns lúc a chưa share á :v nếu a ko share e cũng ko view đc đâu haha :V
HapusEm cũng chỉ là định view thôi chứ chưa có view :v
Hapuscái này thú dzị nè
BalasHapusĐiều quá bthg :v
Hapus:v
Hapus:V
HapusKhanh toàn thủ thuật hay nhỉ
BalasHapusthanks ô 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
Hapuscái này không áp dụng cho form nhận xét mới pk ad
BalasHapus