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

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
  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
CÓ THỂ BẠN ĐANG TÌM KIẾM