Thanh mạng xã hội trượt đẹp cho Blogger

Sau khi chia sẻ bộ nút SOCIALIZE IT ở bài viết trước nhằm mục đích thu hút thêm khách truy cập, hôm nay mình xin chia sẻ thêm cho các bạn một thanh trượt mạng xã hội màu đen với phong cách khá chuyên nghiệp, thanh này nhằm mục đích đưa khách truy cập đến các fanpage ở mạng xã hội giúp họ dễ cập nhật thông tin mới nhất từ mạng xã hội khi họ đang trên đó. Thanh này sử dụng WeLoveIconFonts tương tự với Awesome Font mình đã giới thiệu có nghĩa là làm 100% bằng HTML và CSS nên tốc độ khá là tuyệt vời.

Thanh mạng xã hội trượt đẹp cho Blogger

Thanh mạng xã hội trượt đẹp cho Blogger

Đăng nhập vào Blogger » Bố cục » Thêm tiện ích HTML

Thêm đoạn mã sau đây vào phần nội dung của tiện ích
<div id='social-sidebar'>
   <ul>
    <li>
     <a class='entypo-twitter' href='https://twitter.com/kslzone' target='_blank'>
      <span>Twitter</span>
     </a>
    </li>
    <li>
     <a class='entypo-gplus' href='http://dribbble.com/kslzone' target='_blank'>
      <span>google+</span>
     </a>
    </li>
    <li>
     <a class='entypo-tumblr' href='http://www.tumblr.net/kslzone' target='_blank'>
      <span>tumblr</span>
     </a>
    </li>
<li>
     <a class='entypo-facebook' href='http://www.facebook.net/kslzone' target='_blank'>
      <span>facebook</span>
     </a>
    </li>
        <li>
     <a class='entypo-rss' href='http://feeds.feedburner.com/kslzone' target='_blank'>
      <span>feedburner</span>
     </a>
    </li>
   </ul>
  </div>
<style type='text/css'>
/*<![CDATA[*/
@charset "utf-8";
/* CSS Document */
/* ---------- ENTYPO ---------- */
/* ---------- http://weloveiconfonts.com/ ---------- */
@import url(http://weloveiconfonts.com/api/?family=entypo);
[class*="entypo-"]:before {
 font-family: 'entypo', sans-serif;
}
/* ---------- GENERAL ---------- */
#social-sidebar a { text-decoration: none; }
#social-sidebar ul {
 list-style: none;
 margin: 0;
 padding: 0;
}
/* ---------- Social Sidebar ---------- */
#social-sidebar {
 left: 0;
 margin-top: -75px; /* (li * a:width) / -2 */
 position: fixed;
 top: 50%;
}
#social-sidebar ul li:first-child a { border-radius: 0 5px 0 0; }
#social-sidebar ul li:last-child a { border-radius: 0 0 5px 0; }
#social-sidebar ul li a {
 background: #121212;
 color: #fff;
 display: block;
 height: 50px;
 font-size: 18px;
 line-height: 50px;
 position: relative;
 text-align: center;
 width: 50px;
}
#social-sidebar ul li a:hover span {
 left: 130%;
 opacity: 1;
}
#social-sidebar ul li a span {
 border-radius: 3px;
 line-height: 24px;
 left: -100%;
 margin-top: -16px;
 -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
 filter: alpha(opacity=0);
 opacity: 0;
 padding: 4px 8px;
 position: absolute;
 -webkit-transition: opacity .3s, left .4s;
 -moz-transition: opacity .3s, left .4s;
 -ms-transition: opacity .3s, left .4s;
 -o-transition: opacity .3s, left .4s;
 transition: opacity .3s, left .4s;
 top: 50%;
 z-index: -1;
}
#social-sidebar ul li a span:before {
 content: "";
 display: block;
 height: 8px;
 left: -4px;
 margin-top: -4px;
 position: absolute;
 top: 50%;
 -webkit-transform: rotate(45deg);
 -moz-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 -o-transform: rotate(45deg);
 transform: rotate(45deg);
 width: 8px;
 z-index: -2;
}
#social-sidebar ul li a[class*="twitter"]:hover,
#social-sidebar ul li a[class*="twitter"] span,
#social-sidebar ul li a[class*="twitter"] span:before { background: #6CDFEA; }
#social-sidebar ul li a[class*="gplus"]:hover,
#social-sidebar ul li a[class*="gplus"] span,
#social-sidebar ul li a[class*="gplus"] span:before { background: #E34429; }
#social-sidebar ul li a[class*="tumblr"]:hover,
#social-sidebar ul li a[class*="tumblr"] span,
#social-sidebar ul li a[class*="tumblr"] span:before { background: #1769ff; }
#social-sidebar ul li a[class*="facebook"]:hover,
#social-sidebar ul li a[class*="facebook"] span,
#social-sidebar ul li a[class*="facebook"] span:before { background: #234999; }
#social-sidebar ul li a[class*="rss"]:hover,
#social-sidebar ul li a[class*="rss"] span,
#social-sidebar ul li a[class*="rss"] span:before { background: #f57b05; }
/*]]>*/
</style>
thay toàn bộ kslzone thành các địa chỉ của mạng xã hội của bạn rồi lưu lại tiện ích.

Lời kết

Thanh mạng xã hội này sẽ dẫn khách truy cập đến các fanpage sẵn có của bạn, và mình đã nói rất nhiều về tầm quan trọng của mạng xã hội đến lượng truy cập đến website của chúng ta. Bạn cũng có thể chỉnh sửa lại đoạn mã này để biến nó thành thanh chia sẻ qua mạng xã hội. Nếu có thắc mắc cần hỗ trợ hoặc góp ý về những gì mình nên làm các bạn có thể để lại nhận xét ở phía dưới mình sẽ có gắng giúp đỡ và thu nhận ý kiến của các bạn.

5 bình luận

  1. avatar says

    17:30 Ngày 18 tháng 02 năm 2014

    thanks bác lúc nào cũng ủng hộ blog của em :)

  2. avatar says

    16:09 Ngày 19 tháng 02 năm 2014

    blog chất mà lỵ :)

  3. avatar says

    13:30 Ngày 17 tháng 08 năm 2014

    vào »»http://www.addthis.com/ để làm nhé

  4. avatar says

    10:27 Ngày 11 tháng 04 năm 2016

    Cảm ơn sự chia sẻ của bạn.
    Mình muốn cái thanh trượt này không xuất hiện khi xem bằng mobile thì làm thế nào bạn nhỉ ?

Mọi nhận xét trên blog KslZone.NET sẽ được kiểm duyệt trước khi được xuất bản trên blog. Lưu ý: Nếu bạn để lại backlink về website của bạn, miễn là kèm theo nhận xét hợp lý thì nhận xét đó vẫn sẽ được chấp nhận. Nếu bạn muốn hiện mã HTML thì bạn cần chuyển đổi trước bằng công cụ phía dưới.