Tạo nút follow các mạng xã hội chạy dọc trang

Hôm trước mình có hướng dẫn các bạn cách tạo nút Like FB, G+ chạy dọc trang web. Nay bài viết này mình sẽ hướng dẫn các bạn cách tạo nút follow các mạng xã hội chạy dọc thân trang, có hiệu ứng rất đẹp. Các nút đó bạn có thể thấy ngay cạnh phải trang web của mình.

Các nút follow này sẽ liên kết với các tài khoản (trang) cá nhân của các bạn trên các mạng xã hội lớn như Facebook, Twitter, G+, Pinterest, Youtube hay RSS... Nhằm giúp cho người xem có thể follow bạn một cách dễ dàng nhất.

Hướng dẫn tạo nút follow mạng xã hội:

- Đầu tiên, các bạn cần thêm đoạn CSS này vào trên thẻ </b:skin>:

.social-buttons{position:fixed;bottom:25%;width:45px;z-index:9999}

.button-left{left:0}

.button-right{right:0}

.social-buttons #twitter-btn .social-icon,.social-buttons #facebook-btn .social-icon,.social-buttons #google-btn .social-icon,.social-buttons #rss-btn .social-icon,.social-buttons #pinterest-btn .social-icon,.social-buttons #youtube-btn .social-icon{background-color:#e72828;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwUqlfTYm4AKLkOUOwTOv89hKHwu_PuYFRnij1vRYkPQGkAJ4AIMC3XNCxcZSr_Tdsu4usWq26MAswdX_kM6JqOFyJLYhS4lkNpb1zoKoXz90hKu83YHUNVLPgRHBKI8qG3aVf7PJc2BIp/s1600/mas-icons.png)}

.button-left #facebook-btn span{background-position:right 10px}

.button-left #twitter-btn span{background-position:right -35px}

.button-left #google-btn span{background-position:right -127px}

.button-left #rss-btn span{background-position:right -80px}

.button-right #facebook-btn span{background-position:12px 10px}

.button-right #twitter-btn span{background-position:11px -35px}

.button-right #google-btn span{background-position:10px -127px}

.button-right #rss-btn span{background-position:11px -80px}

.social-buttons #facebook-btn:hover .social-icon{background-color:#3B5998}

.social-buttons #twitter-btn:hover .social-icon{background-color:#62BDB2}

.social-buttons #google-btn:hover .social-icon{background-color:#DB4A39}

.social-buttons #rss-btn:hover .social-icon{background-color:#FF8B0F}

.social-buttons #pinterest-btn:hover .social-icon{background-color:#D43638}

.social-buttons #youtube-btn:hover .social-icon{background-color:#C4302B}

.social-buttons a:hover .social-text{display:block}

.button-left .social-icon{-moz-transition:background-color .4s ease-in 0;-webkit-transition:background-color .4s ease-in 0;background-repeat:no-repeat;display:block;float:left;height:43px;margin-bottom:2px;width:43px}

.button-left .social-text{display:none;float:right;font-size:1em;font-weight:700;white-space:nowrap;margin:11px 40px 11px 0}

.button-right .social-icon{-moz-transition:background-color .4s ease-in 0;-webkit-transition:background-color .4s ease-in 0;background-repeat:no-repeat;display:block;float:right;height:43px;margin-bottom:2px;width:43px}

.button-right .social-text{display:none;float:left;font-size:80%;font-weight:700;white-space:nowrap;margin:11px 0 11px 40px}

.social-buttons .social-text{color:#FFF}

.button-left #pinterest-btn span,.button-right #pinterest-btn span{background-position:11px -177px}

.button-left #youtube-btn span,.button-right #youtube-btn span{background-position:11px -223px}

Bạn có thể tùy chỉnh đoạn CSS này cho đúng ý mình, ví dụ như khoảng cách của button so với top hay bot, chiều rộng, cao của button...

- Tiếp theo hãy thêm đoạn code này bên dưới </b:skin> nhé, chữ share social là mình thêm vào cho dễ khi tìm kiếm thôi.

<!-- share social -->

   <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>

    <script src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js' type='text/javascript'/>  

<script>

    $(window).load(function(){

        $(&#39;.social-buttons .social-icon&#39;).mouseenter(function(){

            $(this).stop();

            $(this).animate({width:&#39;160&#39;}, 500, &#39;easeOutBounce&#39;,function(){});  

        });

        $(&#39;.social-buttons .social-icon&#39;).mouseleave(function(){

            $(this).stop();

            $(this).animate({width:&#39;43&#39;}, 500, &#39;easeOutBounce&#39;,function(){});

        });

    });

</script>

Đoạn js 1.8.3... và 1.9.2... nếu trong code bạn đã có rồi thì có thể bỏ nó đi nhé, trùng cái nào thì bỏ cái đó.

- Cuôi cùng là đặt đoạn code hiển thị này phía trên thẻ </body>

<!-- share social -->

<div class='social-buttons button-right hidden-phone hidden-tablet'>

<a class='itemsocial' href='#' id='facebook-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow Facebook</span></span></a>

<a class='itemsocial' href='#' id='twitter-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow Twitter</span></span></a>

<a class='itemsocial' href='#' id='google-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow Google</span></span></a>

<a class='itemsocial' href='#' id='pinterest-btn' target='_blank'><span class='social-icon'>

<span class='social-text'>Follow Pinterest</span></span></a>

<a class='itemsocial' href='#' id='youtube-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow Youtube</span></span></a>

<a class='itemsocial' href='#' id='rss-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow RSS</span></span></a>

</div>

Trong đó các dấu # là vị trí đường dẫn dẫn đến các trang cá nhân trên các mạng xã hội của các bạn. Nếu bạn muốn để các button này bên trái thì vị trí button-right đổi thành button-left nhé :D

• Xem thêm: Hướng dẫn tối ưu thẻ meta cho trang chủ blogspot

Sau khi kết thúc các phần này, các bạn lưu lại và tận hưởng thành quả nhé. Ngoài ra nếu muốn màu mè, vị trí này nó thì có thể tùy chỉnh hoặc cmt bên dưới để mình chỉ nhé.

Chúc các bạn có một trang web thật đẹp!