Chèn các nút chia sẻ lên mạng xã hội dạng "Lazy Loading" cho Blogspot

Traidatmui.com – Lợi ích của việc chèn các công cụ, các nút để khách truy cập vào web/blog chia sẻ lên các mạng xã hội thì các bạn đã biết ở đây mình không đề cập đến. Bài viết này chỉ chia sẻ cho các bạn 1 trong những cách chèn các nút chia sẻ lên mạng xã hội như Facebook , Twitter , Google+ , LinkedIn , Digg. Cách chèn các nút này thì có rất nhiều cách và ở đây mình chia sẻ cho các bạn 1 cách chèn vào blogspot tối ưu. Tức là khi bạn chèn theo bài viết này thì các nút chia sẻ mạng xã hội này sẽ không được tải về ngay nên giảm được dung lượng tải blog của bạn, đến khi được rê chuột vào thì các nút này mới được tải về. Các nút này ban đầu chỉ là những hình ảnh nút giả không có tác dụng chia sẻ, khi được rê chuột vào các nút mới được tải về nên phần nào giảm được dung lượng khi tải trang.

Hình ảnh các nút chia sẻ minh họa

» Bắt đầu thủ thuật

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. Chèn tiếp code CSS bên dưới vào trước thẻ ]]></b:skin>

.fb-like {display:inline !important;}
#facebook-widget, .twitter-widget, .google-widget, .facebook-widget,#google-widget,#twitter-widget,#digg-widget,#stumble-widget, #linkedin-widget { border-radius:5px;color: #ffffff !important; display: inline-block; line-height: 22px; text-align: center; text-decoration: none;width: 55px;}
#facebook-widget, .facebook-widget { background: #3b5b99; }
#linkedin-widget { background: #069; }
#digg-widget {background:#FDFFB0;color:#716803 !important;}
#stumble-widget {background:red;}
#google-widget, .google-widget { background: #dd4b39; }
#twitter-widget ,.twitter-widget {background: #33ccff;}

5. Chèn code bên dưới vào trước thẻ </body>

<script type='text/javascript'>
//<![CDATA[
var element,script;element=document.getElementById("google-widget");element.onmouseover=function(){this.onmouseover=null;this.parentNode.removeChild(this);script=document.createElement("script");script.async=!0;script.src="//apis.google.com/js/plusone.js";document.body.appendChild(script)};element=document.getElementById("stumble-widget"); element.onmouseover=function(){this.onmouseover=null;this.parentNode.removeChild(this);script=document.createElement("script");script.async=!0;script.src="//platform.stumbleupon.com/1/widgets.js";document.body.appendChild(script)};element=document.getElementById("digg-widget");element.onmouseover=function(){this.onmouseover=null;this.parentNode.removeChild(this);script=document.createElement("script");script.async=!0;script.src="//widgets.digg.com/buttons.js";document.body.appendChild(script)}; element=document.getElementById("linkedin-widget");element.onmouseover=function(){this.onmouseover=null;this.parentNode.removeChild(this);script=document.createElement("script");script.async=!0;script.src="//platform.linkedin.com/in.js";document.body.appendChild(script)};element=document.getElementById("facebook-widget"); element.onmouseover=function(){this.onmouseover=null;this.parentNode.removeChild(this);script=document.createElement("script");script.async=!0;script.src="//connect.facebook.net/en_US/all.js#xfbml=1&appId=133083533456136";document.body.appendChild(script)};element=document.getElementById("twitter-widget");element.onmouseover=function(){this.onmouseover=null;this.parentNode.removeChild(this);script=document.createElement("script");script.async=!0;script.src="//platform.twitter.com/widgets.js";document.body.appendChild(script)};
//]]>
</script>

6. Bây giờ bạn chỉ cần chèn code bên dưới vào vị trí bạn muốn trên blog của mình

<table>
<tr> <td width="100" ><a href="#" id='twitter-widget' >Tweet</a>
<a class='twitter-share-button' data-count='horizontal' data-related="Your-Twitter-Handle" href='https://twitter.com/share' ></a></td> <td width="100" ><a href="#" id='stumble-widget' >Stumble</a>
<su:badge layout="2"></su:badge></td> <td width="100" ><a href="#" id='google-widget' >+1</a>
<span class='g-plusone' data-size='medium' ></span></td> <td width="100" ><a href="#" id='facebook-widget' >Like</a>
<div class='fb-like' data-layout='button_count' data-send='false' >
</div>
</td> <td width="100" ><a href="#" id='digg-widget' >Digg</a>
<a class="DiggThisButton DiggCompact"></a></td> <td width="100" ><a href="#" id='linkedin-widget' >Share</a>
<script type="IN/Share" data-counter="right"></script></td> </tr>
</table>

7. Cuối cùng save tất cả lại là xong

Chúc bạn thành công!

Tham khảo stylifyyourblog.com