Thủ thuật tạo widget mạng xã hội đẹp cho Blogspot

Thủ thuật tạo widget mạng xã hội đẹp cho Blogspot, chia sẻ cho các bạn widget mạng xã hội cực đẹp cho blogspot tích hợp Google +, Facebook, Tweeter.

XEM DEMO 

Các tính năng

• CSS Creation. 
• Responsive Style. 
• Thanh lịch & cao cấp Theme. 
• Giống như Facebook, Tweeter theo dõi, Google Plus theo dõi. 
• Dễ dàng cài đặt. 
• Twitter, Google Plus, Facebook Follower Liên kết + số người theo dõi.

Hướng dẫn cài đặt

Bước 1 :

Đăng nhập vào blogger >> template >> chỉnh sửa HTML, tìm đến đoạn code <data:post.body/>

Bước 2 :

Dán đoạn code sau ngay bên dưới nó

<b:if cond='data:blog.pageType == "item"'> <link href='https://googledrive.com/host/0B3omcK7jIprqRm95VVpQZDJHRzQ' rel='stylesheet'/> <div class="wpr"> <a class="social" id="twitter" href="your-twitter-account-link" title=""> <div class="icon"></div> <div class="shutter_frame"> <div class="shutter"> <div class="number">1189</div> <div class="bar"></div> <div class="text">followers</div> </div> </div> </a> <a class="social" id="google" href="your-google-plus-account-link" title=""> <div class="icon"></div> <div class="shutter_frame"> <div class="shutter"> <div class="number">421</div> <div class="bar"></div> <div class="text">+1</div> </div> </div> </a> <a class="social" id="facebook" href="your-facebook-account-link" title=""> <div class="icon"></div> <div class="shutter_frame"> <div class="shutter"> <div class="number">973</div> <div class="bar"></div> <div class="text">Like</div> </div> </div><!-- / .shutter_frame --> </a> </div><!-- / .wpr --> <div style="text-align: right;"> <a href="http://gg.gg/ikz3" rel="nofollow" target="_blank" title="Get This Widget"><span style="font-size: x-small;">get</span></a></div> <br /> </b:if>

Thay link của bạn vào phần mình bôi đỏ 

Bước 3 :

Tìm đến thẻ </body> và dán đoạn code sau ngay bên trên nó

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js' type='text/javascript'/> <script src='//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js'/> <script> $(document).ready(function() { $('.social').hover( function() { $(this).find('.shutter').stop(true, true).animate({ bottom: '-36px' }, { duration: 300, easing: 'easeOutBounce' }); }, function () { $(this).find('.shutter').stop(true, true).animate({ bottom: 0 }, { duration: 300, easing: 'easeOutBounce' }); } ); });
</script>

Bước 4 : 

Lưu template lại và kiểm tra thành quả, không cần chỉnh sửa gì thêm. Chúc các bạn thành công.