Floating Social Bookmarking mới hiệu ứng trượt đẹp cho Blog
Thời gian qua mình cũng bận nhiều nên hôm nay có thời gian viết tip này hướng dẫn cách thêm các nút chia sẻ qua mạng xã hội.
Demo thì nằm ngay bên phải blog của mình rồi đó.
Floating Social Bookmarking là gì?>
Đơn giản nó là khung hiển thị các mạng xã hội nhằm chia sẻ các bài viết hay mà bạn thích chia sẻ cho người khác lên các mạng xã hội như Facebook, Google+…
Tác dụng Floating Social Bookmarking ảnh hưởng tích cực tới seo?
Thứ nhất: cách hiển thị trượt dọc theo blog nên nhìn rất đẹp và bắt mắt làm cho blog thêm sinh động.
Thứ hai: cơ hội bài viết của bạn được bạn đọc chia sẻ, quảng cáo và đánh giá khi bạn đọc ghé thăm blog.
Thứ ba: chưa nghĩ ra 
Hướng dẫn thêm Floating Social Bookmarking vào blogspot
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. Đặt mã CSS sau đây trên ]]></b:skin>
Cái này các bạn có thể điều chỉnh độ cao cách trên và cách dưới là bao nhiêu phù hợp với bạn
Dành cho những bạn biết chút css là có thể sửa được
[css]
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;
}[/css]
Bước 5:
Thêm javascript jquery để tạo hiệu ứng khi di chuột qua
đặt code sau vào trước </head>
Chú ý: nếu bạn đã có jquery.min.js rồi thì không phải thêm vào nữa
<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>[/php]
Bước 6 chèn code hiện thị ra ngoài blog
hãy đặt đoạn mã HTML dưới đây trước khi </ body> :
Nhớ thêm url tùy theo của bạn nhé
Thay vào chỗ href=’https://www.facebook.com/your FB’
[php]
<div class=’social-buttons button-right hidden-phone hidden-tablet’>
<a class=’itemsocial’ href=’https://www.facebook.com/<b>YOUR FB</b>’ 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/<b>YOUR TWITTER</b>’ 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/<b>YOUR G+</b>’ 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/<b>YOUR ID</b>’ 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/<b>YOUR ID</b>’ 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/<b>YOUR feed</b>’ id=’rss-btn’ target=’_blank’><span class=’social-icon’><span class=’social-text’>Follow via RSS</span></span></a>
</div>
[/php]
Lưu mẫu vào quay lại blog của mình thưởng thức ngắm nghía cho đã mắt
Có thế thôi nếu có gì thắc mắc cư commnet bên dưới mình sẽ trả lời .
Các bình luận
