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!
Hình Minh Họa |
Bước 1: Chèn đoạn CSS sau vào vị trí bất kì hoặc trước thẻ đóng </style>
<style>Bước 2: Chèn đoạn code sau vào vị trí muốn hiển thị
.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;">Bước 3: Lưu Template
<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">Star Cường IT</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>
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!
Hay nhỉ, mà sẵn tiện cho em xin code phần Xem Demo với nha <3
Trả lờiXóaMail: tinhgetter@gmail.com
Cảm ơn anh trước !
Cái code phần Xem Demo là có CSS nữa nhé, còn chỉ có code thì không xài được đâu.
Xóahttp://notepad.linkthuthuat.com/2017/10/button-demo-starcuongit.html
Xóađây bạn
Lâu rồi mới thấy Khanh post bài.
Trả lờiXóa2 Bờ lóc gơ thay nhau post bài =))
XóaStar cường còn Bờ lóc nào nữa ắ
Xóae post lưu nháp lâu r ý chứ
Trả lờiXóakkk :)) đang hẹn hò với star cường it :v
Trả lờiXóaHaha :))
XóaEm tưởng anh bị Gay =)))
XóaMen chính hiệu nhé -.-, đừng nói vậy mà Cường tủi thân.
XóaBác Khanh hài vãi ra :)) Chơi ác sao mà để hẹn hò với Star Cường IT =))
Xóaxã hội chấp nhận mak :v
XóaHaha :v
Trả lờiXóaKhanh ơi cho em xin mail anh ib với anh tý nha :D
Trả lờiXóatrongkhanh5678@gmail.com nha :)
Xóatrongkhanh5678@gmail.com nha :)
XóaOpps Great article!!
Trả lờiXóaWelcome to our new website neotericit