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 !
Ctrl F - tìm đoạn - <style> - dán đoạn code sau vào trước thẻ - <style>
Bước cuối : Lưu Template
view-source: starcuongit
Ả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>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 .
.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>
<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<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>
LỜI KẾT
Chúc các bạn thành côngview-source: starcuongit
Post A Comment
Không có nhận xét nào :