LỜI MỞ ĐẦU
Chào mừng tất cả các bạn đã đến với bài viết tiếp theo của mình. Nay mới vọc được cái Wedget này bên nước ngoài nên share cho các bạn luôn cho nóng =))
CODE VÀ HƯỚNG DẪN
Copy toàn bộ code phía dưới ➼ Bố cục ➼ Thêm tiện ích ➼ HTML/JavaScript ➼ Dán code ➼ Lưu ➼ Xong!
<!-- liên kết xã hội -->
<style>
a.social_item {
position: relative;
display: block;
height: 50px;
line-height: 50px;
overflow: hidden;
border-radius: 4px;
}
li.social_item-wrapper {
float: left;
width: 48%;
text-align: center;
margin-right: 4% !important;
margin-bottom: 10px !important;
color: #fff;
}
.social_item-wrapper:nth-child(2n+2) {
margin-right: 0 !important;
}
.social_icon {
float: left;
line-height: 50px;
width: 41px;
font-size: 1.3rem;
}
a.social_item.social_facebook {
background: #5d82d1 !important;
}
.fa-facebook.social_icon {
background: #2E4372;
}
li.social_item-wrapper:hover .fa-facebook.social_icon {
background: #3F5B9B;
}
li.social_item-wrapper:hover .social_facebook {
background: #2E4372;
}
a.social_item.social_twitter {
background: #40bff5 !important;
}
.fa-twitter.social_icon {
background: #1571A5;
}
li.social_item-wrapper:hover .fa-twitter.social_icon {
background: #1C97DE;
}
li.social_item-wrapper:hover .social_twitter {
background: #1571A5;
}
a.social_item.social_youtube {
background:#ef4e41 !important;
}
.fa-youtube.social_icon {
background: #B31919;
}
li.social_item-wrapper:hover .fa-youtube.social_icon {
background: #E22020;
}
li.social_item-wrapper:hover .social_youtube {
background: #B31919;
}
a.social_item.social_dribbble {
background: #f7659c !important;
}
.fa-dribbble.social_icon {
background: #B51A45;
}
li.social_item-wrapper:hover .fa-dribbble.social_icon {
background: #E82159;
}
li.social_item-wrapper:hover .social_dribbble {
background: #B51A45;
}
a.social_item.social_rss {
background:#ff7e30 !important;
}
.fa-rss.social_icon {
background: #C2521B;
}
li.social_item-wrapper:hover .fa-rss.social_icon {
background: #E86321;
}
li.social_item-wrapper:hover .social_rss {
background: #C2521B;
}
a.social_item.social_google-plus {
background: #eb5e4c !important;
}
.fa-google-plus.social_icon {
background: #BF2424;
}
li.social_item-wrapper:hover .fa-google-plus.social_icon {
background: #E82C2C;
}
li.social_item-wrapper:hover .social_google-plus {
background: #BF2424;
}
a.social_item.social_linkedin {
background: #3897f0 !important;
}
.fa-linkedin.social_icon {
background: #02669E;
}
li.social_item-wrapper:hover .fa-linkedin.social_icon {
background: #0275B6;
}
li.social_item-wrapper:hover .social_linkedin {
background: #02669E;
}
a.social_item.social_instagram {
background: #3f91cb !important;
}
.fa-instagram.social_icon {
background: #6F583C;
}
li.social_item-wrapper:hover .fa-instagram.social_icon {
background: #8E714D;
}
li.social_item-wrapper:hover .social_instagram {
background: #6F583C;
}
a.social_item.social_pinterest {
background: #CA2027;
}
.fa-pinterest.social_icon {
background: #AB1B21;
}
li.social_item-wrapper:hover .fa-pinterest.social_icon {
background: #CA2027;
}
li.social_item-wrapper:hover social_pinterest {
background: #AB1B21;
}
ul.social-counter a {
color: #fff;
}
</style>
<div class="socialcounter">
<ul class="social-counter">
<li class="social_item-wrapper"><a href="https://www.facebook.com/leanhduc.pro.vn" class="social_item social_facebook"><i class="fa fa-facebook social_icon"></i><span class="social_num">888,000</span></a></li>
<li class="social_item-wrapper"><a href="https://www.facebook.com/leanhduc.pro.vn" class="social_item social_twitter"><i class="fa fa-twitter social_icon"></i><span class="social_num">888,000</span></a></li>
<li class="social_item-wrapper"><a href="https://www.facebook.com/leanhduc.pro.vn" class="social_item social_youtube"><i class="fa fa-youtube social_icon"></i><span class="social_num">888,000</span></a></li>
<li class="social_item-wrapper"><a href="https://www.facebook.com/leanhduc.pro.vn" class="social_item social_dribbble"><i class="fa fa-dribbble social_icon"></i><span class="social_num">888,000</span></a></li>
<li class="social_item-wrapper"><a href="https://www.facebook.com/leanhduc.pro.vn" class="social_item social_rss"><i class="fa fa-rss social_icon"></i><span class="social_num">888,000</span></a></li>
<li class="social_item-wrapper"><a href="https://www.facebook.com/leanhduc.pro.vn" class="social_item social_google-plus"><i class="fa fa-google-plus social_icon"></i><span class="social_num">888,000</span></a></li>
<li class="social_item-wrapper"><a href="https://www.facebook.com/leanhduc.pro.vn" class="social_item social_linkedin"><i class="fa fa-linkedin social_icon"></i><span class="social_num">888,000</span></a></li>
<li class="social_item-wrapper"><a href="https://www.facebook.com/leanhduc.pro.vn" class="social_item social_instagram"><i class="fa fa-instagram social_icon"></i><span class="social_num">888,000</span></a></li>
</ul>
</div>
<!-- kết thúc liên kết xã hội -->LỜI KẾT
Như vậy, mình đã share code và hướng dẫn cho các bạn cách tạo một wedget tuyệt đẹp mà đơn giản rồi nhé! Nếu thấy hay hãy thả tim và share cho mình nhé! Chúc các bạn một ngày làm việc thật hiệu quả =))
Copyright © Lê Anh Đức
