Thêm nút Chia sẻ lên Mạng xã hội khi rê chuột vào Hình ảnh trên Blogger

Add Stylish Share Buttons On Image Hover on Blogger

Iris Tips đã từng chia sẻ khá nhiều về Social Sharing Widgets cho Blogger. Nhưng là chia sẻ bài viết chứ không phải các hình ảnh. Hôm nay Iris Tips sẽ chia sẻ cho các bạn thủ thuật tạo nút chia sẻ lên các mạng xã hội khi rê chuột vào hình ảnh trên Blogger, sử dụng thủ thuật này sẽ góp phần làm tăng traffic từ các mạng xã hội cho website của bạn.

Style 1

• DEMO

1Vào Mẫu >> Chỉnh sửa HTML và dán đoạn script sau vào trước thẻ </body>

<script type='text/javascript'>(function(features){var d=document,s=d.createElement('script');s.src='http://widget.symphonytools.com/widget/js/symphony.js';s.type='text/javascript';s.async='true';s.onload=s.onreadystatechange=function(){var rs=this.readyState;if (!rs || /loaded|complete/.test(rs)) try{symphony.init(features);}catch(e){}};var sc=d.getElementsByTagName('script')[0];sc.parentNode.insertBefore(s,sc);})();</script>

Style 2

• DEMO

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

.mpt-share-img {
position: absolute;
top: 5px;
opacity: 0;
left: 10px;
}
.share-mpt-img {
position: relative;
}

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://cdn.slingpic.com/js/slingpic.plugin.js"></script>
<script type='text/javascript'>
jQuery(window).load(function(){
        jQuery("img").slingPic({
            theme: "subtle"
        });
    });
</script>

Chỉnh sửa:

• - Bỏ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> nếu blog bạn đã có thư viện này rồi.
• - Có 3 theme cho bạn lựa chọn đó là

subtle	light	dark

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