Thủ thuật blog

Để đến được địa chỉ mà bạn đang xem (nhanh nhất) thì hãy đánh cụm từ: TuoitreOnline.wordpress vào google nhé. Luôn đón chờ các bạn ghé thăm.

Dưới đây là một số code cơ bản giúp bạn trình diễn chữ, hình ảnh và âm nhạc, phim một cách chuyên nghiệp trên Text, Posts và Blog nói chung.

(nếu các pro. thấy trang này thì có thể bỏ qua vì very basic!)

Trang này rất thuận tiện cho tôi trong việc trình bày weblog, vì nó đã được dựng sẵn nên không cần phải nhớ các code được viết như thế nào bằng HTML, chỉ cần tìm đến trang Thủ thuật blog và copy các đoạn code màu đỏ này. Bạn có thể copy các code này trong Write Post khi bạn chuyển đổi qua lại giữa Visual và HTML).

Visual - HTML

Các bạn mới làm quen với wordpress sẽ bỡ ngỡ Text là ở đâu? dùng để làm gì?. Cũng xin trình bày luôn cho các bạn hình dung:

Text: là một modul được phép trình bày bằng văn bản và HTML (Arbitrary text or HTML). Bạn nhìn sang bên tay trái, bạn có thể click theo link: Appearance/Widgets/Text->add (sẽ được thêm vào sidebar 1 or 2). Khi copy các code dưới đây vào Text rồi thì nhớ bấm save changes.

Những gì tôi tùy biến ở hai cột bên tay phải và trái đều dùng Text. (ví dụ: 108 tiếng chuông, hình ảnh avata…).

Text

Blog: là đề cập đến bất khì phần nào liên quan đến soạn thảo cho phép paste code HTML (phần soạn thảo gồm: Posts hay tạo các thẻ ở trên cùng của trang “Pages“).

Tất cả code được viết dưới đây đều sử dụng được cho: wordpress, yahoo, opera, blogger…

Trước khi thực hiện những tùy biến này bạn phải vào vùng soạn thảo của text hay blog có lựa chọn thẻ View HTML.

Tùy biến với từ và cụm từ

1. Làm chữ đậm

<strong>Chữ cần làm đậm</strong>

Vd: <strong>Chữ in đậm</strong> sẽ thành: Chữ in đậm

2.  Làm chữ nghiêng:

<em>Chữ cần làm nghiêng</em> sẽ thành: Chữ cần làm nghiêng

3. Làm chữ đậm và nghiêng:

<strong><em>thêm chữ vào đây</em></strong> sẽ thành: Thêm chữ vào đây

4. Liên kết đến một trang web khác thông qua một từ hay cụm từ (copy đoạn code trong hai dấu /*…*/)

/*<a href=”http://tuoitreonline.wordpress.com/thủ-thuật-blog”>cụm từ cần liên kết </a>*/

Vd: muốn trỏ nội dung đến trang thủ thuật blog của tuoitreonline.wordpress.com cho cụm từ “thủ thuật blog”.

/*<a href=”http://tuoitreonline.wordpress.com/thu-thuat-blog/”>/a>*/ thì sẽ thành: thủ thuật blog.

Cách làm trên sẽ mở link trên trang bạn đang xem, để tránh tình trạng này (bạn muốn xem trên một New tab-trang khác) bạn thêm cụm từ : target=”_blank”. Nhớ đánh cụm từ này cách xa dấu (“) một khoảng trắng.

Vd: <a href=”http://tuoitreonline.wordpress.com” target=”_blank”> tuoitreOnline </a>

Cách copy Link:

Cách 1 : đưa chuột vào cụm từ “Thủ thuật blog” cho chuột hiện hình bàn tay->bấm phải chuột->chọn lệnh : “Copy Link Location”. Coi như bạn copy xong Link của trang “thủ thuật blog”.

Cách 2 : xem trên phần đánh địa chỉ web (adress), các chữ bắt đầu bằng http://… thì nguyên cả dãy đó là link. Bạn chỉ cần copy đoạn địa chỉ đó cho nguyên trang bạn đang xem.

5.  Đưa từ hay cụm từ vào giữa trang Text:

<p style=”text-align: center;”>cụm từ cần đưa vào…</p>. Xem trình bày ở dòng dưới.

cụm từ cần đưa vào giữa

6. Muốn căn lề trái, phải và đều hai bên thì chỉ cần thay từ center bằng các từ left, right hay justify vào code trên.

7. Gạch chân dưới từ hay cụm từ

<span style=”text-decoration: underline;”> gạch chân dưới từ Weblog</span> sẽ thành: Weblog

8. Chữ đậm có tô màu

<span style=”color: #ff6600;”><strong>chữ cần tô</strong></span> sẽ thành: chữ cần tô

9. Phóng to chữ : bạn chỉ cần thêm code

<hn> phông chữ </hn>, thay chữ n bằng số tự nhiên 1, 2, 3, 4, …

số 1: phông lớn nhất

Phông chữ

số 2: phông lớn vừa

Phông chữ

