Hướng dẫn cách thêm phần giới thiệu cực đẹp cho blogger chỉ với css - Minh CRISTIANO Blog

Hướng dẫn cách thêm phần giới thiệu cực đẹp cho blogger chỉ với css

 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&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 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

2 Nhận xét

MỘT SỐ LƯU Ý KHI BÌNH LUẬN
- Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước (xem Nội quy)

- Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời

- Để bình luận kèm hình ảnh, bạn hãy vào trang Upload ảnh sau đó kéo thả để upload hình ảnh lên.

- Không spam trong khung bình luận, hạn chế viết tắt..

Đăng nhận xét

MỘT SỐ LƯU Ý KHI BÌNH LUẬN
- Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước (xem Nội quy)

- Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời

- Để bình luận kèm hình ảnh, bạn hãy vào trang Upload ảnh sau đó kéo thả để upload hình ảnh lên.

- Không spam trong khung bình luận, hạn chế viết tắt..

Mới hơn Cũ hơn

Table of contents