Cách thêm tiện ích mạng xã hội kiểu dáng đẹp trong Blogger


Xin chào các độc giả !! Thêm tiện ích truy cập xã hội trong blogger là điều rất quan trọng và nó là một trong những tiện ích hữu ích nhất mà bạn nên cài đặt cho độc giả để họ cảm thấy thoải mái và biết nhiều hơn về sự phổ biến blog của bạn. Trong một số trường hợp, bài đăng blog đủ dài hoặc có nhiều bình luận có vẻ tốt và tạo ấn tượng về một blog phổ biến và để thể hiện sự phổ biến mà bạn cần và tiện ích truy cập mạng xã hội đẹp mắt, bạn thực sự cần loại chức năng này, vì vậy khách truy cập có thể dễ dàng kiểm tra mức độ phổ biến của trang blog của bạn và trở thành người hâm mộ, người đăng ký hoặc người theo dõi của bạn.
Bây giờ hãy quay lại tiện ích của chúng tôi, vì vậy đây là một tiện ích nhỏ, chúng tôi đã tạo một tiện ích nhỏ và nhỏ với các mã đơn giản nhưng đồng thời nó mang lại cho blog của bạn một nét thanh lịch. Các widget trông rất dễ thương và trơn tru. Bạn có thể kiểm tra bản demo bên dưới trước khi thêm widget. 

  • 114người theo dõi
  • 0người theo dõi
  • 0lượt thích
  • 0người theo dõi
  • 0người đăng ký
  • 266người theo dõi

Thêm tiện ích 

Điều đầu tiên bạn cần làm là đăng nhập vào tài khoản Blogger của bạn và truy cập >> Bố cục >> Nhấp vào thêm tiện ích vào vị trí của bạn >> Thêm tiện ích HTML / JAVASCRIPT và dán mã bên dưới vào chỗ trống.

 <div class="trendy_counters">
    <ul class="sc_vertical">
        <li class="count-twitter"><a data-color-hover="#0084b4" style="background-color: rgb(51, 204, 255); padding: 10px;" class="icon" href="https://twitter.com/trendy_theme"><span class="fa fa-fw fa-twitter" style="font-size:24px; color:#fff" data-color-hover="#fff"></span><span class="items"><span data-color-hover="#fff" class="count" style="font-size:16px; color:#fff">114</span><span data-color-hover="#fff" class="label" style="font-size:12px; color:#fff">followers</span></span></a></li>
        <li class="count-googleplus"><a data-color-hover="#ff9800" style="background-color:#ff9800; padding:10px;" class="icon" href="https://rss.com/"><span class="fa fa-fw fa-rss" style="font-size:24px; color:#fff" data-color-hover="#fff"></span><span class="items"><span data-color-hover="#fff" class="count" style="font-size:16px; color:#fff">0</span><span data-color-hover="#fff" class="label" style="font-size:12px; color:#fff">followers</span></span></a></li>
            <li class="count-facebook"><a data-color-hover="#5E80BF" style="background-color:#3B5998; padding:10px;" class="icon" href="https://www.facebook.com/"><span class="fa fa-fw fa-facebook-official" style="font-size:24px; color:#fff" data-color-hover="#fff"></span><span class="items"><span data-color-hover="#fff" class="count" style="font-size:16px; color:#fff">0</span><span data-color-hover="#fff" class="label" style="font-size:12px; color:#fff">likes</span></span></a></li>
                <li class="count-vimeo"><a data-color-hover="#0088cc" style="background-color:#00adef; padding:10px;" class="icon" href="https://vimeo.com/"><span class="fa fa-fw fa-vimeo" style="font-size:24px; color:#fff" data-color-hover="#fff"></span><span class="items"><span data-color-hover="#fff" class="count" style="font-size:16px; color:#fff">0</span><span data-color-hover="#fff" class="label" style="font-size:12px; color:#fff">followers</span></span></a></li>
                    <li class="count-youtube"><a data-color-hover="#90030c" style="background-color:#bf2626; padding:10px;" class="icon" href=""><span class="fa fa-fw fa-youtube" style="font-size:24px; color:#fff" data-color-hover="#fff"></span><span class="items"><span data-color-hover="#fff" class="count" style="font-size:16px; color:#fff">0</span><span data-color-hover="#fff" class="label" style="font-size:12px; color:#fff">subscribers</span></span></a></li>
                        <li class="count-instagram"><a data-color-hover="#8a3ab9" style="background-color:#cd486b; padding:10px;" class="icon" href="https://instagram.com/nayon07"><span class="fa fa-fw fa-instagram" style="font-size:24px; color:#fff" data-color-hover="#fff"></span><span class="items"><span data-color-hover="#fff" class="count" style="font-size:16px; color:#fff">266</span><span data-color-hover="#fff" class="label" style="font-size:12px; color:#fff">followers</span></span></a></li>
    </ul>
</div>
  <link href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>
<style>
.trendy_counters:after {
clear: both;
content: '';
display: block;
}
.trendy_counters ul {
list-style: none;
margin: 0;
padding: 0;
clear: both;
}
.trendy_counters ul li {
text-align: center;
background: #f9f9f9;
}
.trendy_counters ul li a {
padding: 10px;
text-decoration:none;
}
.trendy-counters-per-row-2 ul li {
width: 50%;
float: left;
}
.trendy-counters-per-row-3 ul li {
width: 33.333%;
float: left;
}
.trendy-counters-per-row-4 ul li {
width: 25%;
float: left;
}
.sc_vertical a, .sc_vertical span:not(.fa) {
display: block;
text-align: center
}
.sc_horizontal a {
display: flex;
text-align: center;
align-items: center;
justify-content: center;
}
.sc_horizontal span {
margin-right: 3px;
}
.show-labels-No .label {
display: none !important;
}
.trendy-counters-icons-order {
padding: 10px;
background: #f6f6f6;
}
.trendy-counters-icons-order div {
background: #eaeaea;
display: inline-block;
margin-right: 5px;
padding: 10px;
}
.trendy-counters-icons-order div:hover {
cursor: move;
}
.trendy_counters ul li {
text-align: center;
background: #f9f9f9;
width: 33%;
float: left;
padding: 0;
}
</style>
Thay đổi văn bản màu đỏ được tô sáng với số người đăng ký / người theo dõi / số người hâm mộ của bạn. và nếu bạn đã có fontawgie trong blog của mình thì hãy xóa mã được tô sáng màu xanh. 

Phần kết luận

Chúc mừng !! Bạn đã làm nó. bây giờ bạn đã biết rằng Làm thế nào để thêm tiện ích truy cập xã hội kiểu dáng đẹp trong Blogger . Ghé thăm blog của bạn và kiểm tra tiện ích tuyệt vời trực tiếp hoạt động, hy vọng bạn thích hướng dẫn này, nếu bạn thích thì hãy chia sẻ nó với bạn bè của bạn, chúng tôi đang nỗ lực để phát triển thêm các tiện ích tuyệt vời như vậy, hãy theo dõi chúng tôi. 

Đăng nhận xét

0 Nhận xét

HOT !!!COMBO 6 CÁI SONOFF WIFI SWITCH CHỈ 637,500 đMua Ngay