Tạo Cột button mạng xã hội thụt ra thụt vào bên trái blogspot/blogger

Tweet

[tintuc]  
Do hạn chế tối đa việc sử dụng javascript, tôi vô tình đã làm cho nó tiện ích đơn giản mà không cần sử dụng một hiệu ứng đặc biệt với những hậu quả của việc sử dụng hình ảnh để định hình nó ngày càng nhiều vật dụng.

 Vâng, lần này tôi sẽ đưa ra một hướng dẫn hoặc làm thế nào để tạo một widget đánh dấu trang xã hội nổi với thư viện jquery và ảnh hưởng của nhiên nới lỏng thêm với việc sử dụng hình ảnh ít hơn (chỉ một). 



Cách thực hiện:



1. Đăng nhập vào Blogger
2. Đăng nhập vào mẫu >> Chỉnh sửa HTML (đánh dấu mở rộng mẫu tiện ích )
3. Đặt mã CSS sau đây trên ]]> </ b: skin> :
   
   

   .social-buttons {
       position: fixed; 
       top: 130px;
       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: #33353B;
       background-image: url(http://1.bp.blogspot.com/-KOzIiYFlBAk/UUmLwwZSs-I/AAAAAAAAAnA/h6G772N3cpI/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-left #pinterest-btn span {
       background-position: 11px -177px;
   }
   .button-left #youtube-btn span {
       background-position: 11px -223px;
   }
   .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;
   }
   .button-right #pinterest-btn span {
       background-position: 11px -177px;
   }
   .button-right #youtube-btn span {
       background-position: 11px -223px;
   }
   .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 0.4s ease-in 0s;
       -webkit-transition: background-color 0.4s ease-in 0s;
       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: bold;
       margin: 11px 40px 11px 0px;
       white-space: nowrap;
   }
   .button-right .social-icon { 
       -moz-transition: background-color 0.4s ease-in 0s;
       -webkit-transition: background-color 0.4s ease-in 0s;
       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: bold;
       margin: 11px 0 11px 40px;
       white-space: nowrap;
   }
   .social-buttons .social-text {
       color: #FFFFFF;
   }

   
   

   - đặt code sau vào trước </ head>

   
   

   <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/><script src='http://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>
   
   
   - Hãy đặt đoạn mã HTML dưới đây trước khi </ body> 
   
   
   <div class='social-buttons button-right hidden-phone hidden-tablet'>
   <a class='itemsocial' href='https://www.facebook.com/your FB' id='facebook-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Facebook</span></span></a>
   <a class='itemsocial' href='https://twitter.com/your twitter' id='twitter-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Twitter</span></span></a>
   <a class='itemsocial' href='https://plus.google.com/your G+' id='google-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Google</span></span></a>
   <a class='itemsocial' href='http://pinterest.com/your ID' id='pinterest-btn' target='_blank'><span class='social-icon'>
   <span class='social-text'>Follow via Pinterest</span></span></a>
   <a class='itemsocial' href='https://www.youtube.com/user/your ID' id='youtube-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Youtube</span></span></a>
   <a class='itemsocial' href='http://feeds.feedburner.com/your feed' id='rss-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via RSS</span></span></a>
   </div>
[/tintuc]