số 3: phông nhỏ hơn, trung bình

Phông chữ

số 4: phông nhỏ

Phông chữ

số 5 : phông rất nhỏ

Phông chữ

số 6 : phông nhỏ nhất

Phông chữ

Phông address /*<address> phông chữ</address>*/ sẽ thành :

phông chữ

10. Dòng lùi vào một tab nằm trong khung nền màu cam nhạt thường thấy khi đăng bài.

<blockquote>dòng lùi vào một tab</blockquote>

11. Đánh số thứ tự cho từng dòng xuống hàng bằng enter, có tô màu (color) và độ lớn phông là n = 3.

<ol>
<li>
<h3><span style=”color: #ff6600;”><strong>dòng đánh số và tô màu</strong></span></h3>
</li>
</ol>

vd:

1. dòng đầu tiên.

2. dòng thứ hai.

12. Đánh dấu  o cho từng dòng xuống hàng bằng enter

<ul>
<li>dòng cần đánh dấu</li>
</ul>

Vd :

  • đánh dấu đậm ở phía đầu dòng này.

13. Thêm ngày giờ

<ins datetime=”2008-08-04T15:02:19+00:00“>

14. Biểu thị xem tiếp (sẽ ngắt đoạn văn làm 2 phần ngay tại dấu nhắc con chuột, phần hiện là để đọc, phần ẩn yêu cầu người đọc click vào dòng còn nữa…hoặc tiếng anh là read more…). Mở write/posts (papes)  bạn sẽ thấy biểu tượng khoanh tròn dưới đây.

<!–more–> sễ thành: read more…

15. Tạo phông chữ (font) về kích cỡ (size), màu sắc (color), nét đậm (bolder) mà mình mong muốn (một số phông thông dụng: Arial, Time New Roman, verdana, courier, Tohoma, comic sans ms)

<div><span style=”font-size: 30px; font-weight: bolder; font-family: comic sans ms; color: #336600;”>welcome to</span></div>

Vd: welcome to

Tùy biến với hình ảnh (images)

16. Cách 1 : Tạo các biểu tượng nhỏ có chứa link (gần giống như phần chữ)

*code sau cho ta biết khi click vào biểu tượng ảnh trên màn hình sẽ link đến Ảnh 1.

<div style=”text-align: center;”>
<a href=”link ảnh 1“> <img src=”link ảnh 1” alt=”Image 1″ height=”47″ width=”51″ alt=”Image” /></a></div>

Cách 2 : copy link trong hộp HTML to embed in website của Picasa  (google). Bạn thấy link này khi bạn đã upload hình vào địa chỉ picasa.google.com.

Paste vào wirte post hoặc Text (nhớ lựa chọn HTML, chứ không phải Visual, chọn ở phía trái của  write posts), bạn đưa chuột vào trong hình sẽ xuất hiện một khung nhỏ có hình tròn đỏ và màu xanh; lựa chọn vào khung hình màu xanh như khoanh tròn ở dưới.

Tiếp theo ta chọn tỉ lệ cho hình giảm xuống kích cỡ nhỏ như là một biểu tượng, nằm phía tay trái. Thế là ta đã có biểu tượng cho link hình.

17. Chèn hình ảnh theo kích cỡ được mặc định (theo đường link)

Cách 1: (Không viết được chú thích dưới hình)

<img src=”link ảnh” alt=” ” width=”144″ height=”155″ />

Width: chiều rộng

