Vũ Phương

Sử dụng Text Widget để trang trí blog WordPress

Posted in Tutorial, Work & Article by Vũ Phương on Tháng Tư 17, 2008

Một điểm rất hay của WordPress.com là nó cho phép người dùng thêm/xóa các Widget bằng cách kéo/thả để trang trí cho blog của mình. Bài viết sau đây tôi sẽ hướng dẫn các bạn sử dụng Text Widget để tổ điểm cho WordPress, ví dụ như khung My Profile và Friend List mà bạn thây trên blog tôi.

Text Widget là gì?

Như mọi Widget khác, Text Widget thêm những phần nội dung mới vào Sidebar của bạn. Điểm khác biệt của Text Widget là nó không có một chức năng cụ thể mà nó phụ thuộc vào quyết định của bạn và nó không có giới hạn cho số lần xuất hiện trên Sidebar.

Text Widget đơn giản là một khung soạn thảo cùng với tiêu đề. Nội dung sau khi soạn thảo sẽ xuất hiện trên Sidebar.

Cách sử dụng Text Widget

Sau khi vào Dashboard của bạn, hãy mở tab Design lên. Ở tab Design, nhấn vào link Widget để hiển thị toàn bộ danh sách các Widget đang có.

Tìm trong danh sách Widget có tên là Text rồi nhấn nút Add để thêm nó vào Sidebar.

Sau khi thêm, bạn có thể kéo thả vị trí cho phù hợp với ý thích của mình. Nhấn vào nút Edit để thay đổi nội dung.

Một khung lớn hơn sẽ xuất hiện bao gồm một text input và một text box. Text Input để nhập tiêu đề, ví dụ như My Profile, Friend List. Trong khi Text Box sẽ nhập nội dung mình muốn vào.

Sau khi hoàn thành, nhấn nút Change tại Text Widget rồi Save Change để WordPress lưu lại các thay đổi và hoàn thành.

My Profile – Thông tin cá nhân

Text Input: My Profile

Text box: Chép đoạn code này vào

<p align=”center”><img src=”http://img181.imageshack.us/img181/7962/459arb8.jpg“></p>
Nguyễn Vũ Phương Anh<br>
Age: 20<br>
Location: Hồ Chí Minh<br>
Work: Báo Thanh Niên, Cyworld
University: Ngoại Ngữ &amp; Tin Học<br><br>

Những chỗ gạch dưới là những chỗ bạn phải thay đổi. Ví dụ, link hình đầu tiên bạn phải đổi thành link hình của bạn. Các phần còn lại thì tùy ý thích.

Friends List – Danh sách bạn

Text Input: Friends List

Text box: Chép đoạn code này vào

<table width=”100%” border=”0″>

<!– Begin List –>

<tr>
<td width=”50%”><a href=”http://trantri.wordpress.com (1a)“><img src=”http://a.wordpress.com/avatar/mrkythien-96.jpg?1208410852 (1b)“></a></td>
<td width=”50%”><a href=”http://chaulkt6m.wordpress.com (2a)“><img src=”http://a.wordpress.com/avatar/chaulkt6m-96.jpg?1208410852 (2b)“></a></td>
</tr>
<tr>
<td align=”center”><b>Trần Trí (1c)</b></td>
<td align=”center”><b>ChAuLkT Le (2c)</b></td>
</tr>

<!– End List –>

[blah... blah]

</table>

Những chỗ gạch dưới là những chỗ bạn phải thay đổi. Ở đây, danh sách được chưa làm 2 cột trong một bảng. Mỗi hàng sẽ chưa 2 người. Có thể tách ra làm 3 thành phần như ví dụ trên:

  • a: Đường dẫn đến blog của người bạn muốn thêm vào
  • b: Đường dẫn đến avatar của người bạn muốn thêm vào. Ở đây mrkythien hay chaulkt6m là tên tài khoản, bạn có thể hỏi người bạn của mình để thêm vào. Còn 96 là 96 pixcel, kích thước thumbnail của avatar.
  • c: Tên của người bạn muốn thêm vào.

