Cách tạo nút follow Facebook G+ góc phải web blogspot

Tạo nút follow Facebook G+ góc phải web blogspot. Cách tạo nút follow Facebook G+ bên phải màn hình cho web blog. Code Tạo nút liên kết Fanpage Facebook G+ góc phải web blogspot

Qua bài viết này mình xin chia sẻ với các bạn các để có thể tạo Tạo nút follow Facebook G+ góc phải web blogspot có thể cải thiên tốt hơn việc load trang web

Tạo nút follow Facebook G+ góc phải web blogspot


Bước 1: Thêm code dưới lên trên thẻ đóng ]]></b:skin>

- Ai am hiểu về CSS có thể tự chỉnh sửa lại để có thể theo đúng ý nhé.

.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/AVvXsEgj7wBtBYoMS1owv35a0h_ru6zs0y0y5MUV4HX56V2vbJSXU2vS5KJRqiM652OmG7obw6zcZYaLbNU1Az47WeqGIOF1cKpFzTQFRvgWyq9KRi267L_xwGtWND5Nd4IWjygejcGbg648Zyf9/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ước 2: Thêm code Javscipt này xuống dưới thẻ đóng ]]></b:skin>

- Lưu ý: Hai link mình tô màu đỏ nếu trên web bạn đã có code này rồi thì xóa đi né trùng cái nào thì bỏ cái đó tránh dẫn đến xung code khiến bạn làm ko thành công được

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

Bước 3: Thêm code dưới vào lên trên thẻ đóng </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>

Các bạn nhấn lưu vậy là xong và ra web blog của bạn xem thành quả ra sao. Nếu gặp khó khăn gì cần giúp thì để lại commetn nhé !