Hướng Dẫn Tạo About Giống Facebook Cho Blogspot

Xin chào các bạn. Hôm nay NGUYỄN NGỌC QUÍ ĐZ 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 !

ẢNH MINH HỌA

CÁCH THỰC HIỆN

Đăng Nhập Blogger - Chọn Chủ Đề - Chỉnh Sửa HTML

Ctrl F - tìm đoạn  - <style> - dán đoạn code sau vào trước thẻ - <style>

<style>
.about-facebook&gt;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: Vào bố cục - Thêm Tiện Ích - HTML - dán đoạn code bên dưới .

<div class="about-facebook" style="width: 300px;">
<h3> <i class="fa fa-globe"></i> Thông tin chi tiết </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. <br /><br /> <ul> <li><i class="fa fa-briefcase"></i> Đang làm việc tại <a href="http://www.nguyenngocquidz.tk/">Thành phố Hồ Chí Minh </a></li> <li><i class="fa fa-home"> </i> Sống tại <a href="http://www.nguyenngocquidz.tk/">Thành phố Hồ Chí Minh</a></li> <li><i class="fa fa-map-marker"></i> Đến từ <a href="http://www.nguyenngocquidz.tk/"> Thành phố Hồ Chí Minh </a></li> <li><i class="fa fa-heart"> </i> Đang hẹn hò với <a href="http://www.nguyenngocquidz.tk/"> ... </a> </li> <li><i class="fa fa-rss"> </i> Có <a href="http://www.nguyenngocquidz.tk/"> 98.210.401 người </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://www.facebook.com/http.www.nguyenngocquidz.tk" style="color: #90949c;">facebook.com</a></div> </center> </ul> </div> </div> <style> a{text-decoration:none} </style>

Bước cuối : Lưu Template

LỜI KẾT

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

                                                                                                                                                                                    view-source: starcuongit