Thêm widget giới thiệu dạng profile Facebook.
Có thể bạn muốn thêm mục profile Facebook nhưng không biết, hôm nay mình sẽ share cho các bạn widget dạng profile Facebook giống 90% trên Facebook nha.
Các bước thực hiện
- Bước 1 : Vào trang quản lý Blogger > Chủ đề > Chỉnh sửa HTML
- Bước 2 : Tìm đến thẻ đóng ]]></b:skin> và dán tất cả đoạn css phía dưới vào.
.widget-info-lebalong {border-top: 1px solid #ededed;text-align: initial;margin-top: 15px}
.widget-info-lebalong .content-w{margin-top: 10px;}
.widget-info-lebalong .content-w>p{text-align:center;padding:10px;padding-top:0;border-bottom:1px solid #ededed;margin-bottom:10px;margin: 0px;}
.widget-info-lebalong .content-w>p a{color:#3b5992}
#sidebar-bsw li{padding: 4px;border-bottom:none;}
.widget-info-lebalong .content-w ul li p{color:#333;font-size:15px;margin:0px; margin-left: 15px;}
.widget-info-lebalong .content-w ul li p .fa{width:20px;color:#868686}
.widget-info-lebalong .content-w ul li p .fa.fa-home{font-size:16px}
.widget-info-lebalong .content-w ul li p .fa.fa-map-marker{font-size:18px}
.widget-info-lebalong .content-w ul li p a{color:#3a5795;font-weight: 700;}p.social {text-align: center;}.about-author{font-size:15px;text-align:center;clear:both;margin-top:-70px}
.about-author img{width:100px;height:100px;border:4px solid rgb(255, 255, 255); transition: all 0.5s ease-in-out;object-fit: cover;}
.about-author img:hover{border-radius: 100%;transform: rotate(360deg); -ms-transform: rotate(360deg); -webkit-transform: rotate(360deg)}
.about-author p.name{font-weight:bold;line-height:0;margin:10px 0; font-size: 20px;}
.about-author p.aboutme{text-align:left;line-height:1.4em;max-width:414px;margin:auto}
.about-author p.name svg{vertical-align:middle;max-width:16px;min-width:16px;height:16px;width:16px}
.about-author p.name svg path{fill:#4285F4;paint-order:stroke;stroke-width:3px;stroke:#ffffff}
.about-author p.social{padding-top:10px;line-height:0}
.about-author a{display:inline-block;color:#3c4043}
.social-icon{height:32px;width:32px;display:inline-block;transform:scale(.75)}.friend-widget li a {line-height: 25px;font-size: 15px;}
.linkedin-icon:before {
font-family: fontawesome;
content: '\f2b3';
background: #e05d52;
text-align: center;
color: #ffffff;
height: 32px;
line-height: 32px;
width: 32px;
float: left;
font-size: 16px;
}.twitter-icon:before {
font-family: fontawesome;
content: '\f099';
background: #5da9dd;
text-align: center;
color: #ffffff;
height: 32px;
line-height: 32px;
width: 32px;
float: left;
font-size: 16px;
}.facebook-icon:before {
font-family: fontawesome;
content: '\f09a';
background: #4267b2;
text-align: center;
color: #ffffff;
height: 32px;
line-height: 32px;
width: 32px;
float: left;
font-size: 16px;
}
.followbyemail-icon:before {
font-family: fontawesome;
content: '\f16a';
background: #ff0000;
text-align: center;
color: #ffffff;
height: 32px;
line-height: 32px;
width: 32px;
float: left;
font-size: 16px;
}.cover {
height: 105px;
overflow: hidden;
border-radius: 4px 4px 0 0;
}- Bước 2 : Các bạn vào phần bố cục tạo một Widget HTML/Javascript và thêm tất cả HTML bên dưới vào đó.
<div class="widget-content">
<div class="about-widget">
<div class="cover">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBnHm_0g0puq0D9pQ0TIrltoabWiqOciWzU6romTo4GRsBbUx_zXwO_-jxno3ngHQJxOGoZDH_F6UqDkg3piklQZP7g4wbFVthyphenhyphenjOnX50tcJG6GqY1TtHXYSsgSYidMrB7Tx-y6piRFn_2/s1600/secteur_55b7a10075e91.jpg"style="
width: 400px;
" />
</div>
</div><div class="about-author">
<a href="https://plus.google.com/100425914480365587416" rel="noopener" target="_blank"title="Lê Bá Long">
<img alt="Lê Bá Long" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqa4FgZp0P_FlDvpzRNNBxFfpuve5vQ9WD0u3ck6Xo-0oYVDlmx2PKDUumPGBAJ4HLhMcDHwKqZ0DPHa9YLv9BJIVNXyCrFih-x8F-Bc1vgAzgekPtxHo-4g79b-Tfe2XbZ8J-uMi4S7c/s320/51828308_791393434547791_4718512334799110144_n.jpg"/>
<p class="name">
<span>Lê Quang Thìn</span>
<span data-tooltip="Đã xác minh">
<svg focusable="false" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-2 16l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z"></path>
</svg>
</span>
</p>
</a>
<p class="aboutme" style="
text-align: center;
">❝<i> Sự Nghiệp chưa thành đâu dám nghĩ tới Hồng Nhan</i> ❞<br />
Contact:lebalongit@gmail.com<br /></p>
<div class="widget-info-lebalong">
<div class="content-w">
<ul>
<li><p><i class="fa fa-briefcase"></i>Làm việc tại <ahref="https://www.facebook.com/Quangthin.57" target="_blank">Tam Kỳ</a></p></li>
<li><p><i class="fa fa-home"></i>Sống tại <a>Đắc Lắk, Vietnam</a></p></li>
<li><p><i class="fa fa-heart"></i>Độc thân</p></li>
<li><p><i class="fa fa-rss"></i>Có <a>10.983</a> người theo dõi</p></li>
</ul></div><p class="social">
<a href="https://www.facebook.com/quangthin.57/" rel="noopener" target="_blank" title="Theo dõi tôi trên Facebook"><span class="facebook-icon social-icon"></span></a>
<a href="https://twitter.com//" rel="noopener" target="_blank" title="Theo dõi tôi trên Twitter"><span class="twitter-icon social-icon"></span></a>
<a href="https://www.linkedin.com/in/" rel="noopener" target="_blank" title="Theo dõi tôi trên Linkedin"><span class="linkedin-icon social-icon"></span></a>
<a href="https://feedburner.google.com/fb/a/mailverify?uri=LBLongIt" rel="noopener"target="_blank" title="Theo dõi qua Email"><span class="followbyemail-icon social-icon"></span></a>
</p>
</div>
</div>
</div>Rồi các bạn chỉnh sửa lại các thông tin cần thiết thôi.
Code này mình lấy của Lê Bá Long nha
Nếu có thắc mắc gì hay khiếu nại bản quyền thì comment xuống bên dưới hoặc liên hệ qua email: minhcristiano.92@gmail.com