Hướng dẫn tạo nút Follow,G+ góc phải Blog , Website

Hướng dẫn tạo nút Follow, G+ ở góc phải Cho Blogsport, Web,..

Thủ Thuật Blogsport

Blog giờ đây đã trở nên phổ biến và được nhiều người sử dụng để kinh doanh.Cùng với đó có vô vàn những tiện ích hay cho blogsport trên mạng như cho blog từ đơn điệu trở nên chuyên nghiệp hơn rất nhiều Và Hôm nay mình xin Chia sẻ với các bạn code cho blog ,code tạo nút follow đẹp cho blog,website ....tăng tính thẩm mĩ ,tiện ích cho blog,website .

DEMO : Tạo nút follow < code blog hay >

Chúng ta hãy cùng tạo nút Follow,+,Facebook góc phải Blog

Bước 1 : Các bạn thêm đoạn code dưới đây vào trước thẻ đóng ]]></b:skin>

Ai biết về CSS thì có thể tự mình sửa lại theo ý bạn 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/AVvXsEhbdsul3tJqjhnRlsYzL4rtwyBLlZbjZIOEZWnaMcpl52OfHLAu7BU8uAR5-fwrct8btWtr41EWLC1ItSE9eSkrNCZf4jIv7bAIXifoEze48b18MReGZDxCEhtrU9Pa7n-Co69YVG2d3H-z/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 đoạn code dưới đây vào phía dưới thẻ   ]]></b:skin>

Bạn chú ý : Nếu code blog của bạn có đoạn code màu đỏ như sau :

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

Thì các bạn xóa đi nhé Vì trong đoạn code dưới đã có rồi tránh việc trùng lặp dẫn đến việc không thành công .

<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(){ $('.social-buttons .social-icon').mouseenter(function(){ $(this).stop(); $(this).animate({width:'160'}, 500, 'easeOutBounce',function(){}); }); $('.social-buttons .social-icon').mouseleave(function(){ $(this).stop(); $(this).animate({width:'43'}, 500, 'easeOutBounce',function(){}); }); }); </script>

Bước 3 : Thêm đoạn code ở khung phía dưới vào trước 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>

Như vậy là xong các bạn hãy lưu lại và ra xem thành quả nhé .
Chúc các bạn thành công .
Và còn rất nhiều thủ thuật hay khác cho blogsport như Cách Chèn Thêm Khung Comment Facebook Vào Blog hay Tạo hiệu ứng trỏ chuột Cực đẹp cho Blog Các bạn hãy tự khám phá nhé .
Key: Thủ thuật blog,kiến thức seo,code hay cho blog 

Browse More Articles

Tweet

Written by Admin

We are Creative Blogger Theme Wavers which provides user friendly, effective and easy to use themes. Each support has free and providing HD support screen casting.