Share code tạo Widget follow Social Network cho Website/Blogger

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é!

Demo

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 your_link_here đượ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 Follow your_name on Fanpage Facebook và your_name | Facebook 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.

Bạn có thể sử dụng các SVG social Tại đây!

• Thay đổi Title: Bạn cần thay đổi thuộc tính Follow ở dòng CSS content:'Follow'; 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ỗ.

1. Thành phần Fill trong thẻ <path>. Và để thay đổi màu sắc cho Icon thì bạn cần thêm fill='mã màu ở đây' vào thẻ <path>.

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 background-color:#1E90FF; được mình bôi xanh ở trên. Ở đây bạn chỉ cần thay #1E90FF 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é ^^

Txt Code widget Instagram Download

Txt Code widget Twitter Download

Txt Code widget Youtube Download