Hướng dẫn tạo thumbnail cho ảnh với CSS

Người đăng: chisenhungsuutam on Thứ Bảy, 28 tháng 12, 2013

Thông thường khi muốn tạo ảnh thumbnail ta thường dùng cách bóp ảnh lại bằng việc sử dụng các lệnh width, height. Khi bóp ảnh như thế, nếu bóp theo 2 chiều (width và height) thì ảnh thường bị méo dạng (không còn tỉ lệ với ảnh gốc), nếu không muốn gặp hiện tượng này thì chỉ nên bóp theo 1 chiều. Tuy nhiên, ở những phần, ví dụ như tiện ích recent post, các bạn muốn các ảnhthumbnail được đều nhau, và có cùng kích cỡ thì việc bóp ảnh theo 1 chiều không đáp ứng được. Và hôm nay mình sẽ giới thiệu cho các bạn 1 các để lấy ảnh thumbnail từ ảnh gốc mà chỉ cần dùng CSS.

Hướng dẫn tạo thumbnail cho ảnh với CSS
Đọc thêm »
More about

Thêm chức năng Reactions cho bài viết trên blogspot

Người đăng: chisenhungsuutam

Chức năng reactions của blogger cung cấp giúp cho đọc giả thể hiện phản ứng của mình khi xem 1 bài viết nào đó. Chức năng này đã được tích hợp sẵn trong widget "bài đăng trên blog" (Blog1). Nhưng nó thường ở chế độ ẩn (disable), nếu bạn muốn sử dụng nó cho các bài viết của mình thì các bạn phảienable nó lên.


Thêm chức năng Reactions cho bài viết trên blogspot

Bài hướng dẫn này cũng rất cơ bản, và có cũng có nhiều blog đã đăng rồi.


Hình ảnh minh họa :
Thêm chức năng Reactions cho bài viết trên blogspot

Để Enable tính năng reaction các bạn thực hiện các bước như bên dưới:
1. Vào phần thiết kế -> nhấp chọn vào phần chỉnh sửa widget của tiện ích "Bài đăng trên blog"
2. Và click chọn để enable như hình bên dưới :

Thêm chức năng Reactions cho bài viết trên blogspot

- Các bạn có thêm nhiều phản ứng (reaction) để người khác vote bằng cách nhấp vào dòng chữ chỉnh sửa của tính năng Reactions. Sau đó thêm vào, lưu ý là các phản ứng cách nhau bằng dấu phẩy.

3. Save chỉnh sửa lại.

Sau khi save lại và mở bài viết ra để xem thành quả. Và 1 số có lẽ sẽ thất vọng khi nó không hiển thị, các bạn không phải lo lắng. Nó không hiển thị là do template của bạn đã được mod lại (chỉnh sửa). Đa số là code của phần reactions đã bị xóa đi. Để hiển thị nó ta chỉ việc thêm lại phần code của nó là xong.

Sau đây là các bước add lại code của nó:
1. Vào phần thiết kế -> chỉnh sửa HTML -> nhấp chọn mở rộng mẫu tiện ích.
2. Tìm đến dòng code này:


<div class='post-footer-line post-footer-line-3'>
- nếu blog bạn không có dòng này, cũng không sao, bạn có thể tìm đến dòng này :

<data:post.body/>
3. Sau khi tìm được dòng code ở bước 2, các bạn add code của tính năng reactions vào ngay sau dòng code vừa tìm được. Bên dưới là code của nó:
<span class='reaction-buttons'>
<b:if cond='data:top.showReactions'>
<table border='0' cellpadding='0' cellspacing='0' width='100%'>
<tr>
<td class='reactions-label-cell' nowrap='nowrap' valign='top' width='1%'>
<span class='reactions-label'>
<data:top.reactionsLabel/></span></td>
<td><iframe allowtransparency='true' class='reactions-iframe' expr:src='data:post.reactionsUrl' frameborder='0' name='reactions' scrolling='no'/></td>
</tr></table>
</b:if>
</span>
4. Save template lại. và mở lại xem bài viết để thấy kết quả.
                                                                                               Theo: Fandung

More about

Hướng dẫn chèn link Google Search vào footer của bài viết

Người đăng: chisenhungsuutam


Hướng dẫn chèn link Google Search vào footer của bài viết
Ở thủ thuật này, theo như yêu cầu, mình sẽ tạo 1 link text nhỏ ở dưới mỗi bài viết. Khi click vào link này thì lập tức sẽ mở ra 1 cửa sổ mới của trang Google với nội dung tìm kiếm chính là tiêu đề bài viết mà bạn đang xem. Như yêu cầu thì tiện ích sẽ thay thế cho việc copy tiêu đề bài viết và dán vào google để tìm kiếm. Thủ thuật này cũng là 1 cách để cho các bạn có thể kiểm tra xem bài biết của bạn đứng thứ bao nhiêu trong kết quả tìm kiếm của google (với từ khóa chính là tiêu đề bài viết).

