Thêm box Follow mạng xã hội theme Flatsome

Khi vào một web thường có box Follow các mạng Xã hội tăng tương tác cho web, Hôm nay mình share các bạn box Follow mạng xã hội theme flatsome nhé

Thêm box Follow mạng xã hội theme flatsome

Bắt đầu làm nhé, VỚi theme Flatsome bạn vào

Tùy Chỉnh / Head  ở đây bạn chọn 1 Box html bất kỳ mà chưa sử dụng thêm đoạn code này vào

<div id="navSocial">
<div class="social">
<ul>
<li><a href="https://www.facebook.com/hoanghamobilecom" title="Facebook Hoàng Hà Mobile" target="_blank" class="blue">
<span><i class="icon-facebook"></i></span></a></li>
<li><a href="https://www.youtube.com/channel/UCJm_GdFJzT8h1odq1oMu_7Q?sub_confirmation=1" title="Youtube Hoàng Hà Mobile Channel" target="_blank" class="red">
<span><i class="icon-youtube"></i></span></a></li>
<li><a href="https://www.instagram.com/hoanghamobile/?hl=vi" title="Hoàng Hà Mobile Instagram" target="_blank" class="rainbow">
<span><i class="icon-instagram"></i></span></a></li>
<li><a href="https://www.tiktok.com/@hoanghaangels?" title="Tiktok" target="_blank" class="black">
<span><i class="icon-tiktok"></i></span></a></li>
</ul>
</div>
</div>

Thay các link trên cho phù hợp với web của bạn

NOTE: Trong hình mình thêm ở HTML2 và kéo vào MENU TOP nhé nhớ lưu lại

Tiếp đến là CSS thêm các css sau vào

/*Home - Icon Share*/
#navSocial {
margin-left: -95px;
}
.social {
background: #f5f5f5 0% 0% no-repeat;
box-shadow: 0 4px 6px #00000029;
border-radius: 30px;
display: inline-block;
padding: 2px;
position: fixed;
top: 45%;
}
.social ul {
list-style: none;
margin-bottom: -5px !important;;
}
.social ul li {
padding-bottom: 1px;
}
.social ul li a.blue {
border: 2px solid #3c5a99;
color: #3c5a99;
}
.social ul li a {
display: block;
width: 40px;
height: 40px;
text-align: center;
font-size: 24px;
border-radius: 30px;
}
.social ul li a.blue {
border: 2px solid #3c5a99;
color: #3c5a99;
margin-left: -10px;
margin-bottom: -2px;
}
.social ul li a.red {
border: 2px solid #f00;
color: #f00;
}
.social ul li a.rainbow {
display: block;
padding: 2px;
background: linear-gradient(
50deg
,#fbe18a 0%,#fcbb45 21%,#f75274 38%,#d53692 52%,#8f39ce 74%,#ad63a0 100%) 0% 0% no-repeat;
border-radius: 30px;
width: 40px;
height: 40px;
font-size: 26px;
}
i.icon-tiktok {
border: 2px solid;
border-radius: 999px;
padding: 4px;
width:41px
}

Ở đây có dòng # navSocial { margin-left: -95px; } do whith trang khác nhau dẫn đến vị trí BOX có thể khác nhau , bạn chỉnh số -95px cho phù hợp với theme nhé