Trang chủ › all › Blogspot › Tips

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

Xem bình luận Chỉnh sửa bài viết

Thứ Hai, 11 tháng 12, 2017

Lipi

Đã 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/AVvXsEj-NLogMa-DuSokJ0TZiDS7q45u2fITmjJ6Ji6dybv_EfU7ndH5wQIO2VieOfxjM3WwLrAvMr2383xResfthjES5hLsu-AIGtllmcHE7o8qaFHCRGEplU_WeByN-58A63sC0_3ierwMEeM/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/AVvXsEiqzoblR1rZ39TpSkWWkZxQ29wcQ1s4sj_ndVCWjHTZfpEXDnzfArApBJQci-Kl7FG620bjPcsHTW5crGMbRf6SPUhInfTCP-9a5p5MoX4sunKIDXMBjjHb7JK_ha0Eh7Qv12LqQsibfgQ/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/AVvXsEj-NLogMa-DuSokJ0TZiDS7q45u2fITmjJ6Ji6dybv_EfU7ndH5wQIO2VieOfxjM3WwLrAvMr2383xResfthjES5hLsu-AIGtllmcHE7o8qaFHCRGEplU_WeByN-58A63sC0_3ierwMEeM/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/AVvXsEiqzoblR1rZ39TpSkWWkZxQ29wcQ1s4sj_ndVCWjHTZfpEXDnzfArApBJQci-Kl7FG620bjPcsHTW5crGMbRf6SPUhInfTCP-9a5p5MoX4sunKIDXMBjjHb7JK_ha0Eh7Qv12LqQsibfgQ/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ài viết của bạn được xem như một đề xuất cho bài viết của chúng tôi. Mẫu bài viết bạn đang chỉnh sửa sẽ được chúng tôi xem xét và update lên blog nếu nó hoàn hảo !

