Chào các bạn hôm nay mình xin share một widget giới thiệu bản thân gần giống facebook. Mình đã tối ưu widget giới thiệu này chuẩn nhất giống Facebook, Các bạn hãy tự tùy chỉnh css lại để phù hợp với website của bạn nhé!!
CÁCH THỰC HIỆN
Bước 1: Các bạn vào phần Chủ đề > Chỉnh sửa. Tìm thẻ]]></b:skin> rồi copy đoạn code sau và dán lên trên nó/* HuyHoangIT */Bước 2: Sau khi lưu template, hãy vào phần Bố cục > Thêm tiện ích > chọn HTML/Javascript và dán đoạn code sau:
.about-widget {text-align: center;padding-bottom: 10px;}
.about-widget p {font-size: 15px;line-height: 1.4}
.about-widget-social {text-align: center;padding: 15px;margin: 15px -15px -15px;border-top: 1px solid #e2e2e2}
.about-widget-social a i {font-size: 18px;margin: 0px 7px;color: #191b28;-webkit-transition: all 0.2s linear;-moz-transition: all 0.2s linear;-ms-transition: all 0.2s linear;-o-transition: all 0.2s linear;transition: all 0.2s linear;}
.about-widget-social span {display: none}
.about-widget-img {border-radius: 50%;overflow: hidden;display: inline-block;max-width: 120px;max-height: 120px;line-height: 120px;margin: 10px 15px}
.widget-info-luanit .content-w{padding:10px;border-top: 1px solid #ededed;}
.widget-info-luanit .content-w>p{text-align:center;padding:10px;padding-top:0;border-bottom:1px solid #ededed;margin-bottom:10px;margin: 0px;}
.widget-info-luanit .content-w>p a{color:#3b5992}
.widget-info-luanit .content-w ul li{margin-bottom:15px;padding: 0px;border-bottom:none;}
.widget-info-luanit .content-w ul li p{color:#333;font-size:14px;margin:0px}
.widget-info-luanit .content-w ul li p .fa{width:20px;color:#868686}
.widget-info-luanit .content-w ul li p .fa.fa-home{font-size:16px}
.widget-info-luanit .content-w ul li p .fa.fa-map-marker{font-size:18px}
.widget-info-luanit .content-w ul li p a{color:#3a5795;font-weight: 700;}
<div class="about-widget">
<div class="about-widget-img">
<img alt="blogger template" src="http://sv1.upsieutoc.com/2017/10/12/avt.jpg" width="120" height="120" />
</div>
<h4>Hà Huy Hoàng</h4>
<p>
Tôi thích tung một tờ tiền vào giữa hai người và nhìn họ đánh nhau đến chết. <i class="fa fa-smile-o"></i>
</p>
</div>
<div class="widget-info-luanit">
<div class="content-w">
<ul>
<li>
<p><i class="fa fa-briefcase"></i>Admin tại <a>Huy Hoàng IT</a></p></li>
<li><p><i class="fa fa-graduation-cap"></i>Từng học tại <a>Trường Đại Học Bách Khoa</a></p></li>
<li><p><i class="fa fa-home"></i>Sống tại <a>Thành phố Hồ Chí Minh</a></p></li>
<li><p><i class="fa fa-map-marker"></i>Đến từ <a>Thành phố Hồ Chí Minh</a></p></li>
<li><p><i class="fa fa-heart"></i>Có mối quan hệ <a>phức tạp</a></p></li>
<li><p><i class="fa fa-rss"></i>Có <a>99.999.999</a> người theo dõi</p></li></ul></div>
</div>
<head><link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/><link href='//fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'/>
Các bạn tùy biến sao cho phù hợp với blog!!
- Chúc các bạn thành công, nếu gặp lỗi gì thì để lại bình luận để mình biết nhé :D
