- Việt Nam
- Hàn Quốc
- Trung Quốc
- Hồng Kông
- Nhật Bản
- Đài Loan
-Âu - Mỹ
- Thái Lan
- Ấn Độ
<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 !
Tags:
Blogspot
Tips
<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/AVvXsEjtNOAYAdIHJ240HCi3PilbQ26oHZPLYUNKGkjSEMit1W6h_7zUmiZIVd5tmQB0rSLQqNYnZwKFNopswAv9-2kVtYxP57jW0hrvQYjt505Ikj7OsAFZHF0Xgj505BKyL2crTLQ_Z3yJxGw/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/AVvXsEhPR4SH69VCO1ydhMLpqvtX8TAdgh83BgiPgnTtsvURchDUozYzievKIbPyk3t1aRhU7QC5Z_LlJ293MHnEYBwVZ5oibupJ8_yC7ZriHu21K7AqMbiZoSUxMzAsfhgJ53xC_mZSI9GvxN4/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/AVvXsEjtNOAYAdIHJ240HCi3PilbQ26oHZPLYUNKGkjSEMit1W6h_7zUmiZIVd5tmQB0rSLQqNYnZwKFNopswAv9-2kVtYxP57jW0hrvQYjt505Ikj7OsAFZHF0Xgj505BKyL2crTLQ_Z3yJxGw/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/AVvXsEhPR4SH69VCO1ydhMLpqvtX8TAdgh83BgiPgnTtsvURchDUozYzievKIbPyk3t1aRhU7QC5Z_LlJ293MHnEYBwVZ5oibupJ8_yC7ZriHu21K7AqMbiZoSUxMzAsfhgJ53xC_mZSI9GvxN4/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 !
