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.
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.
