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/AVvXsEhTEmJtZfU3eiWsQQgKuYYmHk-KRU8BfBHlU3HZdBJelacsjgHVk_gUKlZfZE1Hs1cIHDBlJ3vOXKt_Fnbcwp5S1aKNbk6DUpwTJ9a8SWs_YOqA_P0miayy0gqpvJt0l3VYgIJ9ZtViZ3IT/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é ! Nếu bạn cảm thấy hay hãy ấn theo dõi này :)
Đánh Giá Bài Viết Đễ Ad Cải Thiện Nội Dung Chất Lượng Bài Viết
Facebook Google twitter
Từ khóa: Cách, tạo, nút, follow, Facebook, G+, góc, phải, web, blogspot, Cách tạo nút follow Facebook G+ góc phải web blogspot edit
Cùng Chuyên Mục
Bài Viết Mới

Tin Tức Online
Xem Thêm Tất Cả »
Bài Viết Ngẫu Nhiên
  • Tải Ảnh Shaco LOL đẹp nhất làm ảnh nền ảnh bìa Full HD
    16.12.2014 - 0 Comments
    Ảnh Shaco Lol LMHT đẹp nhất làm avatar ảnh nền máy tính.Tải Ảnh Shaco  LOL LMHT làm ảnh bìa ảnh nền -  Tải…
  • Sinh con theo ý muốn Bí quyết sinh con trai con gái theo ý muốn
    14.02.2014 - 0 Comments
    Sinh con theo ý muốn.Bí quyết sinh con trai con gái theo ý muốn.Bí quyết sinh con theo ý muốn theo phong…
  • Tải Ảnh chế ngày Valentine cho FA hài hước bựa nhất
    04.02.2015 - 0 Comments
    Tải Ảnh chế ngày Valentine cho FA hài hước bựa nhất.Tải Ảnh chế ngày Valentine hài hước bựa nhất. Tải ảnh chế…
  • Tải Ảnh Jax LOL LMHT làm ảnh bìa ảnh nền
    04.04.2014 - 0 Comments
    Tải Ảnh Jax LOL LMHT làm ảnh bìa ảnh nền -  Tải Ảnh Jax LOL đẹp nhất -  Bộ Ảnh Jax làm ảnh bìa…
  • Cách phân biệt sạc Iphone Zin, Xịn và hàng Fake
    03.10.2013 - 0 Comments
    Cách phân biệt sạc Iphone Zin, Xịn và hàng Fake.Làm sao để biết sạc iPhone có phải là hàng hính hãng hay…
Copyright © 2016 - All Rights Reserved
Template by Lê Hiển - Powered by Blogger Liên kết: Kênh Tải Miễn Phí