 |
| Floating Social Bookmark trượt đẹp cho blogspot |
Tiện ích (widget) này bao gồm các liên kết đến các mạng xã hội nổi tiếng hiện nay như: Facebook, Twiter, Google+, Pinterest, Youtobe và có một liên kết rss feed giúp độc giả theo dõi các bài viết của bạn. Bình thường tiện ích này ẩn chỉ hiện các button của các mạng xã hội, và các liên kết sẽ hiện ra từ từ khi ta di chuột vào các icon đó. Để giảm thiểu tối đa việc sử dụng các file javascrip do vậy blog mình xin chia sẽ cách sử dụng các mã CSS và hiệu ứng css spriter với một hình ảnh icon duy nhất cho các mạng xã hội để giảm requet kết hợp với thư viện Jquery do vậy rất mượn mà không gấy ảnh hưởng đến mức độ tương tác của trang web.
1. Đăng nhập vào tài khoản Blogger
2. Vào phần Mẫu (Template)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Thêm đoạn mã bên dưới vào sau thẻ ]]></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;
}
.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;
}
|
5. THêm đoạn mã bên dưới vào trước
thẻ </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(){
$('.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> |
- Nếu
blog của bạn đã có thư viện jquery rồi thì hãy xóa file màu xanh đi.
6. Thêm mã bên dưới vào trước thẻ đóng </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
các phần màu xanh thành các id của bạn tương ứng.
7. Lưu lại là oke!.
Chúc thành công!.
