Ngồi máy tính thế nào cho đúng?

Người đăng: Unknown on Thứ Hai, 3 tháng 5, 2010



Từ trước đến nay, người ta vẫn nói máy vi tính là “con dao hai lưỡi”, nó tạo ra sự thuận tiện cho con người nhưng đồng thời cũng gây hại cho sức khỏe người sử dụng, làm giảm thị lực (83%), tổn hại khớp xương, đau lưng, đau vai (51,1%), đau đầu (56,1%) và chán ăn (54,4%).


Các chuyên gia nghiên cứu sức khỏe con người đưa ra những bí quyết để người sử dụng máy vi tính phòng bệnh như: “Ngồi đúng tư thế trước máy tính; Máy phải được đặt đúng chiều cao của người sử dụng; Giữ khoảng cách thích hợp với màn hình; Tránh sử dụng máy tính quá lâu…”.

Bạn đã ngồi trước máy vi tính đúng tư thế chưa? Các ngón tay, bàn tay của sử dụng chuột và bàn phím đã đúng cách chưa? Nếu bạn đang làm sai các tư thế khi sử dụng những thiết bị trên thì hậu quả lâu dài ảnh hưởng tới cơ thể bạn.

Một căn bệnh thường gặp ở những người sử dụng máy vi tính là Hội chứng ống cổ tay (CTS – Carpal Tunnel Sydrome). Cổ tay được bao quanh bởi những dải sợi, còn gọi là dây chằng, thực hiện chức năng hỗ trợ sự vững chắc cho hoạt động của cổ tay. Khoảng trống giữa những dải sợi này và xương cổ tay gọi là ống cổ tay (carpal tunnel syndrome). Ban đầu bệnh nhân có cảm giác tê, kiến bò ở bàn tay, khu vực chi phối của thần kinh giữa (ngón cái, ngón trỏ, ngón giữa và một phần của ngón áp út). Khi bệnh tiến triển lâu, bệnh nhân sẽ có cảm giác nóng cháy, chuột rút hoặc yếu bàn tay. Thỉnh thoảng bệnh nhân cũng có thể có triệu chứng đau ở cẳng tay. Bệnh mãn tính có thể gây teo cơ lòng bàn tay, thường là ở mô cái.

Theo các chuyên gia Y tế, Hội chứng CTS không đe dọa đến cuộc sống nhưng cũng không hề dễ chịu chút nào. Tùy theo mức độ nặng nhẹ để lựa chọn phương pháp điều trị hợp lý từ nghỉ ngơi, bất động cổ tay, nẹp cổ tay và nặng hơn nữa có thể ảnh hưởng đến chức năng vận động của bàn tay thì có thể phải phẫu thuật.
Với những người đang hàng ngày làm việc với máy vi tính, những sai lầm về động tác tay khi điều khiển chuột và bàn phí là nguyên nhân gây ra Hội chứng CTS

“Phòng bệnh hơn chữa bệnh”, hãy sử dụng chuột và bàn phím đúng cách theo chỉ dẫn dưới đây:

itGatevn_2010030101.jpg
itGatevn_2010030102.jpg
itGatevn_2010030103.jpg

Chú thích hình 2 & 4: Bàn đặt máy vi tính được chia làm 03 vùng
Vùng 1: Khoảng cách từ màn hình đến người sử dụng (~ 60 cm +)
Vùng 2: Khoảng cách từ màn hình đến bàn phím (~ 20 – 50 cm)
Vùng 3: Khoảng cách từ chuột và bàn phím đến người sử dụng (~ 25 cm)

Bài tập thể dục tay cho những người mắc phải Hội chứng CTS

itGatevn_2010030104.jpg

Theo xahoithongtin
More about

Mỏi mắt - triệu chứng thời @

Người đăng: Unknown



Nếu không có chế độ nghỉ ngơi, chăm sóc hợp lý, điều kiện làm việc và giải trí ngày nay rất dễ khiến bạn bị mỏi mắt.


