Bài viết này mình sẽ hướng dẫn cho các bạn thêm widget Giới thiệu giống Facebook cực đẹp cho blog


HƯỚNG DẪN CÁCH LÀM:

Bước 1: Đăng nhập vào blogger rồi vào mục Bố cục --> Thêm tiện ích và thêm đoạn code bên dưới vào nó
<style> .thong_tin>p{text-align:center;padding:10px;padding-top:0;border-bottom:1px solid #ededed;margin-bottom:10px} .thong-tin h3{font-size: 16px;color:#525252;padding:10px} .thong-tin h3 span{width:30px;height:30px;background:#d8d8d8;line-height:28.9px;text-align:center;border-radius:50%;display:inline-block;margin-right:5px;font-size:20px} .thong_tin ul{margin:0;padding:0;list-style:none} .thong_tin ul li{margin-bottom:15px} .thong_tin ul li p{color:#333;font-size:14px} .thong_tin ul li a{color:#365899} .thong_tin ul li p .fa{width:20px;color:#868686} i.icon-fb{ background-size: auto; background-repeat: no-repeat; display: inline-block; height: 16px; width: 16px; margin-right: 8px; float: left } .work{background-image: url(https://i.imgur.com/iojkzlD.png);background-position: 0px -25px} .live{background-image: url(https://i.imgur.com/iojkzlD.png);background-position: 0px -41px} .relation{background-image: url(https://i.imgur.com/UtqUD0S.png);background-position: 0px -17px} .from{background-image: url(https://i.imgur.com/iojkzlD.png);background-position: 0px -76px} .joined{background-image: url(https://i.imgur.com/uTlMrti.png);background-position:0px} .follow{background-image: url(https://i.imgur.com/UtqUD0S.png);background-position: 0px -51px} .ceo{background-image: url(https://i.imgur.com/3Mm8Axv.png);background-position: 0px 0px} .sms{background-image: url(https://i.imgur.com/UtqUD0S.png);background-position: 0px 0px}.phone{background-image: url(https://i.imgur.com/UtqUD0S.png);background-position: 0px -68px} .sms{background-image: url(https://i.imgur.com/UtqUD0S.png);background-position: 0px 0px} .web{width:250px;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} .web:hover{border:1px solid #90949c} li.about{border-top:1px solid #ededed;padding-top:10px;} </style> <br />
<div class="thong-tin">
<h3>
<i class="fa fa-globe"></i> Giới thiệu</h3>
<div class="thong_tin">
Hello, World! <b>Nguyễn Gia 1988 ^.^</b><br />
<ul>
<li><i class="icon-fb work"></i> Làm việc tại TPHCM</li>
<li><i class="icon-fb live"></i> Sống tại TPHCM</li>
<li><i class="icon-fb relation"></i> Độc thân</li>
<li><i class="icon-fb from"></i> Đến từ TPHCM</li>
<li><i class="icon-fb joined"></i> Đã tham gia <a href="https://plus.google.com/110048594766565676376">2018</a></li>
<li><i class="icon-fb follow"></i> Có <a href="https://plus.google.com/110048594766565676376">120.000 </a>theo dõi</li>
<li><i class="icon-fb ceo"></i> Quản lý Nguyễn Gia 1988 Blog</li>
<center>
<div class="web">
<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://nguyengia1988.blogspot.com/" style="color: #90949c;">nguyengia1988.blogspot.com</a></div>
</center>
</ul>
</div>
</div>


Chúc các bạn thành công!

Tags