Thêm Phần Thông Tin Cá Nhân Cực Đẹp Cho Blog

Xin chào tất cả đọc giả của Khánh Blog, Hôm nay mình sẽ share cho anh em cái windget Thông Tin Cá Nhân Cực Đẹp mà mình lấy từ Lê Bá Long :D

CÁC BƯỚC THỰC HIỆN:

Bước 1: Các bạn truy cập chủ đề tìm ]]></b:skin> dán tất cả css bên dưới lên bên trên thẻ đó.

.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 bố cục thêm HTML/Javascript 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/AVvXsEhXkyQg3cqG4JewM1HgaNL5wEJ8xzsQn5FTQh8pr7w0LUgMKmVwL1V8tT8GAg7_8jgTGalig_ZN03Y4CihNs2QiS1IBjl9iU4eZx8Ciop-yMC9ZDw0hsFOiRgbSWwi8iBmN8x2SKFJlPaUC/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/AVvXsEhCkJamZNyDagx6hxh1CPENrPqDW_IeSF1UANr9ktQPBPtsCZ70y-_XykaZNOW3COdOEE10VrUPK3dRcHgFOjMUPP-_zdo3UpLo5jCoghUm3O7c_mL7yNwkHmvQuI9ywdKWGpvdfp_pYq0/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>

Lưu ý: Các bạn thay thông tin cho đúng với thông tin của bạn nhé. Chúc các bạn thành công!!!