height: chiều cao
(http://www.vnexpress.net/Files/Subject/3B/A0/5B/D9/p8.jpg) : đây là link ảnh (lưu ý: link phải có  một trong các đuôi *.JPG, *.JPEG, *.JPE, *.JFIF, *.GIF, *.PNG, *.TIF, *.TIFF, *.bmp, *.dip…

Kích cỡ ãnh luôn ghi width trước rồi đến hight. Vd: 100px, 250px (W-H). Đơn vị tính là pixel (px).

Cách 2: Bạn muốn có thêm chú thích dưới tấm hình bạn dùng code sau cho vào giữa hai khóa caption ở hai đầu. (sorry: vì đoạn này viết đầy đủ dưới dạng code lại không được nên viết hơi dài dòng)

/*…id=”" align=”alignnone” width=”144″ caption=”Nội dung chú thích”]<img src=”Link ảnh” alt=”" width=”144″ height=”155″ />…*/

Hai anh em

Dùng code trên sẽ đặt ảnh của bạn ở bên trái (left); bạn muốn ảnh của bạn nằm giữa thì chuyển chữ left thành: center, sang phải: right.
Bạn muốn tất cả phần chữ nằm dưới hình, bạn thay bằng chữ none.

Cách 3: bạn điền thêm “link ảnh” và chú thích cho hình bạn đang dùng.

<table class=”tLegend” style=”border-collapse: separate;” border=”0″ cellspacing=”0″ cellpadding=”0″ width=”40″ align=”left”>
<tbody>
<tr>
<td><img class=”alignleft” style=”border: 1px solid black; margin-left: 0px; margin-right: 0px;” src=”Link ảnh” border=”1″ alt=”" hspace=”0″ width=”180″ height=”180″ /></td>
</tr>
<tr>
<td>Chú thích cho ảnh</td>
</tr>
</tbody></table>

* Các height và width phải điền chính xác với các chiều cao và chiều rộng của ảnh. (bạn có thể xem nó trong chương trình sửa ảnh Paint->image->Attributes…) Cách này chỉ đúng với ảnh đang lưu trên máy vi tính.

Help: lấy link trực tiếp của bức hình bằng cách: đưa con chuột vào tấm hình, bấm nút phải chuột tìm đến mục properties rồi chọn. Nhìn trên khung nhỏ có dòng chữ Address : http://picasaweb.google… đích thị là link của ảnh rùi.  Bạn để chuột gần link bấm phải chuột, chọn Select All/copy đoạn đó.

* Cách 1 chỉ cho chèn ảnh với chiều rộng không quá 500px, nếu nhiều hơn ảnh sẽ tràn sang bên phải khung bài viết viết (dạng 3 cột)

18. Cách 1 : Chèn ảnh theo kích thước của ảnh. (auto)

<img src=”link ảnh” />

Cách 2 : Tại mục (16.) bạn nhìn dòng select size : chọn Thumbnal 800px và clik vào ô “show link to album” copy code trên ô HTML to embed in website dán vào nơi bạn cần dán sẽ cho hình ảnh theo kích thước thực : auto.

18Bis. Nhạc nền chạy liên tục

<BGSOUND src=”link bài hát” loop=infinite></BGSOUND>

Mệt wá, lần sau làm tiếp, bạn cố gắng chờ nhé.

Ngày viết 05.08.2008 V1.0

Trong lúc chờ đợi hãy nghe bài “Em chỉ là bạn thân” của Nhạc sĩ: Sỹ Luân. Ca sĩ: Jenny. Dành cho những ai đang buồn vì tình yêu.

“…Chỉ biết lặng thinh, ngồi nhìn anh thật lâu
Mà anh có biết em rất đau lòng
Làm sao để nói em vẫn cần bên anh
Sao bờ môi kia chẳng thể hé ra”

(tiếp theo)

19. một số biểu tượng mặt cười, buồn. Kí hiệu được viết trong hai dấu /*….*/

:) /*:)*/

:( /*:(*/

;) /*;)*/

:D /*:D*/

:x /*:x*/

8) /*8)*/

Lưu ý :

Các bạn có thể tạo cho mình một nơi lưu ảnh trên các địa chỉ sau. Khi lưu trên các địa chỉ này họ cung cấp cho bạn những đoạn code theo kích thước ảnh thực (auto) mà bạn lưu. Bấm vào các mục link to this photo là sẽ có code.

  • http://photobucket.com : upload hình khó khăn, không biết lỗi tại sao. Có thuận tiện là nhiều lựa chọn cho nhiều mục đích của bạn.
  • http://picasaweb.google.com/home : cài thêm chương trình upload hình tự động mà không phải mở trang web picasa (khi dùng trình duyệt Mozilla firefox, tên chương trình là : fireUploader) rất tiện lợi và nhanh. Đã có hướng dẫn ở trang Home fần Mozila Firefox 3.0.
  • box.net trong wordpress cung cấp. (trong mục Design/widget/box.net). Chưa dùng bao giờ.
  • Tại wordpress cũng đã cho bạn 3Giby để upload hình ảnh, phim, nhạc.

Tùy biến với phim và nhạc (films and music)

20. Đưa phim từ youtube.com lên blog

Bạn chỉ cần copy đoạn code bộ phim mà bạn đang xem (nằm bên phải, trong một khung nhỏ, bên dưới chữ customize : <object width=”425″…>) dán vào weblog của bạn.


21. Bạn muốn bộ phim nằm ở giữa, trái, phải bạn chỉ cần paste đoạn code này vào giữa đoạn code ở mục 5, 6. (thay vào vị trí cụm từ cần đưa vào…).

22. Tạo nhạc nền cho blog (đang tham khảo để viết cho hay)

<object width=”2″ height=”2″><param name=”movie” value=”link nhạc “value=”true”></param><embed src=”http://www.youtube.com/v/RBnA_G1xgUI&hl=en&fs=1″ type=”application/x-shockwave-flash” allowfullscreen=”true” width=”2″ height=”2″></embed></object>

vd: bạn cũng có thể copy các đoạn code từ các trang nhacso.net, nhaccuatui.co được dựng sẵn.

Lưu ý:

*nhạc của tui (nhaccuatui.com): bạn có thể thấy ở dưới bài hát, chỗ dòng ghi: copy vào blog.

*nhacso.net: bạn phải bấm vào biểu tượng Blog Yahoo! 360 ở dưới bài hát (có phần hướng dẫn bạn các bước tiếp theo khi dán vào blog).

Cập nhập: 13.08.2008 v1.1
Cập nhập: 22.08.2008 v1.2 (mục 17, cách 2)
Cập nhập: 27.08.2008 v1.3 (mục 17, cách 3)