Bách Hiểu Sinh

Xin chào tất cả các bạn. Hôm nay mình sẽ chia sẻ cho các bạn widget 'Giới thiệu thông tin' giống Facebook. Mình nghĩ nó sẽ giúp cho Blog của các bạn trở nên sinh động hơn. Bắt đầu thôi !

Các bước thực hiện

Bước 1: Chèn đoạn CSS sau vào vị trí bất kì hoặc trước thẻ đóng </style>

<style>
.about-facebook>p{text-align:center;padding:10px;padding-top:0;border-bottom:1px solid #ededed;margin-bottom:10px; font-family: Roboto}
.about-facebook h3{font-size: 16px;color:#525252;padding:10px; font-family: Roboto}
.about-facebook h3 span{width:30px;height:30px;background:#d8d8d8;line-height:31.5px;text-align:center;border-radius:50%;display:inline-block;margin-right:5px;font-size:20px}
.main-about-facebook ul{margin:0;padding:0;list-style:none; font-family: Roboto}
.main-about-facebook ul li{margin-bottom:15px}
.main-about-facebook ul li p{color:#333;font-size:14px}
.main-about-facebook ul li a{color:#365899}
.main-about-facebook ul li p .fa{width:20px;color:#868686}
.webtt{width:120px;border:1px solid #dddfe2;border-radius:4px;margin:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-left:8px;padding-right:8px;padding-bottom:4px;padding-top:4px}
.webtt:hover{border:1px solid #90949c}
</style>

Bước 2: Chèn đoạn code sau vào vị trí muốn hiển thị

<div class="about-facebook" style="width: 300px;">
<h3>
<i class="fa fa-globe"></i> Thông tin</h3>
<div class="main-about-facebook" style="font-family: Roboto; font-size: 14.5px;">
Một blogger thực thụ - Thích chia sẻ. Thích học hỏi, tham gia cộng đồng blogger để học hỏi nhiều hơn <i class="fa fa-smile-o"></i> <br /><br />
<ul>
<li><i class="fa fa-briefcase"></i> Đã làm việc tại <a href="https://www.blogger.com/null">Huế</a></li>
<li><i class="fa fa-home"></i> Sống tại <a href="https://www.blogger.com/null">Huế</a></li>
<li><i class="fa fa-heart"></i> Đang hẹn hò với <a href="https://www.blogger.com/null">Bách Hiểu Sinh</a></li>
<li><i class="fa fa-map-marker"></i> Đến từ <a href="https://www.blogger.com/null">Nghệ An</a></li>
<li><i class="fa fa-rss"></i>Có <a href="https://www.blogger.com/null">15.976.078 </a>theo dõi</li>
<center>
<div class="webtt">
<img alt="" class="website" height="16" src="https://i.imgur.com/GbiOtSq.png" style="margin-right: 4px; margin-top: -1px; vertical-align: middle;" width="16" /><a class="web_site" href="https://facebook.com/" style="color: #90949c;">facebook.com</a></div>
</center>
</ul>
</div>
</div>
<style>
a{text-decoration:none}
</style>

Bước 3: Lưu Template

LỜI KẾT

Vậy là xong! Mình hi vọng với các bước đơn giản này sẽ làm trang trí thêm cho Blog của bạn. Đừng ngần ngại Comments phía dưới khi có trở ngại hoặc yêu cầu bài viết mới nhé !

Chúc các bạn thành công!