Font Awesome sự lựa chọn hoàn hảo cho Blogger

Đầu tiên chắc là nhiều người sẽ không biết Font Awesome là gì, do đó mình sẽ giải thích trước. Font Awesome là thư viện cung cấp cho bạn hàng ngàn icon có thể dễ dàng tùy chỉnh mọi thứ bằng css như kích cỡ, màu, bóng đổ, v.v.. Mặc dù có nhiều ưu điểm cực kì hấp dẫn (icon nhìn tốt ở mọi kích cỡ, tốc độ tải cực lẹ,..), nhưng bạn có thể sử dụng nó một cách hoàn toàn miễn phí. Bài viết này mình xin giới thiệu đến các bạn cách sử dụng Font Awesome trên nền tảng miễn phí Blogger.

Font Awesome sự lựa chọn hoàn hảo cho Blogger

Để thêm Font Awesome cũng đơn giãn như mọi thủ thuật nhỏ khác, chỉ cần một vài bước như sau:
Bước 1: Cài đặt vào Blogger

Giao diện tiện ích bài đăng phổ biến đẹp cho Blogger

Đã lâu lắm rồi blog mình chưa chia sẻ những trang trí giao diện mới cho các widget cũng như như một số thành phần nhỏ khác trên Blogger. Hôm nay mình xin chia sẻ cho các bạn giao diện khá đẹp cho tiện ích bài đăng phổ biến. Giao diện này ngoài việc sử dụng CSS để trang trí, nó phải sử dụng thêm Javascript và jQuery để tăng chất lượng cho ảnh thumbnail của tiện ích, nhưng bạn vẫn có thể yên tâm vì nó rất nhẹ không ảnh hưởng nhiều đến tốc độ tải trang.

Bạn có thể xem thủ demo tại đây: http://experimentalabt.blogspot.in/2012/03/hfh.html

Giao diện tiện ích bài đăng phổ biến đẹp cho Blogger

Hiệu ứng phóng to và làm mờ ảnh cho Blogger

Hiệu ứng phóng to và làm mờ ảnh là một trong những việc làm đơn giản nhưng lại khiến cho blog/website của bạn trông hấp dẫn và bắt mắt hơn trong mắt người dùng. Lúc trước mình đã có chia sẻ một hiệu ứng phóng to ảnh

• Hiệu ứng phóng to ảnh khi rê chuột vào cho Blogger

và hôm nay tiếp tục, chia sẻ tiếp một hiệu ứng tương tự đang sử dụng tại blog hiện tại. Ở đây mình cũng sử dụng CSS để làm hiệu ứng này nhưng với đoạn đoạn mã chuyên nghiệp hơn.

Hiệu ứng phóng to và làm mờ ảnh cho Blogger

Bắt đầu thì bạn đăng nhập vào trang Blogger của mình

Tiếp tục vào Mẫu » Chỉnh sửa HTML  tìm đến thẻ ]]></b:skin> thêm đoạn mã sau lên bên trên

.post img:hover {
  -webkit-transform: scale(1.1, 1.1);
  -moz-transform: scale(1.1, 1.1);
  -ms-transform: scale(1.1, 1.1);
  -o-transform: scale(1.1, 1.1);
  transform: scale(1.1, 1.1);
  opacity: 0.5;
}
.post img {
  -webkit-transition-duration: 1.0s;
  /* Webkit: Animation duration; */
  -moz-transition-duration: 1.0s;
  -o-transition-duration: 1.0s;
}

bạn có thể thay đổi 1.1 thành tỉ lệ mà bạn muốn hình ảnh phóng to hoặc thu nhỏ như thế nào với 1 là kích cỡ mặc định của ảnh. Bạn có thể xóa bỏ opacity: 0.5; để bỏ hiệu ứng làm mờ ảnh hoặc thay đổi 0.5 thành tỉ lệ mờ ảnh mà bạn muốn.

Lời kết

Thủ thuật này cũng tương tự như thủ thuật có trước đó, nhưng ở đây mình sử dụng các khác để thay đổi lại tỉ lệ vốn cho của ảnh để phóng to ảnh. Mọi thắc mắc hoặc vấn đề gì liên quan mà bạn không hiểu hoặc cần hỗ trợ bạn có thể để lại nhận xét bên dưới.