Trong thời đại nhà nhà ào ào lướt mạng, thử nhìn ra xung quanh sẽ dễ dàng thấy cảnh một ai đó đang dán mắt vào màn hình, lớn nhỏ đủ loại, từ máy tính, truyền hình đến điện thoại di động... Lợi ích nhiều, nhưng những phiền phức cũng tranh thủ đi kèm mà rõ ràng nhất là chuyện cặp mắt không ngừng than mỏi.

Khi mắt quá tải

Rất nhiều nghề nghiệp ngày nay đòi hỏi bạn phải gắn bó với chiếc máy vi tính suốt 8 tiếng tại công sở. Đến lúc nghỉ ngơi, trong khi cơ thể bạn thư giãn thoải mái trên ghế bành để xem truyền hình thì cặp mắt vẫn phải tiếp tục cần mẫn làm việc. Mắt chúng ta không được cấu tạo để nhìn tập trung cố định một điểm trong nhiều giờ (mắt "căng" ra, mi mắt không chớp đủ…) nên khi phải làm việc với máy tính, xem truyền hình quá lâu sẽ dễ dẫn đến mỏi mắt.

Theo Ths - BS. Nguyễn Phú Thiện, giảng viên trường ĐH Y dược TP.HCM, nếu bạn làm việc lâu và mắt thấy khó chịu (cay mắt, mỏi mắt, thậm chí hoa mắt…), có cảm giác buồn ngủ thì đó chính là những triệu chứng của mỏi mắt do điều tiết.

Mỏi mắt do điều tiết thường gặp nhất ở những người bị các tật khúc xạ (như viễn thị, cận thị, loạn thị…) làm việc, đọc sách báo lâu mà không mang kính. Tuy nhiên, đối với người bình thường, trong lúc cơ thể đang mỏi mệt và mắt lại phải liên tục điều tiết thì cũng dễ dẫn đến những triệu chứng kể trên.

Một khi bị mỏi mắt, hiệu suất làm việc của bạn chắc chắn sẽ bị ảnh hưởng do tập trung kém, phản xạ chậm. Ngoài ra, những người bị tật khúc xạ, nếu không đeo mắt kính và tiếp tục để triệu chứng mỏi mắt kéo dài có thể sẽ dẫn đến nhược thị và rối loạn thị giác.

Nghỉ một chút, khỏe cả ngày

BS. Phú Thiện đặc biệt khuyên những người có công việc bắt buộc phải điều tiết mắt nhiều (sử dụng máy tính, thêu thùa, đọc, viết…) nên nghỉ ngơi thường xuyên: cứ mỗi tiếng cho mắt "giải lao" khoảng 5 phút.

Bên cạnh đó, cần phải giữ tư thế làm việc thoải mái (không nghiêng, gù lưng, gây mỏi cột sống) để cơ thể không dễ mỏi mệt. Nên chú ý đến môi trường làm việc: đọc, viết phải đủ ánh sáng; máy vi tính được sắp xếp hợp lý, để mắt dễ nhìn; không quá lạm dụng máy điều hòa vì có thể làm khô mắt. Về chế độ dinh dưỡng, có thể tăng cường nhiều rau củ có màu sậm như củ dền, cà-rốt, bí đỏ… là những nguồn cung cấp tiền vitamin A giúp bổ trợ cho mắt.

Nếu mắt bạn hoàn toàn bình thường mà gần đây hay bị mỏi mắt và không giảm dù đã được nghỉ ngơi nên đến khám bác sĩ chuyên khoa để được kiểm tra. Riêng với người bị các vấn đề khúc xạ cần nhanh chóng đi khám, đo mắt để đeo mắt kính phù hợp trong khi làm việc.

Sử dụng máy vi tính an toàn cho mắt

* Đặt máy tính sao cho mép trên của màn hình ngang với tầm mắt, đối diện với người sử dụng và khoảng cách từ màn hình đến mắt ít nhất là 50cm.

