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 hiệ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).
Với việc bổ sung jquery, nếu bạn đặt con trỏ trên một trong những biểu tượng xã hội đánh dấu, ông sẽ đi ra từ từ, nhẹ nhàng như một Khach công chúa ra khỏi cung điện, đó là do tác động của việc nới lỏng về hiện jquery-ui.min . Bên cạnh đó tôi thêm giảm bớt hiệu ứng trên widget này, cũng như các loại phương tiện truyền thông xã hội mà tôi đặt hơn. Trong mẫu Johny Ribet hoặc Pakdhe Johny chỉ có 4 loại, thời gian này tôi đã thêm một phương tiện truyền thông xã hội phụ tùng Pinterest và Youtube để làm cho nó hoàn chỉnh hơn. Đây là các bước :
- Đăng nhập vào Blogger
- Đăng nhập vào mẫu >> Chỉnh sửa HTML (đánh dấu mở rộng mẫu tiện ích )
- Đặ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;
}
<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(){
$('.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>
- Thư viện jquery cho màu xanh ở trên, nếu mẫu bạn đang sử dụng đã được cài đặt,
- Các widget cuộc gọi tiếp theo, 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> - Thay thế các từ trong xanh ở trên, với mỗi ID không nên bị nhầm lẫn với các ID người hàng xóm.
- Cuối cùng, Lưu Templates
Vâng đó là một hướng dẫn để làm nổi xã hội đánh dấu với giảm bớt những ảnh hưởng của trả lời câu hỏi Muhammad Farhan . Nếu có kebangeten ít rõ ràng .. eh xin vui lòng để lại tin nhắn trên hộp bình luận ở phía dưới. Bất cứ hình thức bình luận của bạn sẽ được đánh giá cao, nhưng xin vui lòng không spam.
