Thủ Thuật Thesis: Tạo Hình Ảnh Cho Các Bài Mới Đăng Trên Sidebar

Đây là bài viết mà blogviet đã nợ nhiều bạn khá lâu và hôm nay mới làm được. Thủ thuật này mình đã nhận được rất nhiều yêu cầu của các bạn yêu thích Thesis theme trong và ngoài nước. Hy vọng các bạn sẽ có một danh sách các bài mới đăng đẹp với những hình ảnh sống động.

Thủ thuật này không phải là thủ thuật đang áp dụng trên blogviet mà nó đang áp dụng trên trang eBlogTip dot Com của mình. Để cho dễ hiểu, các bạn có thể xem hình ảnh dưới đây để biết thêm chi tiết nhé:

Thủ thuật Thesis theme

Bây giờ thì các bạn đã rõ, xin đi ngay vào cách thức triển khai nhé. Trước khi triển khai, bạn cần 1 plugin của tác giả Rob Marsh có tên Recent Post. Download và kích hoạt plugin này lên nhé. Sau đó làm theo các bước sau:

Bước 1:

Chèn đoạn code sau vào mục Output của plugin vừa mới kích hoạt. Bạn chỉ cần mở Settings->Recent posts và chọn tab Out như hình sau:

Thủ thuật Thesis: Chèn code

Bạn chèn đoạn code dưới đây vào mục khoanh đỏ như hình rồi lưu lại:

<p>
<img src="{custom:thesis_thumb}" width="40" height="40" alt="" />{link}
<div class="clear"></div>
</p>

Kích thước mình đặt là 40x40px và bạn có thể tăng hay giảm tùy theo kích thước sidebar của blog mình sao cho đẹp mắt.

Bước 2:

Để trang trí sao cho hình ảnh được hiển thị ngay ngắn và đúng như hình minh họa ở trên, bạn cần thêm một bước nữa. Bạn chèn đoạn css sau vào file custom.css trong Thesis nhé:

/* Thesis Recent post with thumbnails */
#recent-posts img {
border:0.2em solid #1F1F1F;
float:right;
margin:0 0.5em 0.3em 0;
}
.clear { clear: both }

Đoạn code trên sẽ định vị hình ảnh thumbnail vào đúng vị trí cần hiển thị. Bạn có thể cho hình ảnh hiển thị bên trái hay bên phải tùy ý bằng cách thay Right thành Left mà thôi.

Bước 3:

Thế hình ảnh đại diện đó lấy từ đâu? Thông thường các designer sẽ thêm các hàm để tự lấy ảnh trong bài viết với một tỷ lệ nhất định. Tuy nhiên, tự động sẽ không bao giờ đẹp bằng tự chèn hình ảnh mình yêu thích cho mỗi bài viết. Để các hình ảnh đại diện hiển thị đẹp mắt, khi đăng bài bạn hãy chọn một hình ảnh đại diện đẹp, khích thước phù hợp thì các hình thumbnail trên sidebar sẽ đẹp hơn.

Bạn chỉ cần điền link tới hình ảnh mà bạn thích thì nó sẽ tự động hiện trên sidebar. Mình áp dụng cách này nên các hình ảnh luôn đẹp và bắt mắt. Nó còn hiện thị trên trang chủ cho dù bài viết không có hình ảnh. Cách lấy ảnh tự động sẽ không hiển thị ảnh hoặc chỉ hiển thị ảnh mặc định nếu bài viết chỉ có chữ.

Chèn link hình ảnh trong Thesis

Với 3 bước như trên, bạn đã có một trang chủ bắt mắt và một sidebar đẹp như mong muốn trên nền tảng Thesis rồi. Nếu các bạn đang tìm thủ thuật liên quan đến thesis thì hãy xem thêm top 10 thủ thuật cho thesis theme mà blogviet đã từng chia sẻ để biết thêm hoặc để lại comment các thủ thuật mà bạn yêu thích hoặc muốn triển khai nhé.

Chúc các bạn thực hiện thành công

About Tran Tinh
Blog Kiếm Tiền là trang blog cá nhân chuyên viết về kiếm tiền trên mạng, thủ thuật blog, internet marketing, affiliate marketing, thủ thuật SEO, thông tin công nghệ nhằm góp phần xây dựng một cộng đồng Blogger Việt hùng mạnh. Đăng ký nhận tin RSS để không bỏ lỡ các tin cập nhật.

Follow me on Twitter · Visit my website →