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é:

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

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:

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

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

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

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.

Comments

  1. Nutatu says:

    Bác có thể share cho em cái thesis cho em test thử được không nhỉ?

  2. Hùng says:

    Lâu rồi mới thấy Tỉnh viết tips cho thesis.

  3. Minh Tâm says:

    Từ ngày anh Tỉnh quảng cáo cái Thesis, không biết bao nhiêu người cũng chuyển sang Thesis để dùng, nhưng riêng em thì chưa, :smile:
    Em sẽ dùng cái theme mà em đang dùng để SEO cho các bác dùng Thesis bỏ hết cái theme này đi, lướt qua mấy Blog to to cứ lâu lâu lại có một bài về cái này, viết không phải cho mình đọc tức không chịu được :knife:

  4. Anh em blogspot đề nghị blog bác Tĩnh cung cấp nhiều giải pháp hơn cho blogspot. Anh em đang chờ mấy thủ thuật của bác đó nhé! :ekek:

  5. show9vip.com says:

    hay wa , :2clap: :2clap: spam phát

  6. Hai's Blog says:

    Đang đề tài để viết bài cho bác Misao, sao ko nghĩ được đề tài này trước bác nhỉ :smile: :smile: :smile:

  7. LeHienTinh says:

    Cám ơn bác Tỉnh về bài viết. Nhưng thật sự em cảm thấy ngán với các ảnh thumnail. Hok hiểu sao cái host của em load thumnail tốc độ giảm kinh quá.

    Nó giảm đi cỡ 10 lần không có thumnail. :what:

  8. Thủ thuật này HT cũng đã xem qua, nhưng áp dụng thì tốc độ load đúng là khá chậm. Cụ thể là do phần resize của thesis (HT đã bị, minhmeo thì bị ở trang chủ, Cái này HT đoán là vậy, do tắt thumb của thesis thì bình thường) nên HT không dùng cách này. Trước đây thì tự code phần này, dùng phpThumb để resize.
    Lâu lắm mới thấy bác viết tut nhỉ :2:

  9. sao ở trang chủ e nó k hiện thum nhỉ. điên quá. Thôi có khi e lại dùng thêm cũ vậy. Đú theo cái này mà k biết về code mệt phờ cả râu cáo

    • Tran Tinh says:

      Ý bác là hiện thế nào? Nếu muốn đẹp thì nên chẹn thủ công mỗi khi viết bài, chọn lọc hình thật chuẩn. Có nhiều cách dùng hình tự động nhưng em không khoái nhìn xấu kinh hồn :lay_cu:

      • Nhưng làm sao để khi mình tự chọn ảnh đầu tiên để hiện khi khong dùng hàm expert gì gì đó mà dùng readmore để ngắt bài nó vẫn k hiện ? Lại thêm có những ảnh mình lấy từ photobucket làm sao để nó hiện ra trang chủ giống như bác giaiphapso :what:

        • Tran Tinh says:

          Trong thesis có một tính năng trong khi viết bài là Post image và thumbnail image, bạn có thể dùng hình ảnh ngoài để nó hiển thị như của GPS hoặc đeph hơn cũng được.

          Còn phần excerpt thì bạn có thể chỉnh trong thesis options (thesis 1.6) hoặc site options (thesis 1.7) rồi chọn mục Post, chọn Display full post content, như thế là bạn muốn cắt chỗ nào cũng được và read more sẽ hiện ở chỗ đó như trên blogviet đây nè :ekek:

          • uh. chắc dùng bản null, điên cả đầu

            • Hùng says:

              Thesis download trên mạng thì 99% bản thân có cũng như là bản thật vì không cần null như những theme khác

              • Tran Tinh says:

                Thesis sang bản 2.0 nghe nói sẽ có key và activated online nên các bác dùng bản lậu sẽ hết cơ hội, giá bản 2.0 cũng sẽ tăng cao. Đấy là em nghe giặc đồn trên mấy forum, hy vọng là không áp dụng Zend Optimizer như One Theme nếu không cộng động Thesis Viet Nam sẽ chỉ đếm trên đầy ngón tay mất :cry:

  10. Thì thế mới nói chuyện, em đã chọn full rồi, chèn readmore rồi mà k hiện ảnh lên trang chủ, bực cả mình chuyển theme :angry: giờ :(

  11. Cám ơn TỈnh nhiều về lời góp ý cái Popup, cái này hình như do cái tiện ích đếm số lần truy cập bài viết dùng php thì phải, mình vừa gỡ ra, nhờ tỉnh vào lại hộ vnblognet.com check hộ giúp xem nó còn hiện popup không rồi báo giúp mình nhé.

    Cám ơn Tinh tỉnh tình Tinh nhiều :smile: :2: :2:

  12. thấy bài tut THESIS là các bác bàn xum tụ quá, em thua… :bye: :bye: :bye:

  13. Cute Xinh says:

    Hồi trước em thích cái này lắm, nhưng bây giờ thì thôi khỏi, đỡ nặng site :smile:

  14. Sil says:

    Bác chỉ em cách hiện gravatar như dưới footer của bác đi :2:

  15. Rõ là e nghe bác Tỉnh bảo cái theme này do hutek làm hết mà, sao lại k bít nhỉ :an_dam:

  16. hic, bác cũng cho ăn phát vào má còn chi

  17. pác Tỉnh ơi cho em hỏi sao em cài đặt plugin này ko dc vậy !
    em dow bản mới nhất về khi cài đặt rùi làm theo hướng dẫn Settings->Recent posts thì nó hiện thông báo là : Please install the Post Plugin Library plugin. giờ em phải làm sao pác :2:

Chính sách comment: Chúng tôi chân trọng mọi góp ý của độc giả. Tuy nhiên, các góp ý vi phạm chính sách comment sẽ bị xóa hoặc thậm chị bị cấm comment trên blogviet vĩnh viễn. Đề nghị độc giả đọc kỹ chính sách comment trước khi quyết định có góp ý hay không. Xin cám ơn.

Hãy cho biết ý kiến của bạn

*

:smile: :2: :$$$: :stop: :angry: :what: :shutup: :an_tat: :2clap: :ekek: :knife: more »