CHỈNH SỬA BÀI VIẾT
----------------------------------------
Đã 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.<br /><a name='more'></a><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc-dvXRCc973_gu8LrcBYGEI5BeIvGTv0mDIpuZ_6hSVqHkYfOF6lWuzMmrwuHadfzdtQA_52f3tNYNmJ3h6vDwkbkFiDUtRYNymXOklyEjo7Zxkx5JZ53LQOfApzV6llaagkbC42p9is/s1600/hover+ten+nguoi+binh+luan+giog+facebook+------trongkhanhnguyenCom.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="423" data-original-width="710" height="380" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc-dvXRCc973_gu8LrcBYGEI5BeIvGTv0mDIpuZ_6hSVqHkYfOF6lWuzMmrwuHadfzdtQA_52f3tNYNmJ3h6vDwkbkFiDUtRYNymXOklyEjo7Zxkx5JZ53LQOfApzV6llaagkbC42p9is/s640/hover+ten+nguoi+binh+luan+giog+facebook+------trongkhanhnguyenCom.PNG" width="640" /></a></div><h8>Các bước thực hiện</h8><b>Bước 1:</b> Chèn đoạn CSS sau vào trong HTML của blog<br /><blockquote class="tr_bq"><style><br />#timeline {<br />position: relative;<br />height: 204px;<br />border: 1px solid ddd;<br />-webkit-border-radius: 0 0 3px 3px;<br />-moz-border-radius: 0 0 3px 3px;<br />-o-border-radius: 0 0 3px 3px;<br />-ms-border-radius: 0 0 3px 3px;<br />border-radius: 3px;<br />background: #fff;<br />}<br />.timelinepic {<br />height: 140px;<br />width: 350px;<br />margin-top: -5px;<br />border-top-left-radius: 3px;<br />border-top-right-radius: 3px;<br />}<br />.timeline_menu {<br />height: 50px;<br />background: #fff;<br />position: relative;<br />padding-top: 5px;<br />}<br />.profilepic {<br />background: #fff;<br />border: 1px solid rgba(0, 0, 0, .3);<br />padding: 4px;<br />height: 90px;<br />width: 90px;<br />position: relative;<br />top: -90px;<br />left: 10px;<br />}<br />#timeline h1 a {<br />color: #fff;<br />text-decoration: none;<br />font-size: 17px!important;<br />}<br />#timeline h1 {<br />position: relative;<br />top: -170px;<br />left: 100px;<br />font-weight: bold;<br />font-size: 17px!important;<br />}<br />.tooltiptext {<br />visibility: hidden;<br />position: absolute;<br />width: 350px;<br />height: 212px;<br />border-radius: 3px;<br />border: 1px solid #ddd;<br />padding: 5px 0;<br />border-radius: 6px;<br />z-index: 1;<br />opacity: 0;<br />transition: opacity 1s;<br />}<br />.tooltip:hover .tooltiptext {<br />visibility: visible;<br />opacity: 1;<br />}<br />.tooltip-top {<br />bottom: 120%;<br />left: 10%;<br />}<br />.timeline_menu l {padding-left: 110px; font-size: 13px!important}<br />.timeline_menu l a {color: #4080ff!important; font-size: 13px!important}<br />.timeline_menu l i {padding-right: 2px}<br /></style></blockquote><b> Bước 2:</b> Tìm đoạn sau:<br /><blockquote class="tr_bq"><div class='comment_name'></blockquote><div> Trong đoạn này, các bạn sẽ nhìn thấy 1 đoạn dạng:<br /><div><blockquote class="tr_bq"><a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'><data:comment.author/></a></blockquote>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:<br /><blockquote><span class='tooltip'><br /><span class='tooltiptext tooltip-top'><br /><div id='timeline'><img alt='Timeline Cover' class='timelinepic' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-NLogMa-DuSokJ0TZiDS7q45u2fITmjJ6Ji6dybv_EfU7ndH5wQIO2VieOfxjM3WwLrAvMr2383xResfthjES5hLsu-AIGtllmcHE7o8qaFHCRGEplU_WeByN-58A63sC0_3ierwMEeM/s851/Facebook-Profile-Template-Timeline.png' title='Timeline Cover'/><br /><br /><br /><br /><b:if cond='data:comment.author != &quot;Trọng Khanh Nguyễn&quot;'><br /><div class='timeline_menu'><br /><l><i aria-hidden='true' class='fa fa-user-o'/> <span style="color: red;">1 bạn chung:</span><a href='/'><span style="color: red;">TKN Blog</span></a></l><br /><l style='padding-top: 2px'><i aria-hidden='true' class='fa fa-bookmark-o'/> <span style="color: red;">5 bài viết mới</span></l><br /></div><br /></b:if><br /><b:if cond='data:comment.author == &quot;<b><span style="color: red;">TÊN BẠN</span></b>&quot;'><br /><div class='timeline_menu'><br /><l><i aria-hidden='true' class='fa fa-briefcase'/> <span style="color: red;">Làm việc tại</span><a href='<span style="color: red;">http://www.linkthuthuat.com</span>'><span style="color: red;">Link Thủ Thuậ</span>t</a></l><br /><l style='padding-top: 2px'><i aria-hidden='true' class='fa fa-id-card-o'/><span style="color: red;"> Là Blogger Việt nhỏ tuổi !</span></l><br /></div><br /></b:if><br /><br /><br /><br /><img alt='' class='profilepic' expr:src='data:comment.authorAvatarSrc' title=''/><h1><a href=''><data:comment.author/><br /><br /><b:if cond='data:comment.author == &quot;<b><span style="color: red;">TÊN BẠN</span></b>&quot;'><span class='tick-fb'/><br /><style><br />.tick-fb {<br />content: &quot;&quot;;<br />position: absolute;<br />top: -1px;<br />margin-left: 5px;<br />height: 26px;<br />width: 26px;<br />background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqzoblR1rZ39TpSkWWkZxQ29wcQ1s4sj_ndVCWjHTZfpEXDnzfArApBJQci-Kl7FG620bjPcsHTW5crGMbRf6SPUhInfTCP-9a5p5MoX4sunKIDXMBjjHb7JK_ha0Eh7Qv12LqQsibfgQ/s160/Images.png) -121px 0px no-repeat;<br />}<br /></style></b:if></a></h1></div></span></blockquote><i>*Thay các dòng màu đỏ, xanh phù hợp với blog của bạn !</i><br />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:<br /><div><br /></div><blockquote><i><span class='tooltip'><br /><span class='tooltiptext tooltip-top'><br /><div id='timeline'><img alt='Timeline Cover' class='timelinepic' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-NLogMa-DuSokJ0TZiDS7q45u2fITmjJ6Ji6dybv_EfU7ndH5wQIO2VieOfxjM3WwLrAvMr2383xResfthjES5hLsu-AIGtllmcHE7o8qaFHCRGEplU_WeByN-58A63sC0_3ierwMEeM/s851/Facebook-Profile-Template-Timeline.png' title='Timeline Cover'/><br /><br /><br /><b:if cond='data:comment.author != &quot;Trọng Khanh Nguyễn&quot;'><br /><div class='timeline_menu'><br /><l><i aria-hidden='true' class='fa fa-user-o'/> <span style="color: red;">1 bạn chung:</span><a href='/'><span style="color: red;">TKN Blog</span></a></l><br /><l style='padding-top: 2px'><i aria-hidden='true' class='fa fa-bookmark-o'/> <span style="color: red;">5 bài viết mới</span></l><br /></div><br /></b:if><br /><b:if cond='data:comment.author == &quot;<b><span style="color: red;">TÊN BẠN</span></b>&quot;'><br /><div class='timeline_menu'><br /><l><i aria-hidden='true' class='fa fa-briefcase'/> <span style="color: red;">Làm việc tại</span><a href='<span style="color: red;">http://www.linkthuthuat.com</span>'><span style="color: red;">Link Thủ Thuậ</span>t</a></l><br /><l style='padding-top: 2px'><i aria-hidden='true' class='fa fa-id-card-o'/><span style="color: red;"> Là Blogger Việt nhỏ tuổi !</span></l><br /></div><br /></b:if><br /><br /><br /><img alt='' class='profilepic' expr:src='data:comment.authorAvatarSrc' title=''/><h1><a href=''><data:comment.author/><br /><b:if cond='data:comment.author == &quot;<b><span style="color: red;">TÊN BẠN</span></b>&quot;'><span class='tick-fb'/><br /><style><br />.tick-fb {<br />content: &quot;&quot;;<br />position: absolute;<br />top: -1px;<br />margin-left: 5px;<br />height: 26px;<br />width: 26px;<br />background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqzoblR1rZ39TpSkWWkZxQ29wcQ1s4sj_ndVCWjHTZfpEXDnzfArApBJQci-Kl7FG620bjPcsHTW5crGMbRf6SPUhInfTCP-9a5p5MoX4sunKIDXMBjjHb7JK_ha0Eh7Qv12LqQsibfgQ/s160/Images.png) -121px 0px no-repeat;<br />}<br /></style></b:if></a></h1></div></span></i><br /><a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'><br /><data:comment.author/><br /><span style="color: blue;"><b>         </a> </b></span></blockquote>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 !<br /><br /><b>Bước 3:</b> Lưu lại và xem thành quả =)<br /><br />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é !<br />Chúc các bạn thành công !</div></div>