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>Nguyễn Đạt</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>Star Nguyễn IT</a></p></li>

<li><p><i class="fa fa-graduation-cap"></i>Từng học tại <a>Trường THCS Lê Thánh Tông</a></p></li>

<li><p><i class="fa fa-home"></i>Sống tại <a>Định Quán</a></p></li>

<li><p><i class="fa fa-map-marker"></i>Đến từ <a>Đồng Nai - 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>999.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://starnit.blogspot.com">Star Nguyễn IT</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
Nguồn: Hồng Hải Blog

Blogger

thủ thuật

thủ thuật blogger