Floating Sharing Bar kết hợp với nút Back To Top ẩn hiện cho Blogger

Floating Sharing Bar with Back To Top button for Blogger

Sharing bar giờ đây đã trở nên quen thuộc với các Blogger. Hôm nay Iris Tips xin chia sẻ đến các bạn một thanh Sharing bar trược dọc theo website và ẩn khi ở đầu trang khá đẹp, cùng với phong cách flat design hiện đại.

CSS

1Vào Mẫu >> Chỉnh sửa HTML và dán đoạn CSS dưới đây trước thẻ ]]></b:skin>

#sharing{display:none;position:fixed;top:140px;right:23px}
#sharing a{display:block;width:32px;height:32px;margin:2px;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRHVwWXXwkqofIClYqVLcvYiXF9uXDahy-LfmVcmLx2oCqHkl_YcWNxAVp_CnS1UQq2whqEk2X-l1y2PKuRwyin1hvS3b1e8FRMwJ4Rv5UuHtLbGm82AqRnY_jb1Otzc5as-3uXMEFyuB1/s1600/irissharing.png);opacity:0.8}
#sharing a:hover{opacity:1}
#sharing a[type=instagram]{background-position:0 0}
#sharing a[type=stumbleupon]{background-position:-32px 0}
#sharing a[type=evernote]{background-position:-64px 0}
#sharing a[type=email]{background-position:-96px 0}
#sharing a[type=facebook]{background-position:-128px 0}
#sharing a[type=twitter]{background-position:-160px 0}
#sharing a[type=linkedin]{background-position:-192px 0}
#sharing a[type=googleplus]{background-position:-224px 0}
#sharing a[type=pinterest]{background-position:-256px 0}
#backtotop a{display:block;width:32px;height:32px;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9F8TwboU9sXP7edg-dRMcvOHAKDm4-3Xy7SkSWuDvBdMIXgj98JxNOlRcn2xfKYLtZ860YiBmEkPvIjU4DiKs4sa-bde7eKo-xb5J_awuj2qtusL93panSRK8bqwQOfL_YxRHhWGbVn8r/s1600/iristop.png)}
@media (max-width:900px){#sharing{display:none!important}}
#backtotop{position:fixed;right:25px;top:80px;display:none;opacity:.5}
#backtotop:hover{opacity:1.0}
@media(max-width:800px){#backtotop{display:none!important}}

Javascript

2Tìm đến thẻ </body> và dán đoạn script dưới đây vào trước thẻ đó.

<script type='text/javascript'>
$(function() { $(window).scroll(function() { if($(this).scrollTop()>100) { $('#backtotop,#sharing').fadeIn()} else { $('#backtotop,#sharing').fadeOut();}});
$('#backtotop').click(function(){$('html,body').animate({scrollTop:0},1000);return false})});
</script>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'></script>

Note: Nếu trong template đã có thư viện jQuery rồi thì hãy loại bỏ đoạn code

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'></script>

HTML

3Cuối cùng vào Bố cục >> Thêm tiện ích HTML/Javascript và dán đoạn code sau vào

<div id="backtotop" style="display: block;"><a data-scroll="" href="#top"></a></div>
<div id='sharing' style='display: block;'>
<a type='facebook' target='_blank' expr:href='&quot;https://www.facebook.com/sharer/sharer.php?u=&quot; + data:blog.url'></a>    
<a type='twitter' target='_blank' expr:href='&quot;https://twitter.com/home?status=&quot; + data:blog.url'></a>  
<a type='googleplus' target='_blank' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:blog.url'></a>  
</div>

• DEMO

Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.
Chúc bạn thành công!

Created by Iris Tips

• Twitter
• Facebook
• Google+
• LinkedIn
• Pinterest

Iris Tips

Có thể bạn quan tâm