* Tuyệt đối không được để màn hình ngay cửa sổ vì phải nhìn nhiều luồng ánh sáng cùng một lúc sẽ dễ làm mắt bị lóa. Cũng không để ánh sáng (nắng, đèn) chiếu trực tiếp vào màn hình. Sắp xếp sao cho luồng ánh sáng đến từ hai bên.

* Nên dùng cỡ chữ lớn hoặc phóng to trang dữ liệu đang đọc.

* Ưu tiên cho chữ màu sậm trên nền sáng (chẳng hạn không nên dùng nền màu… đỏ). Tránh dùng hoặc đọc những chữ màu đỏ hoặc xanh vì đây là những màu nằm ở rìa của vùng ánh sáng khả kiến, có thể gây tật khúc xạ cho mắt.

* Màn hình máy tính cần được lau chùi thường xuyên.

* Tập trung nhìn màn hình lâu quá cũng có thể khiến mắt bị khô do mi không… nháy đủ. Vì vậy nên để mắt nghỉ ngơi thường xuyên và đặc biệt những ai sử dụng kính sát tròng cần hỏi bác sĩ để có loại thuốc nhỏ thích hợp, tăng cường độ ẩm cho mắt.

(Nguồn: Hội cải thiện thị giác quốc gia Pháp, ASNAV)

More about

9 thứ phải biết khi mua laptop

Người đăng: Unknown

9 thứ phải biết khi mua laptop

Dưới đây là 9 lời khuyên dành cho những người đang muốn mua một chiếc laptop mới.


Mua laptop không hẳn là việc đơn giản. Bởi có nhiều yếu tố cần cân nhắc như kích cỡ, tính năng, hiệu năng, dễ sử dụng và nhiều thứ khác. Nhưng có một số yếu tố chính bạn nên cân nhắc, bất kể là bạn muốn mua loại laptop nào. Đây là 9 lời khuyên để bạn chọn được laptop phù hợp với nhu cầu.

1/ Chọn bộ vi xử lý (CPU) hai lõi hay bốn lõi? Trừ khi bạn đang chạy các ứng dụng đa luồng thường xuyên, nếu không bạn không cần đến bộ vi xử lý 4 lõi. Các bộ vi xử lý hai lõi (dual-core) hiện nay là quá đủ với nhu cầu của hầu hết người dùng. Bạn cũng nên chú ý hơn tới các laptop tích hợp bộ vi xử lý Core i3 hoặc i5 mới của Intel.

2/ Hay đi xa, nên chọn CPU tiết kiệm điện. Với những người thường xuyên di động hoặc đi công tác ở các chi nhánh, nên chọn loại laptop dùng CPU tiết kiệm điện. Chọn loại CPU này có thể sẽ mất đi một chút sức mạnh hiệu năng nhưng đổi lại thời gian pin lại lâu hơn rất nhiều.

3/ Cần nhắc tạm dừng mua netbook đến khi chip đồ họa Nvidia Ion 2 ra mắt. Ion 2 sẽ hỗ trợ đáng kể hiệu năng của netbook, cho phép bạn thay đổi giữa hai chế độ: đồ họa rời (khi chạy ứng dụng cần đồ họa mạnh) hoặc đồ họa tích hợp (khi chạy ứng dụng văn phòng bình thường).

4/ Chọn bàn phím của netbook trước khi mua. Bàn phím netbook thường nhỏ hơn tiêu chuẩn, do đó nên chọn loại netbook có bàn phím bạn cảm thấy thoải mái khi sử dụng. Và với các loại laptop nhỏ nói chung, nên thử bàn di và nút chuột để tìm loại bạn cảm thấy thoải mái khi sử dụng.

5/ Vấn đề chất liệu. Với loại laptop siêu mỏng, vật liệu được dùng làm vỏ là yếu tố quan trọng hơn so với các loại laptop to, kồng kềnh. Vỏ làm bằng kim loại có thể bảo vệ tốt hơn là vỏ làm bằng nhựa. Hiện nay, laptop siêu mỏng nhẹ sử dụng vỏ bằng hợp kim nhôm cũng không đắt hơn đáng kể so với loại dùng vỏ nhựa.

