Chia sẽ khung thông tin tác giả đẹp mắt cho blogspot

Chia sẽ khung thông tin tác giả đẹp mắt cho blogspot

Chia sẽ khung thông tin tác giả đẹp mắt cho blogspot

Xin chào tất cả đọc giả của Lebalong Blog, hôm nay mình xin chia sẽ cho các bạn một thủ thuật nhỏ nhưng cũng không kém phần thú vị và đẹp mắ...
Lê Bá Long Tác giả:
Xuất bản: 3/02/2019
Xin chào tất cả đọc giả của Lebalong Blog, hôm nay mình xin chia sẽ cho các bạn một thủ thuật nhỏ nhưng cũng không kém phần thú vị và đẹp mắt đâu nhé, đó là 1 khung thông tin tác giả khá là giống với Facebook các bạn cùng xem phần hướng dẫn chi tiết bên dưới nhé :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&gt;p{text-align:center;padding:10px;padding-top:0;border-bottom:1px solid #ededed;margin-bottom:10px;margin: 0px;}
.widget-info-lebalong .content-w&gt;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: &#39;\f2b3&#39;;
    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: &#39;\f099&#39;;
    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: &#39;\f09a&#39;;
    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: &#39;\f16a&#39;;
    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://3.bp.blogspot.com/-rGf-mYtbU7s/W_p86UBlpBI/AAAAAAAADms/OXSNxufNp2Ifo5Zopv0so2glTB8hEtwewCLcBGAs/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="http://1.bp.blogspot.com/-HnkaES9v46A/XGjcXHBawvI/AAAAAAAAACk/iW7n1d3iujQ7imH2BDmk_dqi_kaLLgffACK4BGAYYCw/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 <a href="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!!! 
Nguồn code gốc: Vietblogdao 
Chia sẽ khung thông tin tác giả đẹp mắt cho blogspot Chia sẽ khung thông tin tác giả đẹp mắt cho blogspotLê Bá Long8.8stars based on9reviewsXin chào tất cả đọc giả của Lebalong Blog, hôm nay mình xin chia sẽ cho các bạn một thủ thuật nhỏ nhưng cũng không kém phần thú vị và đẹp mắ...

Blogger Comments

Hiện tại có 13 nhận xét: