Bạn đang muốn thêm widget follow Fanpage Facebook, Trang Instagram, Twitter hay kênh Youtube vào Website/Blogger một cách chuyên nghiệp nhất hay nhìn nó trông thật đẹp mắt mà không muốn gây ảnh hưởng tới điểm Pagespeed Insights thì bạn nên xem qua bài viết này.
Bài viết này mình sẽ chia sẻ cho mọi người Code tạo widget follow social network nhìn cực đẹp cho Blogger/Werbsite
Xem Demo
Bạn có thể xem Demo qua link bên dưới nhé!
Code tạo Widget follow Social Network
Sau khi xem Demo bạn có thể thấy có 4 Wiget dạng Follow Social Netwok khá đẹp. Vậy thì cùng xem qua Code của 4 widget đó nhé!
Ở đây mình lấy code Widget Follow Fanpage Facebook làm mẫu và hướng dẫn tùy chỉnh theo ý của bạn ( Cho mấy bạn đang còn yếu Code nhé. Còn mấy bác bro cứ vậy mà triển ra cái mình muốn.)
<!--[ widget follow Facebook by CODE THINK ]-->
<div class="widget-content">
<a class="stw discount dis-31" href="your_link_here" target="_blank">
<div class="stw-content">
<span class="title">Follow your_name on Fanpage Facebook</span>
<span class="desc">your_name | Facebook</span>
</div>
<div class="stw-img"><span><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M24,3H8A5,5,0,0,0,3,8V24a5,5,0,0,0,5,5h8a1,1,0,0,0,1-1V20a1,1,0,0,0-1-1H15V17h1a1,1,0,0,0,1-1V12.5A2.5,2.5,0,0,1,19.5,10H22v2H21a2,2,0,0,0-2,2v2a1,1,0,0,0,1,1h1.72l-.5,2H20a1,1,0,0,0-1,1v4a1,1,0,0,0,2,0V21h1a1,1,0,0,0,1-.76l1-4a1,1,0,0,0-.18-.86A1,1,0,0,0,23,15H21V14h2a1,1,0,0,0,1-1V9a1,1,0,0,0-1-1H19.5A4.51,4.51,0,0,0,15,12.5V15H14a1,1,0,0,0-1,1v4a1,1,0,0,0,1,1h1v6H8a3,3,0,0,1-3-3V8A3,3,0,0,1,8,5H24a3,3,0,0,1,3,3V24a3,3,0,0,1-3,3H20a1,1,0,0,0,0,2h4a5,5,0,0,0,5-5V8A5,5,0,0,0,24,3Z' fill='#1E90FF'></path></svg></span></div>
</a>
<style>
/* CSS */
/* CSS */
.stw {
position:relative;
display:flex;
align-items:center;
width:100%;
background-color:#fefefe;
margin:15px 0 0;
padding:12px 15px;
border:1px;
border-radius:10px;
color:#161617;
overflow:hidden;
box-shadow:0 -10px 25px -5px rgba(0,0,0,.1);
;
}
.stw .stw-img {
width:50px;
height:50px;
;
}
.stw .stw-img span {
display:flex;
align-items:center;
justify-content:center;
height:100%;
background-color:#ebeced;
border-radius:8px;
color:#505050;
font-weight:700;
font-size:28px;
;
}
.stw .stw-content {
width:calc(100% - 50px);
padding-right:15px;
;
}
.stw .stw-content .title {
display:block;
font-weight:550;
font-size:14px;
margin:0;
;
}
.stw .stw-content .desc {
display:block;
font-size:11px;
margin-top:2px;
color:#505050;
;
}
.stw.fletro {
border:0;
background-color:#CFEDEB;
box-shadow:0 4px 18px 0 rgba(9,32,76,.035);
justify-content:space-between;
padding:0;
overflow:visible;
;
}
.stw.fletro .stw-content {
width:calc(100% - 100px);
padding:15px 10px 15px 15px;
;
}
.stw.fletro .stw-img {
width:100px;
height:auto;
flex-shrink:0;
;
}
.stw.fletro .stw-img img {
position:absolute;
bottom:0;
right:0;
max-width:110px;
;
}
.stw.discount:after {
content:'Follow';
font-weight:700;
font-size:10px;
display:flex;
align-items:center;
justify-content:flex-end;
width:70px;
height:22px;
padding-right:10px;
background-color:#1E90FF;
border-radius:80px 0 0 0;
color:#fff;
position:absolute;
bottom:0;
right:0;
;
}
.drK .stw {
color:#161617;
;
}
.night-mode .stw {
color:#f7f7f7;
background-color:#202442;
border:1px solid #edeef0;
;
}
.night-mode .penawaran1 .penawaran1-img span {
background-color:#003366;
;
}
</style>
</div>
Hướng dẫn tùy chỉnh Code
Bạn có thể tùy chỉnh những thông tin sau thheo ý của bạn
- Thay được mình bôi xanh trên đoạn Code trên bằng Link bạn muốn chuyển hướng đến.
- Tùy chỉnh và bằng thông tin bạn muốn diễn đạt cho Viewer
Ở đây nếu bạn muốn thay Facebook thành mạng xã hội khác (Ví dụ: Instagram, Twitter, Youtube,...) thì bạn cần thay đổi những thông tin sau:
- Thay đổi Thumb widget: Ở đây mình sử dụng dạng SVG Icon để làm thumb cho widget. Đối với Code trên thì thumb chính là icon Facebook. Vì vậy bạn cần thay thẻ SVG ở trên sang thẻ SVG bạn muốn dùng làm thumb Social.
- Thay đổi Title: Bạn cần thay đổi thuộc tính ở dòng CSS theo ý bạn muốn.( Ví dụ nếu bạn dùng Youtube thì bạn nên thay thành Subcrise )
- Thay đổi màu sắc chính của widget theo Social: Ở code trên thì bạn sẽ thấy màu xanh da trời (Màu chủ đạo của Icon Facebook). Để có thể thay đổi thì bạn cần chú ý đến 2 chỗ.
Bạn có thể sử dụng các SVG social Tại đây!
1. Thành phần
trong thẻ . Và để thay đổi màu sắc cho Icon thì bạn cần thêm vào thẻ .Bạn có thể lấy mã màu Tại đây!
2. Màu sắc của nền chữ (Ví dụ: màu nền của chữ Follow hay Subcrise): Bạn cần chú ý đến dòng CSS
được mình bôi xanh ở trên. Ở đây bạn chỉ cần thay thành mã màu ở mục 1 để thống nhất với màu chủ đạo của IconỞ Demo thì mình có tùy chỉnh được thêm 3 Social Network nữa. Mình sẽ để 3 Source Code còn lại qua link bên dưới cho những bạn lười như mình nhé ^^