6/ Trọng lượng. Trừ khi bạn có hình thể của vận động viên bóng chày, nếu không thì không nên mua laptop kích cỡ trên 14 inch. Mong muốn chung của hầu hết người mua laptop là muốn cái gì đó đủ nhẹ để mang theo hàng ngày.

7/ Kiểm tra âm thanh. Nên kiểm tra hệ thống âm thanh của laptop trước khi mua, nhất là với những người mua laptop để thay thế máy tính để bàn và có định hướng dùng nó cho việc giải trí. Tốt nhất là nên chọn laptop có loa trầm (subwoofer) lớn hơn, âm thanh tốt hơn. Ngoài ra, các laptop giải trí mới tích hợp công nghệ WiDi của Intel sẽ cho phép bạn chia sẻ phim không dây giữa laptop và tivi độ nét cao HD.

8/ HD đủ tốt. Đừng lo quá nhiều nếu laptop bạn muốn mua không thể xem phim độ nét cao mức 1080p. Phim độ nét cao có thể xem rất đẹp trên laptop ở độ nét 720p.

9/ Vấn đề đồ họa cho chơi game. Với laptop chơi game, bạn nên chi thêm tiền cho bộ vi xử đồ họa (GPU) hơn là bộ vi xử lý (CPU).

Theo PC Mag, ictnews
More about

Hướng dẫn tạo widget "Bài viết hot" (Hot Pots)cho blogspot

Người đăng: Unknown on Chủ Nhật, 2 tháng 5, 2010

Đây là ý tưởng mình vừa nghĩ ra, và liền post ngay lên cho mọi người, và hình như chưa có ai làm nó bao giờ. Hy vọng mình là người đầu tiên hướng dẫn cho mọi người. Thủ thuật này mình sẽ lợi dụng việc sử dụng các nhãn bài viết để tạo 1 widget các bài viết hot cho blog của bạn. Tất nhiên các bài viết hot này đều phải được các bạn tự chọn lọc và đưa nó vào 1 nhãn riêng. Và lưu ý là top bài viết hot ở đây là hot về nội dung chứ không phải hot về số người đọc hay số người comment.


Nghe tới đây có vẻ như thủ thuật không có gì mới lạ, giống như ta tạo 1 widget các bài viết có nhãn là Hot và cho hiển thị lên blog mà thôi. Nhưng ở bài viết này mình sẽ hướng dẫn các bạn 1 thủ thuật đơn giản để người đọc không biết widget Hot Posts đựơc trích xuất ra từ 1 nhãn.
Ví dụ ta có 1 lọat các bài viết đã đăng rồi, và có 1 số bài hot, bây giờ ta chỉ cần lọc lại chúng, và add thêm cho nó 1 nhãn, ví dụ ta đặt tên nhãn đó là hot. Và sau này nếu có bài viết mới có nội dung hot thì các bạn chỉ việc add thêm nhãn này.
Sau khi ta có 1 lọat các bài với nhãn là hot, bây giờ ta sẽ làm ẩn nhãn hot này ở footer của bài viết. Tức là khi người đọc xem ở trang chủ thì sẽ không biết bài nào sẽ thuộc nhãn hot. Khi đó tiện ích Hot Posts sẽ mang một cái nhìn mới.

Ví dụ như hình minh họa bên dưới :
Trước khi thực hiệc việc ẩn nhãn hot


Sau khi thực hiệc việc ẩn nhãn hot

Bây giờ ta sẽ thực việc ẩn nhãn này ở footer của bài viết:
1. Vào bố cục
2. Vào chỉnh sửa code HTML
3. Chọn mở rộng mẫu tiện ích
4. Tìm đọan code như bên dưới :

<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>

5. Thay nó bằng đọan code bên dưới :

<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name != "hot"'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:if>
</b:loop>


- Chú ý dòng code này :

<b:if cond='data:label.name != "hot"'>

