Tạo thanh Like + Share mạng xã hội trượt dọc theo website

Social Sidebar Widget for Blogger

Hôm nay Iris Tips sẽ chia sẻ cho các bạn một Social Widget đó là thanh Facebook Like, Google +1 và Tweet Twitter giúp độc giả dễ dàng hơn trong việc chia sẻ các nội dung trên website của bạn lên các mạng xã hội.

• DEMO

CSS

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

.iris-entry-social {position: fixed; bottom: 30%;left: 0px;text-align: center;background: rgba(255,255,255,0.6);padding: 10px 6px;z-index: 1;}
.iris-entry-social li{display:block; margin:5px 0}
.iris-entry-social ul{margin:0; padding:0}

Thêm Responsive cho Sidebar

2 Dán đoạn code phía dưới vào sau đoạn CSS trên

@media only screen and (max-width:640px){
.iris-entry-social {display:none;}}

HTML và Javascript

3 Tìm đến thẻ </body> và chèn đoạn code sau vào trước nó.

<!--Social Iris Sharing Bar-->
<div class='iris-entry-social'><ul>
<li><div class='fb-like' data-action='like' data-layout='box_count' data-show-faces='false'/></li>
<li><div class='g-plusone' data-size='tall'/></li>
<li><a class='twitter-share-button' data-count='vertical' data-lang='en' href='http://twitter.com/share' rel='nofollow'/></li>
</ul></div>
<script type='text/javascript'>
//<![CDATA[
//Facebook Script
(function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(d.getElementById(id))return;js=d.createElement(s);js.id=id;js.src="//connect.facebook.net/en_US/all.js#xfbml=1";fjs.parentNode.insertBefore(js,fjs)}(document,'script','facebook-jssdk'));
//Twitter Script
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
//Google Plus Script
(function(){var s=document.createElement('script');s.type='text/javascript';s.async=true;s.src='https://apis.google.com/js/plusone.js';var x=document.getElementsByTagName('script')[0];x.parentNode.insertBefore(s,x)})();
//]]>
</script>

Tùy chỉnh

a Để đổi vị trí hãy thay đổi bottom: 30%;left: 0px; ở bước 1.

bBạn có thể chỉnh kích cỡ 640px cho phù hợp với thiết kế responsive của blog bạn ở bước 2.

cNếu muốn hiện thêm nút Share Facebook thì sửa đoạn code ở bước 3

<li><div class='fb-like' data-action='like' data-layout='box_count' data-show-faces='false'/></li>

thành

<li><div class='fb-like' data-action='like' data-layout='box_count' data-share='true' data-show-faces='false'/></li>

dNếu muốn widget chỉ hiện ở trang bài viết, ẩn khỏi trang chủ... chỉ cần kẹp đoạn code ở bước 3 vào thẻ điều kiện <b:if>. Bạn có thể tham khảo ở bài viết dưới đây.

Xem thêm: Tổng hợp các trường hợp sử dụng thẻ điều kiện b:if và b:else trong Blogger

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