TẠO WIDGET ABOUT GIỐNG FACEBOOK CHO BLOGSPOT

Chào các bạn hôm nay mình xin share cách TẠO WIDGET ABOUT GIỐNG  FACEBOOK CHO BLOGSPOT ....

Cách Thực Hiện

Các bạn chỉ copy đoạn code này và chèn vào nơi bạn muốn hiển thị là được
<style>
.about-widget h4 {font-size: 18px;font-weight: 500;color: #333333;margin: 15px 15px}
.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;}
   .web{width:111px;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:1px;padding-top:4px}
   .web:hover{border:1px solid #90949c}
</style>
<div class="widget-content">
<div class="about-widget">
<div class="about-widget-img">
<img alt="blogger template" src="http://znews-photo-td.zadn.vn/w1024/Uploaded/kcwvouvs/2017_09_15/19554162_852355278257274_8784679994650028259_n.jpg" width="100%" height="100%" />
</div>
<h4>Hồng Hải</h4>
<p> Người quan tâm đến tôi, tôi sẽ quan tâm lại gấp bội!  </p>
</div>
<div class="widget-info-luanit">
<div class="content-w">
<ul>
<li> <p><i class="fa fa-briefcase"></i>Làm việc tại <a>Hồng Hải BLOG</a></p></li>
<li><p><i class="fa fa-graduation-cap"></i>Từng học tại <a>Trường THPT Trần Quốc Tuấn</a></p></li>
<li><p><i class="fa fa-home"></i>Sống tại <a>Gia Lai</a></p></li>
<li><p><i class="fa fa-map-marker"></i>Đến từ <a>Bình Định - Việt Nam</a></p></li>
<li><p><i class="fa fa-heart"></i>Có mối quan hệ phức tạp</p></li>
<li><p><i class="fa fa-rss"></i>Có <a>99.999.999</a> người theo dõi</p></li>
<center><div class="web"><p><img class="website" style="margin-top:-1px;margin-right:4px;vertical-align:middle" height="16" src="https://i.imgur.com/GbiOtSq.png" width="16" alt="" /><a class='web_site' style='color:#90949c' href="https://honghaiblogseo.blogspot.com/">HongHaiBlog</a></p></div></center>
</ul></div>
</div></div>
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

11 Nhận xét

Mới hơn Cũ hơn