- đây là đọan code để làm ẩn nhãn hot . Nếu nhãn hot này bạn đặt với 1 cái tên khác thì thay đổi nó lại cho phù hợp.

6. Save template.
- Như vậy ta đã thực hiện xong việc ẩn nhãn.

Có thể xem demo ở đây: DEMO

hotpost 3 - fandung.com


Để làm được điều này, các bạn thực hiện các bước như sau :
1. vào bố cục
2. vào chỉnh sửa code HTML
3. Chèn đọan code CSS bên dưới vào trước thẻ đóng </head> hoặc sau dòng code ]]></b:skin>

<style type='text/css'>
#hotposts {
width:510px;
padding:5px;
text-align:center;
font-weight:bold;
}
<b:if cond='data:blog.url == "http://m2t-homepage.blogspot.com/search/label/hot"'>
#Blog1 {display:none;}
</b:if>
</style>


- các bạn nhớ thay link trong dòng code bên dưới cho đúng với link label chứa các bài viết hot của bạn :

<b:if cond='data:blog.url == "http://m2t-homepage.blogspot.com/search/label/hot"'>

4. Tiếp tục xuống bên dưới tìm dòng code này (hoặc tương tự). Dòng code này là thẻ div chứa nội dung của phần main của blog. Sở dĩ mình nói tương tự là vì có thể 1 số blog sẽ không có dòng code này.

<div id='main-wrapper'>

5. thêm vào sau nó đọan code bên dưới :

<b:if cond='data:blog.url == "http://m2t-homepage.blogspot.com/search/label/hot"'>
<div id='hotposts'>
No post in this label. Go back to <a href='http://m2t-homepage.blogspot.com/'>HomePage</a>
</div>
</b:if>


- Lưu ý link của label nhãn hot trong bước 4 và 5 phải giống nhau.
- Ngòai ra các bạn có thể thay đổi lại nội dung dòng thông báo nếu như bạn muốn.
6. Save template.

Và cuối cùng ta chỉ việc chèn tiện ích recent posts theo Nhãn hot vào blog là ta đã có 1 widget "bài viết Hot" cho blog rồi.
Các thủ thuật về tiện ích "recent post theo nhãn" mình đã đăng nhiều rồi, các bạn có thể search ngay trên blog để tìm hiểu thêm.

Chúc các bạn thành công
More about

Làm nổi bật cho bài viết đầu tiên

Người đăng: Unknown on Thứ Ba, 27 tháng 4, 2010

Hôm nay mình sẽ giới thiệu cho các bạn cách làm nổi bật bài viết đầu tiên. Mình sẽ giới thiệu 2 cách : cách dùng jQuery và không dùng jQuery. 2 cách đều có điểm chung là thêm code CSS cho bài viết đầu tiên để nó khác với các bài khác, và điểm khác biệt giữa 2 cách là 1 cái phức tạp, nặng nề hơn, còn 1 cách thì dễ hiểu, đơn giản hơn. Tuy vậy mình vẫn sẽ giới thiệu cho các bạn cả 2 cách, để các bạn có thêm nhiều thông tin, kiến thức hơn.


Xem demo trên blogspot : DEMO

Hình ảnh minh họa:
lastest post - mothuthuat.com

A. Cách 1 : dùng Jquery
1. Vào bố cục
2. Vào chỉnh sửa code HTML
3. Chèn đọan code CSS bên dưới vào trước dòng code ]]></b:skin>
.post.first {
background:#efefef url(http://data.fandung.com/img/lastest-post.png) no-repeat top right;
padding:10px;
border:1px solid #ddd;
}
4. Tiếp tục chèn đọan code bên dưới vào trước thẻ đóng </head>
<script src='http://data.fandung.com/blog/demo/jquery-lightbox/js/jquery.js' type='text/javascript'/>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<script type='text/javascript'>
$(document).ready(function(){
$(".post:first").addClas<script src='http://data.fandung.com/blog/demo/jquery-lightbox/js/jquery.js' type='text/javascript'/>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<script type='text/javascript'>
$(document).ready(function(){
$(".post:first").addClass("first");
});
</script>
</b:if>s("first");
});
</script>
</b:if>
Ở đây mình có sử dụng điều kiện b:if để thủ thuật chỉ hiển thị ở ngòai trang chủ, nếu như không có lệnh này, thì khi mở ở trang bất kì nào như : bài viết, trang archive, label … thì bài viết đầu tiên đều được làm nổi bật.

5. Sau cùng là save template lại.

B. Cách 2 : Không dùng jQuery (update)
- Cách này mình sẽ chính lệnh b:if của blogger để chọn bài viết đầu tiên.
- Sau đây là cách thực hiện:

a. Vào bố cục > chỉnh sửa code HTML > nhấp chọn mở rộng mẫu tiện ích. tìm đoạn code này:
<b:include data='post' name='post'/>

b. Thay thế nó bằng đoạn code bên dưới :
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:post.isFirstPost == "true"'>
<div id='first-post'>
<b:include data='post' name='post'/>
</div>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
- Với đoạn code trên ta đã dùng div với id là first-post để bao bài viết đầu tiên lại. Nhưng nếu làm tới đây thì ta sẽ chưa thấy được gì, muốn bài viết đầu tiên khác với các bài còn lại thì ta phải thêm code CSS cho nó.
- Code CSS các bạn thêm vào trong code template, trước dòng code ]]></b:skin>, ví dụ như code mẫu bên dưới:
#first-post {
background:#efefef url(http://data.fandung.com/img/lastest-post.png) no-repeat top right;
padding:10px;
border:1px solid #ddd;
}

c. save template lại.

Chúc các bạn thành công.

Repost from mothuthuat.com
Update from duypham.info
More about

Plugin Lightbox cho blogspot (Phần II)

Người đăng: Unknown on Chủ Nhật, 25 tháng 4, 2010

Ở phần 1 mình đã giới thiệu cho các bạn cách sử dụng chung của plugin lightbox khi bạn muốn tạo 1 slide ảnh nào đó thì có thể tham khảo ở phần 1. Ở phần 2 này mình sẽ hướng dẫn các bạn chèn thẳng nó vào bài viết, tức là mỗi khi bài viết có ảnh nào đó thì khi bạn nhấp vô ảnh thì nó sẽ tự động hiển thị lightbox ra. Các này sẽ dễ dàng hơn rất nhiều nếu bạn dùng cách ở Phần 1 mình hướng dẫn.

Xem demo mình test trên blogspot : DEMO

Hình ảnh minh họa :


* Sau đây là cách thực hiện :
1. Vào bố cục
2. Vào chỉnh sửa code HTML
3. Nhấp chọn mở rộng mẫu tiện ích (Expand Widget Templates)
4. Chèn đọan code bên dưới vào trước dòng code </head> hoặc sau dòng ]]></b:skin>


<script src='http://data.fandung.com/blog/demo/jquery-lightbox/js/jquery.js' type='text/javascript'></script>
<script src='http://data.fandung.com/blog/demo/jquery-lightbox/js/b-jquery.lightbox-0.5.js' type='text/javascript'></script>
<link href='http://data.fandung.com/blog/demo/jquery-lightbox/css/jquery.lightbox-0.5.css' media='screen' rel='stylesheet' type='text/css'/>
<script type='text/javascript'>

$(function() {
$('#lightbox a[href$=.jpg]').lightBox();
$('#lightbox a[href$=.JPG]').lightBox();
$('#lightbox a[href$=.jpeg]').lightBox();
$('#lightbox a[href$=.JPEG]').lightBox();
$('#lightbox a[href$=.gif]').lightBox();
$('#lightbox a[href$=.GIF]').lightBox();
$('#lightbox a[href$=.bmp]').lightBox();
$('#lightbox a[href$=.BMP]').lightBox();
$('#lightbox a[href$=.png]').lightBox();
$('#lightbox a[href$=.PNG]').lightBox();
$('#lightbox a[href$=.tif]').lightBox();
$('#lightbox a[href$=.TIF]').lightBox();
});
</script>


- Ở phần 2 này có nhiều hàm gọi hơn ở phần 1 . Ở đây mình sử dụng hàm để gọi tất cả thẻ a trong link có các kí tự như “.png“, “.gif“, “.jpg“, … trong id lightbox. Tức là các link hình ảnh. Ở đây nó không phân biệt được chữ hoa chữ thường nên mình mới phải làm nhiều hàm gọi như vậy, và ở trên mình chỉ liệt kê 1 số đuôi ảnh thường dùng, nếu ai muốn đầy đủ thì cứ add thêm.

5. Sau khi chèn xong code ở bước 4, các bạn khoan save template lại, tiếp tục xuống dưới tìm đọan code như bên dưới :
<data:post.body/>

và thêm đọan code đánh dấu highlight như bên dưới :
<div id='lightbox'>

<data:post.body/>

</div>


Ở bước này mình ép cho tòan bộ phần nội dung của blog mang id là “lightbox” để đọan mã javascript trên có thể dễ dàng tìm đến các thẻ a trong bài viết.

6. Cuối cùng là save template lại.

Chúc các bạn thành công.
More about

Plugin LightBox cho blogspot (Phần 1)

Người đăng: Unknown on Thứ Bảy, 24 tháng 4, 2010


Để mở hàng cho các thủ thuật về blogspot ở nhà mới, hôm nay mình xin giới thiệu với các bạn cách chèn plugin Light Box vào blogspot. Đây là 1 plugin sử dụng jQuery, vì thế mà khi chạy trông nó sẽ rất mượt. Light box là 1 plugin cho phép ta trình diễn ảnh (xem ảnh) ngay trên blog mà không cần hiển thị ở của sổ mới. Plugin này họat động cũng gần giống với các forum VBB version từ 3.8 trở lên. Khi bạn nhấp vào 1 ảnh thumbnail nào đó thì sẽ có 1 box nhỏ hiển thị ảnh với kích thước thật.

Xem Demo ở đây : DEMO

Còn đây là demo mình text trên blogspot : Demo on Blogspot

Hình ảnh minh họa :

Light box - mothuthuat.com

Sau đây là các bước thực hiện:

I. Chèn code chính của thủ thuật vào template của blog:
1. Vào bố cục
2. Vào chỉnh sửa code HTML
3. Chèn đọan code bên dưới vào trước dòng code </head> hoặc sau dòng code ]]></b:skin> :


<style type='text/css'>

/* jQuery lightBox plugin – Gallery style */

#gallery {
background-color: #777;
padding: 5px;
width: 592px;
height:125px;
}

#gallery ul { list-style: none; }

#gallery ul li { display: inline;}
#gallery ul img {
border: 5px solid #3e3e3e;
border-width: 5px 5px 20px;

}

#gallery ul a:hover img {
border: 5px solid #fff;
border-width: 5px 5px 20px;
color: #fff;

}

#gallery ul a:hover { color: #fff; }

/* END – jQuery lightBox plugin – Gallery style */

</style>

<script src='http://data.fandung.com/blog/demo/jquery-lightbox/js/jquery.js' type='text/javascript'/>

<script src='http://data.fandung.com/blog/demo/jquery-lightbox/js/b-jquery.lightbox-0.5.js' type='text/javascript'/>

<link href='http://data.fandung.com/blog/demo/jquery-lightbox/css/jquery.lightbox-0.5.css' media='screen' rel='stylesheet' type='text/css'/>

<script type='text/javascript'>
$(function() {
$('#gallery a').lightBox();
});

</script>



4. Save template.

Lưu ý : đọan code CSS trong bước 3 chỉ là code mẫu, các bạn có thể tùy chỉnh lại theo ý mình.

II. Chèn code hiển thị :