Sau đây là các bước thực hiện :
Đọc thêm »
More about

Bảo mật data blogger

Người đăng: chisenhungsuutam



Bảo mật data blogger
Vấn đề này tuy cũ và nhiều người biết nhưng lại không thấy ai nhắc đến khiến một số bạn mới tham gia Blogger nản lòng khi bị người khác Rip mất data, mất đi công sức bao lâu. Nay mình xin hướng dẫn cho các bạn chưa biết để bảo vệ data của chính mình.

Hiện tại Google Chrome có thể view data các bạn thông qua RSS chính vì vậy ta sẽ tùy biến cách hiện thị RSS của blogger để ko hiện thị toàn bộ nội dung bài viết.

Trước tiên bạn cần vào Cài đặt -> Nguồn cấp Trang Web -> Cho phép Nguồn cấp dữ liệu Blog -> Chọn: Cho đến dấu ngắt.
Vậy là xong  từ bây giờ khi post bài nếu ở chế độ HTML chỉ cần thêm <!--more-->  vào giữa bài viết hoặc trên cùng nội dung bài viết.
Còn nếu post ở chế độ WYSIWYG thì bạn có thể sử dụng ngay nút redmore của blogger để ngăn cách


 Bây giờ hãy xem lại RSS của bạn sẽ thấy sự  khác biệt : http://tenmiencuaban/rss.xml
Ngoài ra để tùy chình nút  Đọc thêm » khi view rss bạn hãy vào Thiết kế ->Phần tử Trang -> Bài đăng trên Blog -> Chọn Chỉnh sửa và thay bằng nội dung muốn hiện thị.
Ví dụ: Click vào đây để xem tiếp... hoặc  Click vào đây để xem bộ phim này... v.v...
Bây giờ RSS blog của bạn đã hiện thị 1 cách đẹp và chuyên nghiệp hơn, không còn lo sợ người khác Rip data nữa rồi. 

                                                                                                     Theo: fandung.
More about

Tạo các Tab nội dung trên cùng một Widget

Người đăng: chisenhungsuutam on Thứ Năm, 26 tháng 12, 2013


Đây là một Tab đa tập lệnh cho phép bạn tổ chức thường xuyên nội dung blog (WEB) vào một thẻ giao diện, với nội dung mong muốn xuất hiện khi nhấn vào tab đó, với việc này bạn có thể tiết kiệm không gian của blog(web) của bạn. Code sử dụng CSS và Javascript, và code còn hỗ trợ tính năng thẻ tab được chọn mặc định, tự động chuyển sang thẻ khác với thời gian được chọn sẵn.

Ở đây mình giới thiệu 3 lọai tab:
A. Loại 1:
Hình minh họa:
Tạo các Tab nội dung trên cùng một WidgetCode:

Đọc thêm »
More about

Tạo Menu ngang với hiệu ứng xổ menu con theo hàng ngang

Người đăng: chisenhungsuutam


Bài viết hôm nay mình xin được giới thiệu một style khác trong menu dạng phân cấp. Đó là menu sổ 1 hàng ngang, kèm theo hiệu ứng đóng mở menu con khi click chuột.

Xem hình minh họa:
Tạo Menu ngang với hiệu ứng xổ menu con theo hàng ngang
Như các menu khác, menu này cũng gồm 3 phần : Code Javacode CSS, vàcode HTML
Trước tiên bạn download gói hình ảnh này về : FD-img.rar rồi up lên host lấy link để dùng cho code CSS.

Đọc thêm »
More about

Tạo hiệu ứng mô tả cho link liên kết trên blog

Người đăng: chisenhungsuutam


Ở các thủ thuật trước mình có hướng dẫn các bạn tạo hiệu ứng mô tả chỉ dùng CSS, ở bài viết này mình sẽ giới thiệu việc tạo hiệu ứng mô tả dùng JS. Với thủ thuật này thì popup mô tả sẽ di chuyển theo con chuột, không như cách ta dùng CSS, popup chỉ hiển thị ở 1 vị trí cố định.

Hình ảnh minh họa:
Tạo hiệu ứng mô tả cho link liên kết trên blog

Sau đây là các bước thực hiện :
1. Vào bố cục
2. Vào chỉnh sửa code HTML
3. Chèn đoạn code bên dưới vào trước thẻ đóng </head>

Đọc thêm »
More about