Code HTML trên là demo sẵn 2 người. Nếu bạn muốn thêm vào nữa thì cứ copy đoạn code trong tag Beign List & End List rồi Paste vào chỗ [blah... blah], sau đó sửa đổi thông tin lại cho phù hợp.

Dĩ nhiên, đây là một cách làm thủ công, chỉ mang tính mô phỏng là chính. Bạn cũng có thể add thành link trong Blogroll, tuy nhiên tôi nghĩ làm kiểu này sẽ trực quan và đặc biệt hơn.

Chúc bạn những giây phúc vui vẻ khi sử dụng WordPress :)

Tagged with:

53 phản hồi

Subscribe to comments with RSS.

  1. (¯´•.†MewღMew†.•´¯) said, on Tháng Tư 17, 2008 at 10:45 Chiều

    Bim ơi mò cách tạo quick comment đi. em thấy người ta có trang quick comment hay lém T_T

  2. Vũ Phương said, on Tháng Tư 17, 2008 at 10:48 Chiều

    Cho anh link

  3. (¯´•.†MewღMew†.•´¯) said, on Tháng Tư 17, 2008 at 11:09 Chiều

    http://trungtuan.wordpress.com/about/quick-comment/ đó

  4. ChAuLkT Le said, on Tháng Tư 18, 2008 at 8:52 Sáng

    tối send em fát code cái table nha . Lười làm wá ~<

  5. Vũ Phương said, on Tháng Tư 18, 2008 at 12:25 Chiều

    code đã paste lên rồi còn send gì nữa :|

  6. ngaythuhai said, on Tháng Tư 19, 2008 at 2:56 Sáng

    good blog!

  7. Vũ Phương said, on Tháng Tư 19, 2008 at 8:47 Sáng

    Thx ngaythuhai ^_^

  8. drifterus said, on Tháng Tư 21, 2008 at 12:00 Sáng

    hic tạo friend list trong wordpress sao mệt quá! Có cách nào dễ hơn, kiểu chỉ việc add nick như yahoo 360 không hả bạn?

  9. Vũ Phương said, on Tháng Tư 21, 2008 at 12:13 Sáng

    @drifterus: không được đâu bạn, vì WordPress hoàn toàn không có chức năng thiết lập bạn bè như Yahoo! 360.

  10. drifterus said, on Tháng Tư 21, 2008 at 12:55 Sáng

    Huhuhu vậy là lạc trên hoang đảo rồi! Sợ nhà Yahoo sập bất tử nên dọn sang đây, ai ngờ nó vẫn còn là khu quy hoạch treo! Không bạn bè thì làm sao tạo thành cộng đồng được? Nói không bạn bè có hơi quá, nhưng bạn bè kiểu wordpress (hỏi đường dẫn trang, hỏi đường dẫn avatar…) thật bất tiện quá, cứ như thể là phải soi CMND, hộ khẩu trước rồi mới kết bạn ấy!

  11. Vũ Phương said, on Tháng Tư 21, 2008 at 6:39 Sáng

    @drifterus: Vì bản chất WordPress là một blog cá nhân (blogging platform) chứ không phải mạng xã hội (social network) như Yahoo! 360 nên nó không có tính năng này.

    Với WordPress người ta theo dõi blog bạn bè của mình bằng nhiều cách. Tạo RSS, xem bằng chức năng Blog Surfer trong Dashboard hoặc mô phỏng chức năng Lastest from friends như tại đây: http://vuphuong87.wordpress.com/2008/04/19/mo-phong-tinh-nang-lastest-from-my-friend-cua-yahoo-360-trong-wordpress-com/#comment-122

    Còn làm liên kết với bạn thì có thể làm link = Blogroll cũng được, không nhất thiết phải làm như thế này :)

  12. drifterus said, on Tháng Tư 21, 2008 at 10:48 Sáng

    Cám ơn bạn đã thông tin nhiều nha :=)

  13. Vũ Phương said, on Tháng Tư 21, 2008 at 11:25 Sáng

    you’re welcomed :)

  14. doanchi said, on Tháng Năm 2, 2008 at 1:21 Sáng

    Hay quá, cảm ơn bạn đã chia sẻ và cho phép mình sử dụng kỹ thuật bạn đề xuất nhé. Chúc bạn thành công hơn.

  15. Vũ Phương said, on Tháng Năm 2, 2008 at 8:09 Sáng

    Dĩ nhiên rồi doanchi ^^

  16. thienthanxinh said, on Tháng Bảy 16, 2008 at 4:31 Chiều

    Mình làm profile nhưng nó không hiển thị ảnh, có phải là ảnh quá to ? Nó có tự động thu ảnh nhỏ lại cho vừa khổ không ? Ngoài ra, cái photo album của mình link từ Flickr Album qua cũng không bao giờ hiển thị ảnh. Chán ghê !

  17. Vũ Phương said, on Tháng Bảy 17, 2008 at 12:38 Sáng

    @thienthanxinh: bạn lấy đúng link như http://a.wordpress.com/avatar/mrkythien-96.jpg thì nó mới tự resize ảnh. Sao không ra được nhỉ? Bạn thử lấy link rồi dán vào address của trình duyệt xem có ra hình không?

  18. thienthanxinh said, on Tháng Bảy 18, 2008 at 2:28 Chiều

    À không, mình đang nói là ảnh cho profile chứ không phải friend list. Vì ảnh trong profile là link tự do, cho nên mình đưa vào đó ảnh từ Flickr, đã thử link, vẫn chạy tốt. Mình cũng vừa resize xong, nhưng vẫn không được.
    Nếu không phiền, bạn thử xem giúp mình nhé, nội dung đây

    Tên : Nguyễn Hoàng Gia Khánh
    Ngày sinh : 30/06/2003
    Trường : Mầm Non Việt Hoa – Lớp : Lá
    Sở thích : Đọc sách, chơi game giáo dục, vẽ tranh

    Tên : Nguyễn Hoàng Hiểu Quân
    Ngày sinh : 03/05/2007
    Trường : Bà Ngoại – Lớp : Bà Tư
    Sở thích : Lục lọi & phá phách đồ đạc

  19. thienthanxinh said, on Tháng Bảy 18, 2008 at 2:31 Chiều

    Ui trời, mình copy đoạn code vào comment, ai dè post xong là nó hiển thị luôn, mất tiêu cái link ảnh ! Hic ! :(

  20. Vũ Phương said, on Tháng Bảy 19, 2008 at 10:24 Chiều

    Bạn paste thử cái code chèn ảnh của bạn xem. Nhớ cách ra để không nhầm thành HTML tag ví dụ như: < img …

  21. thienthanxinh said, on Tháng Bảy 21, 2008 at 3:21 Chiều

    Link ảnh đây :

  22. thienthanxinh said, on Tháng Bảy 21, 2008 at 3:23 Chiều

    Mặc dù đã cách ra, vẫn bị nhầm html. Mình bỏ bớt 2 dấu nhé :

    img src=”//farm4.static.flickr.com/3111/2517233319_b17c50f21c_m.jpg“”

  23. Vũ Phương said, on Tháng Bảy 21, 2008 at 9:36 Chiều

    theo như code của bạn thì thiếu http: trước cái //farm4… đó

  24. thienthanxinh said, on Tháng Bảy 22, 2008 at 10:52 Sáng

    Đây cũng là vấn đề không hiểu !
    Lúc paste link vào, mình thấy thiếu, đã bổ sung cái http: vào, sau khi save change và xem lại blog thì nó vẫn không hiển thị ảnh. Sau đó, mình trở lại Widget xem thì thấy chữ http biến mất. Mình lại bổ sung và save, vẫn lập lại tình trạng đó.
    Mà thôi, phiền bạn như thế đủ rồi. Mình không gắn ảnh vào profile cũng không sao. Chắc là một hôm đẹp trời nào đó là blog của mình nó vui vẻ trở lại và chịu hiển thị ảnh !!!! Cám ơn bạn đã rất nhiệt tình. Mất thời gian của bạn nhiều quá ! Sorry nhé.

  25. K-Val said, on Tháng Bảy 30, 2008 at 12:44 Sáng

    hình như bạn để dư 1 dấu ” ở cuối cùng nên nó mới thế

  26. dungdt87 said, on Tháng Chín 29, 2008 at 3:36 Sáng

    chi minh cach dua avata len blog voi nhe
    cam on !

  27. Vũ Phương said, on Tháng Chín 29, 2008 at 9:41 Chiều

    @dungdt87: Dùng Text Widget thôi bạn. Bên trên có hướng dẫn mà :D

  28. dungdt87 said, on Tháng Mười 27, 2008 at 8:44 Sáng

    cam on nhe!
    lau nay ban qua nen ko choi blog duoc

  29. pecun_luntun said, on Tháng Mười Một 23, 2008 at 9:40 Sáng

    dashboard la` yh` dzay. ban. chj~ mjnh` dc. hum

  30. Vũ Phương said, on Tháng Mười Một 23, 2008 at 1:19 Chiều

    @pecun: Dashboard là cái trang quản lý của bạn nằm ở địa chỉ /wp-admin/

    ^^

  31. Silentwind said, on Tháng Mười Hai 28, 2008 at 9:09 Sáng

    Cám ơn bạn Phương về những hướng dẫn của bạn nhé, rất hay cho người mới bắt đầu như mình :D .

    Phương cho mình hỏi thêm là cái lỗi không hiện thị ảnh như của bạn thienthanxinh bạn đã tìm ra tại sao chưa thế? Mình cũng bị lỗi như vậy mà mãi không chỉnh đc :( . Nếu bạn tìm ra rồi thì chỉ mình giúp cái nhé. Cám ơn bạn trước nhiều :) .

  32. Vũ Phương said, on Tháng Mười Hai 28, 2008 at 2:06 Chiều

    Theo mình thì do nội dung tag img scr của bạn sai thôi.

    Ví dụ: img src=”http://farm4.static.flickr.com/3111/2517233319_b17c50f21c_m.jpg”

    Là đúng. Như của thienthanxinh bị dư dấu ” nên chắc bị WP nó lọc đi làm cho hiển thị ko đc @.@

  33. Silentwind said, on Tháng Mười Hai 29, 2008 at 9:48 Chiều

    Hic… Liệu chỗ trên có sai chỗ nào không thế bác? :(

  34. Silentwind said, on Tháng Mười Hai 29, 2008 at 9:52 Chiều

    Oh… Cái đoạn code ko hiển thị đc à :P .

  35. Silentwind said, on Tháng Mười Hai 29, 2008 at 9:54 Chiều

    Của mình là như thế này có đúng không bác? :( [Ở ô comment này không post code lên là nó không hiển thị à bác :P ].

    img src=”http://i470.photobucket.com/albums/rr68/Silentwindb/Silentwind/Silentwind.jpg“

  36. Vũ Phương said, on Tháng Mười Hai 31, 2008 at 8:14 Chiều

    vậy là đúng rồi mà, vẫn không hiển thị à @.@

  37. Silentwind said, on Tháng Một 11, 2009 at 4:00 Chiều

    Mình tìm ra nguyên nhân rồi :D . Hóa ra ta phải xóa những dấu nháy kép ” đi và gõ lại thì mới ổn :D .

  38. Maruko said, on Tháng Hai 23, 2009 at 6:27 Chiều

    Bạn ơi, bạn biết cách add thêm widget từ wordpress vào theme có widget ready khong? mình add thêm nhưng những widget ready mất lun. có cách nào giữ lại cả hai k?
    cảm ơn.

    • Vu Phuong said, on Tháng Sáu 19, 2009 at 5:40 Chiều

      Không được đâu bạn. Phải sửa trực tiếp trên file ^^

  39. jackeychon said, on Tháng Tư 26, 2009 at 6:57 Chiều

    CŨng làm như you nhưng ko dc. Comment làm quen nhá.
    Tên : JAck CHon age: 23
    SV: NIIT
    http://jackeychon.wordpress.com

    • Vu Phuong said, on Tháng Sáu 19, 2009 at 5:41 Chiều

      Lỗi gì không được vậy bạn?

  40. aronvn said, on Tháng Sáu 18, 2009 at 4:44 Chiều

    thank phuong nhieu
    http://www.aronvn.co.cc ranh phuong ghe tham chi dan minh ti hen cam on phuong truoc

  41. lamlan said, on Tháng Bảy 21, 2009 at 10:46 Sáng

    Em ơi, cho chị hỏi cách làm giống phần daisypath của em nha? Thanks in advanced!

    • Vũ Phương said, on Tháng Bảy 24, 2009 at 11:19 Sáng

      Dùng Text Widget rồi chèn code của Daisypath thôi chị :)

  42. lamlan said, on Tháng Bảy 24, 2009 at 8:39 Chiều

    Ủa vậy có 2 text widget hả? Để chị thử, cám ơn em nhiều!

  43. lamlan said, on Tháng Bảy 24, 2009 at 10:10 Chiều

    Sao chị làm rồi mà không hiện lên hình mà chỉ có chữ thôi, xem dùm chị nhé!

  44. lamlan said, on Tháng Bảy 24, 2009 at 10:14 Chiều

    Phải dùng image host để úp hình hả em, chị dùng flickr được không?

    • Vũ Phương said, on Tháng Bảy 25, 2009 at 12:36 Sáng

      Chị vào đây reg account http://daisypath.com/ đăng ký ngày này n5o nó sẽ cho chị link tấm hình :D

  45. lamlan said, on Tháng Bảy 27, 2009 at 2:18 Chiều

    Chị làm được rồi cảm ơn em nhiều!

  46. bupbekiwi said, on Tháng Bảy 29, 2009 at 1:43 Sáng

    ôi, mình học được cách làm cái Daisypath giống của bạn mới được…mình thấy quả là dễ thương ý…cám ơn bạn về những chia sẻ rất hay này…mình cũng mới thử làm thôi nên chả rõ gì cả…đang tìm hiểu thấy khó hơn các blog khác nhiều lắm, nhưng mà cũng vui …và học được nhiều điều mới nên cũng hay..:D….wordpress thì buồn thật ấy…chả có bạn bè gì cả mà sao mình nhấn vào ava của ai thì nó cũng chả có link để thăm nhà người đó nữa chứ…thấy lạ lạ sao ý… thôi, bạn vào blog mình xem thử, có gì góp ý với mình với, nếu bạn có thời gian…:D (http://bupbekiwi.wordpress.com)

    • Vũ Phương said, on Tháng Bảy 30, 2009 at 12:43 Sáng

      Bạn có thể đọc bài sau để hiểu rõ hơn về WP: http://vuphuong87.wordpress.com/2009/06/01/ben-do-nao-cho-nguoi-dung-thoi-hau-yahoo-360/

      Mình có ghé qua blog bạn. Dùng WP là thích hợp rồi ^^ Bạn có thể tham gia LinkHay.com, submit link để nhiều người biết đến blog của mình hơn.

  47. kaze1102 said, on Tháng Mười Hai 10, 2009 at 2:44 Chiều

    đang tìm hiểu cái này, thanks bài viết của bạn :) Mà làm thế nào để kết bạn nhỉ :-s

  48. phamvis said, on Tháng Một 2, 2010 at 4:11 Sáng

    thanks


Để lại hồi âm