- ở bước này các bạn có thể chèn vào đâu tùy thích, ví dụ muốn plugin
này hiển thị trong bài viết thì chèn vào nội dung bài viết, hoặc muốn
hiển thị đâu đó ngòai trang chính thì tạo 1 widget HTML/Javascript rồi
dán code bên dưới vào :

<div id=”gallery“>

<ul>
<li>
<a href=”Link ảnh 1″ title=”Mô tả cho ảnh 1″>
<img src=”Link ảnh thumbnail 1″ width=”72″ height=”72″ alt=”" />
</a>
</li>

<li>
<a href=”Link ảnh 2″ title=”Mô tả cho ảnh 2″>
<img src=”Link ảnh thumbnail 2″ width=”72″ height=”72″ alt=”" />
</a>
</li>

<li>
<a href=”Link ảnh 3″ title=”Mô tả cho ảnh 3″>
<img src=”Link ảnh thumbnail 3″ width=”72″ height=”72″ alt=”" />
</a>
</li>

</ul>

</div>

- Nếu muốn thêm nhiều ảnh thì các bạn chỉ việc thêm dòng code tương tự như bên dưới :

<li>

<a href=”Link ảnh 4″ title=”Mô tả cho ảnh 4″>
<img src=”Link ảnh thumbnail 4″ width=”72″ height=”72″ alt=”" />
</a>
</li>

</div>

- Link ảnh 1, 2, … : là link của những ảnh mà bạn muốn hiển thị (ảnh gốc)
- Link ảnh thumbnail 1, 2, … : là link của các ảnh nhỏ (thumbnail) sẽ được hiển thị sẵn ở plugin.
- Các link ảnh gốc và ảnh thumbnail có thể giống nhau, nhưng mình khuyên
nên tạo ảnh thumbnail riêng và có kích thước nhỏ thôi (như trong code
mẫu là 72×72px). Như thế plugin sẽ load nhanh hơn.
- Mô tả ảnh 1, 2, … : đây là dòng chú thích sẽ xuất hiện bên dước ảnh khi box hiển thị. Các bạn xem hình minh họa bên dưới :

lightbox2 - mothuthuat.com

- Nếu muốn tạo nhiều box để show ảnh thì các bạn chỉ cần tạo code tương tự như ở bước II. Như ng chú ý các bạn phải đổi lại tên id của thẻ div chứa nội dung của lightbox, vì nếu như trên cùng 1 trang mà có 2 thẻ div giống nhau thì chỉ có 1 lightbox chạy mà thôi. Như ở demo mình đã làm 2 cái trên cùng 1 trang.

- Việc sửa code lại tương tự như bên dưới :

<div id=”gallery2“>

<ul>
<li>
<a href=”Link ảnh 1″ title=”Mô tả cho ảnh 1″>
<img src=”Link ảnh thumbnail 1″ width=”72″ height=”72″ alt=”" />
</a>
</li>

<li>
<a href=”Link ảnh 2″ title=”Mô tả cho ảnh 2″>
<img src=”Link ảnh thumbnail 2″ width=”72″ height=”72″ alt=”" />
</a>
</li>

<li></div>

- Và tất nhiên là cũng phải tạo 1 đọan mã code CSS riêng cho id gallery2 này.
- Và 1 việc quan trọng cuối cùng để tạo 1 lightbox khác là bạn phải thêm 1 đọan code javascript nhỏ để nó có thể hoạt động.
- Các bạn tìm trong code ở bước I-3 sẽ thấy đọan code này :

<script type=’text/javascript’>

$(function() {
$(‘#gallery a’).lightBox();
});
</script>


và thêm đọan code như bên dưới (đã được đánh dấu highlight)

<script type=’text/javascript’>

$(function() {
$(‘#gallery a’).lightBox();

$(‘#gallery2 a’).lightBox();

});


- Lưu ý là tên id của thẻ div chứa nội dung phải trùng với tên id mà đã được thêm vào code javascript (ở đây là gallery2).
Như vậy thủ thuật đã hòan thành.

Chúc các bạn thành công.
More about