3 thủ thuật đơn giản giúp blog bạn trở nên mướt rượt

3 thủ thuật blog này rất cơ bản và đơn giản, bạn không cần phải có quá nhiều kiến thức về code để ứng dụng nó cho blog của mình. Mướt rượt là một từ miền Nam nó có nghĩa là đẹp một cách lả lướt. Thật đúng như cái tựa đề bài viết này nếu như bạn phối hợp cùng lúc cả 3 thủ thuật nó sẽ tạo cảm giác thật nhẹ nhàng uyển chuyển và chuyên nghiệp cho blog. Bây giờ hãy bắt tay vào làm nhé.

Cả 3 thủ thuật đều dùng đến thư viện jquery nên bạn cần chèn thư viện này vào blog. Jquery có rất nhiều ứng dụng nên việc chèn vào là cần thiết. Nếu blog bạn đã có thì bỏ qua bước này.

Tìm đến thẻ </head> và chèn vào ngay trước nó đoạn code

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'/>

1. Scroll to top với hiệu ứng trượt

Có rất nhiều kiểu làm nút trở lên đầu trang ở đây có liệt kê 7 cách tạo nút scroll to top với jquery rất đáng để tham khảo. Hoặc cực kỳ đơn giản là chỉ cần chèn một đoạn code html sau đây vào vị trí mình thích là được.

<a href="#" target="_blank">Top</a>

Cách làm tôi hướng dẫn sao đây vừa dễ làm lại vừa tạo được hiệu ứng trượt tuyệt vời. Đối với blogger bạn mở phần Chỉnh sửa HTML không cần mở rộng mẫu tiện ích tìm đến thẻ </body> ở cuối cùng và chèn vào trước nó đoạn code

<script src='http://blogthietke.googlecode.com/files/scrolltopcontrol-smallblack.js'/>

2. Hiệu ứng tải ảnh tuần tự  thật mượt mà với lazy load images

Hiệu ứng này đặc biệt hữu dụng đối với những blog ảnh hoặc những bài viết có nhiều hình ảnh. Nó giúp cho những blog này hiển thị được mượt mà hơn. Nguyên tắc của nó là không tải tất cả các ảnh cùng lúc mà tải một cách tuần tự khi người đọc từ từ kéo thanh trượt xuống. Thêm một chút hiệu ứng mờ ảo khiến quá trình tải ảnh trở nên thật mượt mà.

Tìm đến thẻ </head> và chèn vào ngay trước nó đoạn code

<script src='http://blogthietke.googlecode.com/files/lazypic.js'/> 
<script charset='utf-8' type='text/javascript'>
$(function() {     
$(&quot;img&quot;)   
.lazyload({
placeholder: &quot;https://lh3.googleusercontent.com/-Z9XhV1m9Jak/T3AqzaLp1EI/AAAAAAAACyw/Y1dC7eoBPxM/s5/eee.gif&quot;,
effect: &quot;fadeIn&quot;});
});
</script>

3. Làm mờ ảo các thành phần trong danh sách (list)

Hiệu ứng này giúp làm nổi rõ thành phần trong danh sách mà bạn rê chuột đến và làm mờ đi những thành phần còn lại của danh sách (xem ảnh). Bạn có thể kết hợp với Cool Popular Post để tạo ra widget bài viết phổ biến đầy màu sắc cực kỳ lung linh.

Tìm đến thẻ </head> và chèn vào ngay trước nó đoạn code

<script src='http://blogthietke.googlecode.com/files/fadelist.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
if(!$.browser.msie) $(&quot;ul li&quot;).hover(function() {$(this).siblings().stop().fadeTo(400,0.4);}, 
function() { $(this).siblings().stop().fadeTo(400,1); });
});
</script>

Thực tế thiết kế blog cũng giống như nấu ăn điều quan trọng của người đầu biết là biết cách phối hợp những gia vị một cách vừa phải để tạo nên món ăn ngon. Trong việc viết blog nếu bạn cũng có thể phối hợp những hiệu ứng với nhau để tạo một cảm giác tuyệt vời cho người đọc.

Nguồn: http://blog.nguoiaolam.net