Tạo Wedget Liên Kết Xã Hội Cho Blogspot Tuyệt Đẹp

- Trong quá trình làm việc, cũng như là trong quá trình viết bài, khó tránh khỏi sai sót, rất mong các bạn, anh chị em bỏ qua. Đồng thời do trình độ lập trình & kinh nghiệm thực tiễn còn hạn chế nên giao diện và bài viết còn nhiều lỗi ! Em rất mong nhận được ý kiến đóng góp từ mọi người, để bản thân học hỏi thêm được nhiều kinh nghiệm và sẽ cố gắng hoàn thiện trong tương lai. Em xin chân thành cảm ơn !
- Mọi chi tiết xin liên hệ:
• Phone number: 038.689.7757
• Facebook: fb.com/leanhduc.pro.vn
• Email: Admin@leanhduc.pro.vn

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 =))

DEMO AND CODE



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

3 nhận xét:


Cùng tham gia bình luận bài viết này nhé!

  1. temp này có bán không bạn :)

    Trả lờiXóa
    Trả lời
    1. Bán chất xám người khác à :) nghĩ gì đấy :v

      Xóa
    2. Nói vậy thôi chứ temp bản quyền BSW mà. Mình cũng chỉ là bản RIP nên ko thể share và càng không thể bán (có nhã ý mua thì cố thêm tý tiền mua bản Premium mà dùng)

      Xóa