Khắc phục IDM phát hiện fake serial

Share

Bạn đang dùng máy tính tự nhiên thằng IDM xuất hiện 1 bảng thông báo fake serial với tầng suất càng nhiều? Bài viết này sẽ giúp bạn khắc phục triệt để 100%.
Crack IDM mới nhất  01/02/2016


Có 2 trường hợp xảy ra đối với bạn :

   I. IDM vẫn sử dụng bình thường nhưng lâu lâu hiện ra cái bảng thông báo thấy ghét

  Khắc phục: Internet Download Manager has been registered with a fake Serial Number. Be aware that the cracked product may work incorrectly and download files with errors. Thus we advise you to purchase the full-featured product.

Nguyên nhân: crack chưa triệt để

Cách khắc phục: 
CÁCH 1
1. Đầu tiên click chuột phải vào biểu tượng IDM ở góc dưới màn hình chọn Exit.

2. dùng phần mềm Your Uninstall này để gỡ sạch IDM. Trong lúc gỡ IDM kêu bạn reboot máy hay nhớ là chọn Cancel để cho Your Uninstall gỡ sạch xong đi rồi hãy reboot máy.

Nhớ chọn chế độ Full để gỡ sạch IDM

Chọn Cancel để Your Uninstall tiếp tục gỡ bỏ IDM

3. Sau khi reboot bạn nhấn tổ hợp phím Windows + R -> gõ regedit -> nhấn enter


4. Chọn tiếp HKEY_LOCAL_MACHINE -> SOFTWARE -> xóa bỏ mục Internet Download Manager (đây là key kích hoạt cũ của IDM)


5. Xong xuôi bạn phải file cài đặt mới nhất của IDM tại đây hoặc tại đây về cài đặt bình thường.
6. Dùng phần mềm chuyên dụng này để kích hoạt IDM.
Bằng phần mềm kích hoạt cũ nhưng cách làm mới, đảm bảo IDM sẽ không bật những thông báo đáng ghét đó nữa.

CÁCH 2: (Thành công 100%)
 Tải file IDMGrHlp.rar này về, giải nén bạn sẽ được file IDMGrHlp.exe hãy chép đè lên file cũ trong thư mục :
- Windows 64bit: C:\Program Files (x86)\Internet Download Manager
- Windows 32bit: C:\Program Files\Internet Download Manager

 II. IDM không cho tải bất kì cái gì: click tải bất cứ gì cũng đòi đăng ký mã kích hoạt hết

Khắc phục: Internet Download Manager has been registered with a fake Serial Number

Nguyên nhân: do bạn không để ý lúc IDM hỏi bạn có muốn update không thì vô tình bạn chọn Yes nên nó update
Cách khắc phục: như trên

Read More

Lưu trữ dữ liệu an toàn và miễn phí 5GB với Norton Zone

Share

Ngày nay, có rất nhiều dịch vụ lưu trữ trực tuyến miễn phí với dung lượng cực kì cao và độ bảo mật rất cao như Google Drive, Box.Com, DropBox, Skype Drive . . . Cho nên không thể nói dịch vụ nào tốt hơn hay kém hơn được, việc sử dụng giờ đây chỉ còn là do sở thích của người dùng. Cho nên VuonIT cũng xin giới thiệu thêm một dịch vụ Norton Zone hoàn toàn mới của hãng bảo mật nổi tiếng Symantec.

- Bài viết dưới đây sẽ giúp bạn sử dụng dịch vụ lưu trữ trực tuyến của hãng bảo mật danh tiếng Norton, với dung lượng sử dụng miễn phí lên đến 5GB, cho phép bạn dễ dàng sao lưu và chia sẻ dữ liệu của mình.

Sau một thời gian tung ra phiên bản thử nghiệm cho hệ thống lưu trữ đám mây với tên gọi Norton Zone, hãng bảo mật danh tiếng Symantec đã đưa phiên bản chính thức vào hoạt động với 5GB dung lượng lưu trữ miễn phí cho phép bạn lưu trữ các dữ liệu, chương trình, phim, ảnh hoặc chia sẻ với bạn bè…

 

Để đăng ký bạn truy cập tại đây, nhập địa chỉ E-mail 2 lần, tạo mật khẩu đăng nhập, Họ & Tên, quốc gia, nhấn chọn “I have read and agree to the Privacy Policy” và bạn có thể bỏ chọn tính năng “Email me product updates….” ở bên dưới để không nhận thông tin về việc cấp nhật phiên bản mới các sản phẩm, các bản tin bảo mật từ Symatec > Sign Up

 

Trình duyệt sẽ chuyển đến trang cá nhân trên hệ thống Norton Zone với hộp thoại yêu cầu xác nhận các điều kiện sử dụng > Accept, để xác nhận đồng ý không vi phạm các điều kiện của Symantec khi sử dụng.

 

Hướng dẫn sử dụng

 

Norton Zone có giao diện làm việc trực quan, rất dễ sử dụng. Bạn chỉ cần nhấn vào nút New Folder tạo một các thư mục chưa các dữ liệu theo từng phân loại dữ liệu, hình ành, video, chương trình để dễ quản lý. Sau khi đặt tên cho thư mục > Creat Folder, hệ thông sẽ xuất hiện dòng thông báo thư mục đã được tạo thành công 

 

Nhấn chọn thư mục vừa tạo > Upload Files, tìm đến các đối tượng tập tin muốn tải lên Norton Zone lưu trữ trong thư mục chọn chúng sau khi quá trình tải lên kết thúc sẽ hiển thị thông báo tập tin đã tải lên thành công, nhấn váo dấu “X” để đóng cửa sổ Upload.

 

Bây giờ bạn có thể chia sẻ tập tin với bạn bè, người thân hoặc các đối tác bằng cách nhấn vào ô đứng trước đối tượng, sau đó nhấn vào mũi tên trỏ xuống chọn Share link. 

 

Hộp thoại Share link hiển thị cho phép bạn thực hiện các tuỳ chọn sử dụng khi muốn chia sẻ liên kết tải với các tính năng rất hữu ích được chia làm các mục như: 

 

How would you like to share link?

- I’ll share the link myself : Tôi sẽ chia sẻ liên kết theo cách của tôi. Cho phép bạn tạo liên kết để chia sẻ trên trang cá nhân, diễn đàn hoặc các mạng xã hội.

- Post link to Facebook : Tạo liên kết để chia sẻ trực tiếp trên trang mạng xã hội này bằng cách liên kết tới trang đăng nhập tài khoản.

- Email link : Tạo liên kết chia sẻ để kèm theo trong e-mail gửi đến bạn bè, người thân hoặc các đối tác.

 

Link options : Đây là tính năng rất hữu ích trong việc chia sẻ liên kết tải bao gồm hai nhóm tuỳ chọn mà tác giả rất tâm đắc khi kiểm tra hoạt động của Norton Zone.

 

How long should this lin be available? (Liên kết hoạt động trong bao lâu?)

- Always : Tạo liên kết chia sẻ tập tin mãi mãi cho đến khi bạn không muốn chia sẻ nữa.

- Select an end date : Cho phép bạn giới hạn thời gian hoạt động của liên kết mặc định sẽ là 7 ngày nhưng bạn có thể tuỳ chỉnh theo ý thích cá nhân bằng cách nhấn vào khung hiển thị ngày chọn ngày thời gian hết hạn sử dụng cho liên kết.

 

Limit number of file downloads (Giới hạn số lượng tải cho tập tin)

- Unlimited : Không giới hạn số lượng tải.

- Mặc định của khung giới hạn tải tập tin muốn chia sẻ là 100 lượt nhưng bạn vẫn có thể thay đổi tuỳ theo ý thích để liên kết sẽ kết thúc hoạt động khi vượt ngưỡng cho phép đã định trước. Tính năng này giúp bạn hạn chế được việc sao chép liên kết để chia sẻ lại trên các trang khác.

 

Sau khi đã thực hiện xong các tuỳ chỉnh > Share link. Cửa sổ sẽ hiển thị thông báo kết quả liên kết đã được tạo thành công sau khi quá trình tạo liên kết tải kết thúc, sao chép liên kết về lưu lại và thực hiện chia sẻ trên trang cá nhân, diễn đàn hoặc các trang mạng xã hội.

 

Trong lúc vẫn còn đăng nhập trong tài khoản bạn có thể kiểm tra xem liên kết tải có hoạt động như đã tuỳ chỉnh tại cửa sổ Share link, sao chép liên kết vừa được cung cấp dán vào thanh địa chỉ của trình duyệt, Enter. 

 

Sử dụng phần mềm để quản lý và chia sẻ dữ liệu từ Norton Zone

 

Những thông tin bên trên được thực hiện trực tiếp giao diện web của Norton Zone, Symantec cũng cung cấp phần mềm có tên Norton Zone dành cho Windows, giúp đồng bộ hoá dữ liệu giữa máy tính hoặc các thiết bị di động với hệ thống Norton Zone.

 

Download phần mềm miễn phí tại đây.

 

Hộp thoại Norton Zone hiển thị chọn Agree & Install, sau khi cài đặt xong công cụ hộp thoại Creat a Norton Account xuất hiện nếu chưa có tài khoản bạn có thể đăng ký với các thông tin yêu cầu như địa chỉ e-mail, tạo mật khẩu đăng nhập, xác nhận mật khẩu > Creat Account. 

 

Nếu đang có sẵn hãy nhấn vào Sign in để đăng nhập vào tài khoản.

 

Hộp thoại hiển thị các hướng dẫn sử dụng bạn có thể chọn continue để tham khảo các tính năng, hoặc chọn Skip Tour để bỏ qua các bước này. 

 

Công cụ đồng bộ hoá sẽ hiển thị trên thanh hệ thống với biểu tượng thư mục màu vàng, nhấn phải chuột vào biểu tượng sẽ hiển thị danh sách các tính năng như: 

 

- Open Zone Folder : Sau khi cài đặt xong công cụ sẽ tạo một thư mục Norton Zone tại “C:\Users\....\Norton Zone”, cho phép bạn thực hiện việc kéo các đối tượng thư mục, tập tin, dữ liệu, chương trình đang lưu trữ tại các phân vùng thả vào khu vực để công cụ tự động thực hiện việc đồng bộ hoá dữ liệu với hệ thống trong trạng thái đang đăng nhập vào tài khoản Norton Zone.

 

- Launch Norton Zone website : Giúp bạn truy cập trực tiếp vào trang cá nhân trên Norton Zone

 

- Buy More Stogare : Cho phép bạn mua thêm dung lượng lưu trữ khi muốn mở rộng nhưng hiện tại tính năng này chư hoạt động và khi được kích hoạt sẽ kết nối với trang Account Settings của bạn trên hệ thống Norton Zone

 

- All files up to date : Xem các tập tin đã được cập nhật

 

- Recent Items : Xem danh sách các đối tượng tập tin, thư mục đã được đồng bộ hoá.

 

- Pause Sync : Ngưng tính năng đồng bộ hoá

 

- Add Account : Chèn thêm tài khoản mới vào hệ thống Norton Zone

 

- Preferences : Cho phép bạn thiết lập hiển thị thông báo trên màn hình sau khi cập nhật thành công các dữ liệu thông qua việc đồng bộ hoá, báo cáo các quá trình lỗi về Symantec, kiểm tra thông tin cá nhân, thiết lập giao thức kết nối qua các máy trạm nếu đang sử dụng và giới thiệu về thông tin phiên bản.

 

- Help : Giúp bạn truy cập trực tiếp vào trang hỗ trợ trực tuyến của Norton Zone.

 

 

Theo Dân Trí

Read More

Gom nhiều tài khoản Facebook, Twitter, Linkedin vào một chỗ

Share

Bạn có quá nhiều loại tài khoản: Twiiter, Facebook, Linkedin ... và mỗi loại có nhiều tài khoản khác nhau? Vậy làm sao để quản lý chúng trong cùng một tài khoản?

Chính vì thế dịch vụ grabinbox.com ra đời nhằm giải quyết vấn đề đó. Với grabinbox bạn có thể :

1. Thêm và quản lý nhiều tài khoản Twitter khác nhau.
2. Thêm và quản lý nhiều tài khoản Facebook khác nhau. 
3. Thêm và quản lý tất cả các Facebook Fan Pages. 
4. Thêm và quản lý nhiều tài khoản Linkedin khác nhau.
5. Tránh được những quảng cáo của Facebook.

Cách thức thực hiện vô cùng đơn giản, bạn chỉ truy cập vào grabinbox.com sau đó tạo một tài khoản. Nên nhớ là bạn phải click vào đường link kích hoạt được gửi vào mail sau khi bạn đăng ký thì tài khoản của bạn mới có hiệu lực nhé!

Click vào Create New Account và điền đầy đủ thông tin để đăng ký

Kiểm tra mail và kích hoạt tài khoản

Chúc các bạn thành công và đừng quên Like&Share để giúp các bạn khác biết được thông tin này nhé!

Read More

Tải tất cả các ứng dụng Android trên Google Play không cần dùng ĐTDĐ

Share

Nếu bạn chưa có điều kiện để mua 1 thiết bị chạy Android thì bạn có nhiều các để thực hiện được điều đó bằng cách giả lập android trên máy tính của mình. Thế nhưng cách nào là nhanh nhất? 

Trước tiên, mời bạn xem lại bài viết Giả lập Android với BlueStacks để xem cách cài đặt một HĐH Android trên máy tính như thế nào.

Sau đó, hãy xem bài viết dưới đây để tìm cách tải các ứng dụng từ Google Play dùng IDM mà không cần phải kết nối một thiết bị nào khác.

Thông thường, người sử dụng các thiết bi chạy Android cài đặt các ứng dụng qua Google Play. Tuy nhiên, trong một số trường hợp thì bạn cần phải chép các tập tin apk từ máy tính lên điện thoại, sau đó bấm vào chúng để cài đặt hoặc sideload. Vậy làm thế nào để có thể tải được những tập tin apk khi mà Google Play khống cho phép?

Có nhiều lý do khiến bạn không thể cài đặt trực tiếp từ Google Play, thường là rơi vào những trường hợp sau đây:

- Google Play nói rằng úng dụng hoặc trò chơi cụ thể không tương thích vói thiết bị Android, mặc dù bạn biết chắc rằng các ứng dụng sẽ làm việc tốt.

- Đôi khi một úng dụng Android không có sẵn để tải về trong Google Play thuộc khu vục hoặc quốc gia của bạn.

- Bạn muốn cài đặt các ứng dụng có sẵn trên Google Play lên một thiết bị Android không có Google Play (như máy tính bảng Amazon Kindle chẳng hạn).

• Làm thế nào để tải tập tin apk từ Google PlayStore?

Evozi - một nhà phát triển ứng dụng Android, vừa cho ra mắt người dùng một công cụ trực tuyến, cho phép bạn tải về các tập tin apk dễ dàng chỉ vói một cú bấm chuột. Đầu tiên, bạn truy cập vào địa chỉ http://apps.evozi.com/apk-downloader rồi nhập vào liên kết của ứng dụng trên Google Play (ví dụ: đường dẫn của trò choi Plants vs. Zombies™ 2 https://play.google.com/store/apps/details?id=com.ea.game.pvz2_row). Sau đó, bạn bấm vào nút Generate Download Link và chờ một lát đế quá trình này được hoàn tất. Lúc này, tập tin apk đã được chuyển về máy chủ của Evozi, việc bạn cần làm là bấm vào liên kết Click here to download now để tải về.

Việc tải tập tin apk theo cách này sẽ đảm bảo rằng các ứng dụng Android sẽ không bị nhiễm phần mềm độc hại. Ngoài ra, để ngăn chặn các vi phạm về bản quyền của ứng dụng, Apk Downloader (tên của công cụ) chỉ cho phép bạn tải về các ứng dụng miễn phí.

Chúc các bạn có tải được nhiều ứng dụng hay và đừng quên Like&Share bài viết này cho bạn bè cùng xem nhé! 

Theo LBVMVT 533

Read More

Hướng dẫn dịch ngược phần mềm .exe bằng .Net Reflector 7.6.1.824 Full

Share

.Net Reflector là phần mềm thường được dùng để dịch ngược hoặc crack các phần mềm được viết trên nền tảng .Net (C#,VB.Net...) mà ít được bảo vệ. Hiện tại .Net Reflector đã có phiên bản 7.6 và hỗ trợ tốt đến phiên bản .Net 4.5 mới nhất của Microsoft.

Giới thiệu:
.NET Reflector là một chương trình dùng để Disassemble (nói dễ hiểu là dịch ngược ra source code) một chương trình khác viết bằng .NET. Hổ trợ ngôn ngữ đầu ra là những ngôn ngữ lập trình .NET thông dụng như: IL, C#, VB, Delphi, MC++, Chrome. 

Hướng dẫn sử dụng:
Sau khi tai về, bạn giải nén vào một thư mục nào đó rồi chạy file Reflector.exe (chạy trực tiếp, không cần cài đặt), giao diện của nó như thế này:

 

Muốn dịch một thư viện hay một file *.exe, click chọn Open trên toolbar hay menu File -> Open hoặc Ctrl+O, duyệt đến file dll hay exe cần dịch > OK.

Nếu muốn dịch trực tiếp ra các file source thì click phải chuột lên tên file cần dịch, chọn Export, nếu chỉ muốn xem cấu trúc của nó thì chọn Disassemble.

Sau khi chọn Disassemble, sẽ ra cái này

 Khung bên trái là cấu trúc của 1 file .dll hay 1 file .exe, bên phải là source code.

Hướng dẫn crack

1. Chạy file ReflectorInstaller_7.6.1.824.exe để cài đặt
2. Sau khi cài đặt không được khởi động chương trình
3. Copy tất cả những file trong thư mục cài đặt (Mặc định là C:\Program Files\Red Gate\.NET Reflector\Desktop 7.6)
4. Hoàn tất!

Chú ý: Nếu gặp lỗi như hình bên dưới,

bạn đừng lo lắng, hãy chạy file C:\Program Files\Red Gate\.NET Reflector\Desktop 7.6\ReflectorCmd.exe là được

Link download (dung lượng 11.5 MB) :

Mega.co.nz : http://denho.info/bbx

Box.com : http://denho.info/bby

NortonZone.com : http://denho.info/bbz

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

Read More

Dùng hàm replace

Dùng hàm replace trong javascript để lấy ảnh thumbnail chất lượng cho Blogger

7
Your ads here!

Có nhiều anh em hỏi vì sao các ảnh thumbnail của Blogger trong Blog Thiết Kế, vnblogspot lại sắc nét do có độ phân giải phù hợp như vậy. Cây trả lời là Hồng Hòa Vi đã dùng hàm “Replace” trong Javascript để lấy ảnh thumbnail có độ phân giải chất lượng hơn. Đây là một thủ thuật rất đơn giản. Tuy nhiên HHV muốn mở rộng thêm một chút cho những bạn mới chập chững tìm hiểu về Javasript.
Ai cũng biết các ảnh square thumbnail của do Blogger hoặc Picasa sinh ra mặc định có độ phân giải 72x72px tuy nhiên điều mọi người ít biết là còn có nhiều độ phân giải khác có chất lượng hơn. Hãy xem xét cấu trúc một link ảnh ở dưới đây và việc thay thế các thông số để có ảnh thumbnail với độ phân giải khác nhau.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLQABC91xjR-iCcAgxs7Z8okWSlRE2NI14TgI7VwFn7iLNeTBpE2_JTuabvEKveJAOIjd3c-qjzkterjzl6ijGEm7qUy2fctM51Lnc_r_r8nENzHIC14-a5iek7x7BQkbfwKCnAk7da_M/xxxx-x/skull%25255B19%25255D.png

S72-C	S125-C	S300-C

Việc cần làm là tự động hóa quá trình thay thế thông số trong link này bằng một đoạn mã Javascript mà cụ thể là dùng một function có hàm replace.

HÀM REPLACE

Thực ra cú pháp của hàm Replace rất đơn giản

string.replace(regexp/substr,newstring)

Trong đó
regexp là chuỗi cần thay thế
newstring là đoạn chuỗi thay thế cho regexp.
substr

• Nếu không có substr thì hàm String.replace() của javascript chỉ replace lần xuất hiện đầu tiên mà thôi.
• Nếu thêm /g thì sẽ thay thế toàn bộ những chuỗi mà hàm replace phát hiện ra.
• Nếu /i thì sẽ không phân biệt hoa thường.

VD1

<script type='text/javascript'>var myString = ‘Blog Thiet Ke talks about Thiet Ke blog';alert(myString.replace('Thiet Ke', 'design')); //output : "Blog design talks about Thiet Ke blog" . Not "blog design talks about design blog".</script> 

VD2

<script type='text/javascript'>var myString = ‘Blog Thiet Ke talks about Thiet Ke blog';alert(myString.replace(/Thiet Ke/g, "design")); //output : "Blog design talks about design blog"</script>

VD3

<script type='text/javascript'>var myString = ‘Blog Thiet Ke talks about Thiet Ke blog';alert(myString.replace(/thiet ke/gi, "design")); //output : "Blog design talks about design blog"</script>

ỨNG DỤNG

Muốn có hình ảnh chất lượng hơn chỉ cần chèn đoạn code dưới dây vào ngay trên thẻ </body>

<script type='text/javascript'> //<![CDATA[ function replaceText(){ if(!document.getElementById){return;} bodyText = document.getElementById("blogthietke"); theText = bodyText.innerHTML; theText = theText.replace(/s72-c/gi, "s150-c"); bodyText.innerHTML = theText; } replaceText(); //]]> </script>

Cảm ơn Duy Phạm đã cung cấp đoạn code này
Bạn cần thay blogthietke bằng id của widget cần lấy thumbnail. Ngoài ra thay đổi S150-Cbằng các thông số khác. Cứ thử sai các số khác nhau xem thế nào nhé!

TÌM HIỂU

Mặc dù hàm replace rất đơn giản nhưng phải rắc rối như vậy là vì chúng ta chỉ muốn hàm replace có tác dụng trong một phạm vi giới hạn của của id. Vì vậy phải dùng thêm getElementById. Ngoài ra có thêm thuộc tính innerHTML để chúng ta chỉ dò phần text nằm giữa các thẻ HTML chứ không dò phần code HTML
Như vậy đoạn code trên có ý nghĩa như sau:
Dò xem có đúng id mà cần áp dụng hàm replace không, Nếu không đúng thì trả lại giá trị ngay (return). Nếu đúng id thì tìm toàn bộ text trong id đó (bodyText.innerHTML) thấy chỗ nào có s72 (không phần biệt hoa thường) thì cứ thay hết bằng s150. theText là một biến tạm.

KẾT LUẬN

Chỉ một đoạn code nhỏ khoảng mươi dòng nhưng nếu phân tích kỹ chúng ta có thể thấy rất nhiều điều hay ho… Chúng ta sẽ hiểu thêm một số thuộc tính và hàm của Javasript được liệt kê ở dưới đây.

• Hàm Replace
• Hàm getElementById
• Thuộc tính innerHTML

Nếu bạn thực sự hứng thú muốn tìm hiểu việc thiết kế web/blog thì nên tìm hiểu thêm bằng cách click vào đường link. Hy vọng sẽ giúp ích được cho mọi người!

Read More

Menu Đa cấp

Hướng dẫn cách làm thanh menu đa cấp với HTML5 và CSS3 từng bước đơn giản

20
Your ads here!

Một trong những thành phần phổ biến nhất và quang trọng nhất của trang web là thanh menu bar hay thanh định hướng navigation bar. Có rất nhiều cách làm thanh menu này như dùng javascript dùng jquery hay CSS. Rất nhiều blogger tên tuổi đã hướng dẫn làm thanh menu đa cấp (multilevel menu bar) tuy nhiên trong bài viết này HHV vẫn hướng dẫn cách làm từng bước một thanh menu bar đơn giản với HTML và CSS3. Đây không phải là một hướng dẫn xơi ngay kiểu “mì ăn liền” mà là giúp các bạn hiểu quy trình để làm ra một thanh menu bar như thế nào.
Khi đã hiểu rõ bạn hoàn toàn có thể tùy biến theo ý thích của mình, đổi màu, thêm background, thêm hiệu ứng hover. và nhiều thứ khác nữa… Bài viết hơi dài tuy nhiên để thư giãn mời bạn ghé thăm trang demo trước khi bắt tay vào việc.

1. Tạo một trang HTML5 với một menu list

a. Tạo một trang HTML5

<!DOCTYPE html>

<html>

<head>

<style type="text/css">

</style>

</head>

<body>

</body>

</html>

Đây là cấu trúc cơ bản của một trang HTML5, trong đó phần code CSS mình sẽ chèn giữ thẻ<head> và code html mình chèn giữa thẻ <body>

b. Tạo một menu list.

Bản chất của một thanh menu là tập hợp những đường link được sắp xếp theo trình tự. Một thanh menu chính là một danh sách các đường link được trang trí và trình bày lại theo hàng ngang. Để dễ trang trí ta dùng các thẻ id (main_menu) và class (top_menu)
Danh sách cấp 1 của menu

<ul id="main_menu">

<li class="top_menu">

 <a href="#">Design</a>

</li>

<li class="top_menu">

 <a href="#">Tutorials</a>

</li>

<li class="top_menu">

 <a href="#">Coding</a>

</li>

<li class="top_menu">

 <a href="#">Blogger</a>

</li>

<li class="top_menu">

 <a href="#">General</a>

</li>

</ul>

Chú ý các thẻ <ul> <li> và <a> với thuộc tính href chúng được sắp xếp lặp lại. Bạn có thể thay thế phần anchor text và các đường link theo ý thích.
Bây giờ phải thêm phần danh sách cấp 2 của menu. Ta lai dùng cấu trúc thẻ các <ul> <li> và<a>

 <ul>

  <li><a href="#">Freebies</a></li>

  <li><a href="#">Wallpaper</a></li>

  <li><a href="#">Web Design</a></li>

 </ul>

Ghép chúng lại theo kiểu “một danh sách nằm trong một thẻ <a> “ ta có toàn bộ thanh menu 2 cấp phái dưới. Bạn cần chú ý vị trí đặt thẻ <ul> của danh sách cấp 2.

<ul id="main_menu">

<li class="top_menu">

 <a href="#">Design</a>

 <ul>

  <li><a href="#">Freebies</a></li>

  <li><a href="#">Wallpaper</a></li>

  <li><a href="#">Web Design</a></li>

 </ul>

</li>

<li class="top_menu">

 <a href="#">Tutorials</a>

 <ul>

  <li><a href="#">Tools</a></li>

  <li><a href="#">Writting skills</a></li>

 </ul>

</li>

<li class="top_menu">

 <a href="#">Coding</a>

 <ul>

  <li><a href="#">HTML</a></li>

  <li><a href="#">CSS</a></li>

 </ul>

</li>

<li class="top_menu">

 <a href="#">Blogger</a>

 <ul>

  <li><a href="#">Buzz</a></li>

  <li><a href="#">Widgets</a></li>

  <li><a href="#">Templates</a></li>

 </ul>

</li>

<li class="top_menu">

 <a href="#">General</a>

</li>

</ul>

Phần khung sườn của menu đã xong ta chuyển sang phần trang trí chúng dùng CSS3

2. Trang trí thanh menu 2 cấp với CSS3

Trước tiên là trang trí cho toàn bộ thanh menu với thuộc tính background, thuộc tính này có giá trị bao trùm cả toàn bộ thanh menu của chúng ta. Thực tế phần gradient không quan trọng, chủ yếu để ứng dụng hiệu ứng của CSS3. Các tiền tố –moz –o –webkit -ms là để cho các trình duyệt khác nhau hiểu về phần thuộc tính đi phía sau nó.
Phần code này cũng quy định các thành phần khác cho toàn bộ thanh menu bar như bề rộng, font chữ, căn lề…. Thuộc tính đáng chú ý nhất ở đây là list-style-type: none; bạn không được thay đổi. Bạn hãy tự khám phá vì sao không được thay đổi nhé!

/*container list*/

#main_menu{

background-color: #990066;

background-image: -webkit-linear-gradient(top, #990066, #cc0099, #990066);

background-image: -moz-linear-gradient(top, #990066, #cc0099, #990066);

background-image: -ms-linear-gradient(top, #990066, #cc0099, #990066);

background-image: -o-linear-gradient(top, #990066, #cc0099, #990066);

font-family:sans-serif;

list-style-type:none;

text-align:center;

float:left;

width:90%;

border-radius:5px;

box-shadow: 3px 3px 2px #888888;

}

Bây giờ ta sẽ trang trí đến top_menu, class top_menu quy định các thuộc tính của thẻ <li> cấp 1. Thuộc tính quan trọng nhất của phần này là float:left;. Một list mặc định sẽ được liệt kê theo từng dòng một. Khi đặt thuộc tính float:left; các thẻ <li> sẽ xếp lớp về bên trái theo thứ tự và tạo thành một thanh ngang trên một dòng. Ngoài ra thuộc tính positon:relative tuy không quan trọng bằng nhưng bổ sung thêm cho float. Nếu thích bạn có thể tìm hiểu thêm ở đây.

/*top list items*/

.top_menu {

float:left;

position:relative;

border-right:1px solid #ff00cc;

border-left:1px solid #ff00cc;

margin-left:-1px;

}

Các bạn cần hình dung trình tự trang trí mà chúng ta đang làm. Khi trang trí bằng code CSS bạn nên bắt đầu từ cái rộng nhất cho đến các chi tiết. Trình tự trước tiên là toàn bộ thanh menu (thẻ <ul> ) rồi đến các thẻ <li>. Bây giờ chúng ta bắt tay vào thẻ <a>

Phần code bên dưới dây quy định cho cho phần text nào nằm trong thẻ <a> của thanh menu điều này có nghĩa là nó được áp dụng cho cả 2 cấp menu của chúng ta.
Trong phần thuộc tính có 2 điểm chúng ta nên ghi nhớ là phần background, display.
Phần background quy định màu nền của thẻ <a> khuyến cáo các bạn sử dụng màu nền này trùng với màu nền của toàn bộ menu để bảo đảm yếu tố thẩm mỹ.
Phần display: block; thì không được thay đổi vì nó ảnh hưởng trực tiếp đến phần khung sườn của toàn bộ thanh menu.

/*anchors*/

#main_menu a, #main_menu a:hover {

background-color: #990066;

background-image: -webkit-linear-gradient(top, #990066, #cc0099, #990066);

background-image: -moz-linear-gradient(top, #990066, #cc0099, #990066);

background-image: -ms-linear-gradient(top, #990066, #cc0099, #990066);

background-image: -o-linear-gradient(top, #990066, #cc0099, #990066);

color:#ffffff;

display:block;

padding:5px;

text-decoration:none;

width:150px;

border-top-right-radius:2px;

border-top-left-radius:2px;

border-bottom-right-radius:10px;

border-bottom-left-radius:10px;

}

Một trong những cách học hay nhất là vừa làm vừa thực hành, HHV khuyến cáo các bạn sử dụng một chương trình như Notepad++ để code vừa code vừa lưu lại. Sau đó bạn có thể vừa xem trên trình duyệt vừa chỉnh sửa CSS bằng cách dùng firebug

Như vậy phần menu cấp 1 đã hoàn thành bây giờ chúng ta tiếp tục đến menu cấp 2. Đoạn code sau quy định các thuộc tính cơ bản và lớn nhất của nó.

/*sub menu list*/

#main_menu ul {

list-style:none;

position:absolute;

display:none;

}

/*sub menu when hover on top item*/

#main_menu li:hover ul {

display:block;

}

Phần code bên dưới có 3 thuộc tính cả 3 thuộc tính bên dưới đều cực kỳ quan trọng và không thể bỏ qua. Thuộc tính list-style-type: none; đã đề cập ở trên ta không nhắc lại nữa,.
Thuộc tính position là để biến toàn bộ thẻ <ul> (submenu) thành một khối như vậy các thẻ<li> (của sub menu) sẽ không bị chạy loạn xạ mà chỉ nằm trong một khối và nằm ngay bên dưới thẻ <li> (menu) bên trên nó.
Thuộc tính display:none; là vì ở điều kiện bình thường thì các submenu bị ẩn đi, chỉ khi bạn rê chuột vào (hiệu ứng hover) thì nó mới hiện ra.
Bây giờ tiếp tục trang trí cho thẻ <li> (submenu)

/*sub menu list items*/

#main_menu ul li {

padding-top:1px;

margin-left:-25%;

}

Cuối cùng là trang trí cho phần thẻ <a> của submenu.

/*sub menu list anchors*/

#main_menu ul a {

color:#ffff00;

box-shadow: 3px 3px 2px #888888;

}

3. Kết luận – những điểm cần ghi nhớ

Nếu tìm hiểu kỹ bài viết này bạn có thể hoàn toàn làm cho mình một thanh menu hoàn hảo theo ý thích, bạn có thể thêm các thuộc tính background là hình ảnh, thêm các hiệu ứng hover (bằng cách thêm thuộc tính transform của CSS3). Tuy nhiên điều quan trọng là bạn phải nắm được cấu trúc và trình tự. Cần chú ý các điểm sau.
1. Menu đa cấp thực ra là một danh sách trong một danh sách. 
2. Khi trang trí code thì phải theo thứ tự từ cái rộng nhất đến cái chi tiết nhất. 
3. Thuộc tính list-style-type: none; cho tất cả các thẻ <ul> 
4. Thuộc tính positon: block; cho tất cả các thẻ <a> 
5. Thuộc tính float:left cho thẻ <li> của menu cấp 1 
6. Thuộc tính positon: block; và display:none; cho thẻ <ul> của submenu
Cuối cùng HHV biết rằng hơi dài dòng và khá rắc rối nên có chỗ nào mơ hồ thì cứ để lại comments ở dưới bài viết này…

Read More

Sử dụng Cufon

Sử dụng Cufón – Phần 1: Sử dụng cơ bản và nâng cao

Cập nhật lần cuối ngày 25/09/2013 trong Javascript - jQuery

Mặc định các font chữ trên một website sẽ hiển thị dựa vào font chữ đã được cài đặt trên máy, những font phổ biến trên website như Arial, Tahoma, Verdana, Time New Roman..v.v..là những font chữ mặc định mà bất cứ máy nào đều cũng phải có nên những nhà thiết kế web thường chọn các mẫu font đó để có thể đảm bảo máy nào cũng có thể hiển thị font chữ trên web bình thường.
Qua thời gian, CSS được nâng cấp thì chúng ta có thêm lựa chọn đó là sử dụng @font-face để import một font được upload sẵn lên host để họ có thể sử dụng những font chữ đẹp tuyệt vời trên web mà không lo vấn đề máy người dùng có sẵn font này hay không. Nhưng nhược điểm của cách này là ảnh hưởng rất nhiều đến tốc độ tải của website và hiện tại không được sử dụng nhiều cho lắm (ngoài việc sử dụng các Icon Font để làm đẹp). Và theo thời gian, công nghệ đã phát triển thêm 2 cách nhúng font đẹp vào web/blog đó là sử dụng Google Web Font và Cufón. Về cách hoạt động của 2 tính năng này đều giống nhau đó là nén và mã hóa font chữ dưới dạng Javascript để có thể truy xuất trực tiếp vào trình duyệt mà không cần phải thông qua phương thức xử lý hay tải về nào. Theo như đánh giá của mình, thì Google Custom Font có lợi thế là nhẹ, không ảnh hưởng nhiều đến tốc độ website nhưng lại có một nhược điểm là dựa vào thư viện font có sẵn của Google, mà nếu bạn làm blog tiếng Việt thì hầu như khó có thể dùng đến nó vì nó chỉ hỗ trợ vỏn vẹn 4 kiểu chữ rất…bình thường.

Như vậy, mình thường dùng một giải pháp khác đó là sử dụng Cufon để làm đẹp font chữ trên web/blog. Lợi thế của Cufon là bạn có thể sử dụng bất kỳ font chữ nào mà bạn thích, miễn sao nó nằm trên máy của bạn, nhược điểm thì dĩ nhiên là nó sẽ “góp phần” làm chậm blog của bạn một chút vì các file javascript có dung lượng tương đối cao. Nhưng nếu bạn là người yêu cái đẹp, thì nó cũng rất đáng dùng để trang trí blog đó chứ. Trong bài này, mình sẽ hướng dẫn các bạn cách sử dụng Cufon cơ bản và nâng cao.

Chuẩn bị kiến thức HTML và CSS cơ bản

Bài hướng dẫn này chỉ dành cho những ai đã có kiến thức HTML và CSS cơ bản. Các bạn có thể tìm hiểu HTML và CSS cơ bản tại đây.
Thực ra sử dụng nó không khó gì lắm đâu, sở dĩ bài được chia ra làm nhiều phần như vậy là để dễ dàng cho các bạn điều hướng để sử dụng tùy theo mục đích. Thôi, bắt đầu vào công việc chính nào!

1. Cách tạo font cho Cufon.

Chuẩn bị font chữ.

Trước tiên, bạn cần phải chuẩn bị sẵn một mẫu font định dạng .ttf có sẵn ở máy để chúng ta sẽ tiến hành mã hóa nó sang định dạng Javascript. Bạn có thể download các font chữ miễn phí tại Dafont.com hoặc Fontchu.com, Font.Vnnếu bạn muốn tìm font tiếng Việt. Còn nếu bạn muốn đầu tư 1 font tiếng Việt đẹp và chuyên nghiệp thì có thể mua font chữ tại vFont.Vn

Nên chọn font Unicode

Để không xảy ra nhiều rắc rối trong lúc sử dụng Cufon với font chữ tiếng Việt, bạn nên chọn font Unicode hay vì VNI hay các bảng mã font khác vì thông thường người dùng (và cả chính bạn) đều gõ tiếng Việt với bảng mã Unicode mà nó sẽ được encode theo chuẩn UTF-8.

Chuyển font sang định dạng Cufon.

Bước kế tiếp, bạn cần vào trang chủ Cufon để tiến hành upload font lên đây để nó chuyển thành định dạng Cufon. Sau khi vào đây, bạn bắt đầu tiến hành upload font lên như hình bên dưới.

Regular Typeface: File font định dạng bình thường.
Bold Typeface, Italic Typeface, Bold Italic Typeface: Đây là các file font riêng cho kiểu in đậm, in nghiêng. Có một vài font sẽ có những font riêng cho từng định dạng thế này để cho các định dạng đẹp hơn, nhưng nếu bạn mới sử dụng thì cứ nên bỏ trống. Chúng ta có thể thêm các thuộc tính CSS vào Cufon để cho nó đậm hay xiêu vẹo gì đó tùy thích.
Use the following value as the font-family…..: Đây là phần thiết lập tên của font khi ta khai báo bằng giá trị font-family trong CSS để gọi font ra. Ở phần dưới bạn sẽ hiểu vì sao, bây giờ thì bạn nên đặt nó bằng một cái tên thật dễ nhớ, tốt nhất là trùng với tên font.
Đánh dấu vào The EULAs of these fonts…..để đồng ý các điều khoản sử dụng.
Tiếp tục lăn con chuột xuống và bạn thiết lập như sau (chỉ đánh dấu như trong hình, đừng chọn thêm vì nếu chọn càng nhiều thì file font càng nặng)

Lưu ý, các bạn kéo xuống một chút sẽ thấy phần .. and also these single characters, các bạn copy chuỗi ký tự này vào ô đó để có thể hiển thị được tiếng Việt.

àáạảãâầấậẩẫăằắặẳẵèéẹẻẽêềếệểễìíịỉĩòóọỏõôồốộổỗơờớợởỡùúụủũưừứựửữỳýỵỷỹđÀÁẠẢÃÂẦẤẬ  ẨẪĂẰẮẶẲẴÈÉẸẺẼÊỀẾỆỂỄÌÍỊỈĨÒÓỌỎÕÔỒỐỘỔỖƠỜỚỢỞỠÙÚỤỦŨƯỪỨỰỬỮỲÝỴỶỸĐ

Ngay tại mục Security là thiết lập tên miền cho phép sử dụng Cufon, nếu bạn sử dụng các font độc quyền mà không muốn bị người khác lấy về sử dụng thì có thể điền domain website của bạn vào đây. Ví dụ: thachpham.com
Các phần khác bạn có thể để nguyên nếu như không am hiểu về nó. Cuối cùng là đánh dấu vào  I acknowledge and accept these terms và nhấn Let do this! để nó bắt đầu chuyển đổi định dạng và sẽ tự động tải về máy. Lúc này bạn sẽ nhận được một file .js, đó chính là file Cufon của bạn.

2. Cách cài Cufon lên blog/website

Để Cufon có thể kích hoạt thì bạn cần nên tải plugin Javascript của nó về để có thể sử dụng được. Cụ thể là tải file cufon-yui.js, sau đó bạn khai báo thêm 2 thẻ script trong cặp thẻ <head> của website như sau:

<script type="text/javascript" src="cufon-yui.js"></script>

<script type="text/javascript" src="giaytrang_400.font.js"></script>

Tips

Trong ví dụ này là mình upload file cufon-yui.js và giaytrang_400.font.js ngang hàng với file index.html của một website bình thường.
Trong đó bạn có thể thấy file giaytrang_400.font.js, đó là file font mà mình đã được tải về ở bước tạo font ở trên. Tên file này có thể khác hoặc giống tùy thuộc vào font bạn chọn và nhất là cái chỗ hồi nãy mình viết chữ giaytrang (xem lại ảnh).
Như vậy, nội dung thẻ <head> của mình trong một website cơ bản sẽ được như sau.

Sau khi đã chèn nội dung đó vào, bây giờ chúng ta sẽ bắt đầu thêm một vài nội dung mà ta sẽ sử dụng Cufon cho nó. Mình lấy ví dụ là áp dụng Cufon cho tất cả các thẻ h1 nhé.
Bạn chèn đoạn code này vào trong cặp thẻ <body>

<script type="text/javascript">

Cufon.replace('h1', { fontFamily: 'giaytrang' });

</script>

Giải thích:
Cufon.replace: Đây là thiết lập vùng chọn sử dụng Cufon, vì mình muốn sử dụng Cufon cho các thẻ h1 nên mình ghi là h1. Khi bạn viết thế này thì toàn bộ thẻ h1 trên web sẽ sử dụng Cufon. Nếu bạn muốn thêm các vùng chọn nâng cao thì xem phần hướng dẫn nâng cao phía dưới.
fontFamily: Đây là thuộc tính khai báo font được sử dụng trong vùng chọn này. Bạn có thể tùy chọn tên giaytrang này thành một tên khác gì mà bạn thích trong bước tạo Cufon (xem lại ảnh). Đối với nhiều người hướng dẫn thì không cần thêm thuộc tính fontFamily này nhưng theo mình là các bạn cứ thêm nếu như muốn sử dụng nhiều font trong cùng một website. Phần hướng dẫn nâng cao phía dưới sẽ giúp bạn làm việc này
Và bây giờ nội dung file HTML của mình sẽ là như thế này.

Rồi, bây giờ mở web lên xem chúng ta có gì nào.  

Hí hí, đẹp chưa nào  :* Bây giờ mình thử áp dụng Cufon cho các thẻ khác như h2, h3, p thử xem sao nhé  :food:

<script type="text/javascript">

Cufon.replace('h1,h2,h3,p', { fontFamily: 'giaytrang' });

</script>

Và kết quả là

Vậy là bạn đã chèn Cufon vào web thành công rồi đó. Nếu bạn chưa mãn nguyện về kết quả này mà muốn thêm các hiệu ứng đặc biệt vào các font chữ sử dụng Cufon kia thì mời bạn theo dõi tiếp phần sử dụng Cufon nâng cao.
Nhưng trước tiên, hãy rời khỏi ghế và ra hít thở thư giãn mắt đi các bạn nhé.  :cafe:

3. Sử dụng Cufon nâng cao

Sử dụng nhiều font khác nhau

Dĩ nhiên nếu bạn có nhu cầu sử dụng nhiều font khác nhau cho nhiều thành phần khác nhau thì có thể sử dụng đoạn Javascript sau.

<script type="text/javascript">

Cufon.replace('h1', { fontFamily: 'Font 1' });

Cufon.replace('h2', { fontFamily: 'Font 2' });

</script>

Thay đổi kích thước của font

Thêm set() vào đoạn Javascript

<script type="text/javascript">

Cufon.set('fontSize', '14px').replace('h1', { fontFamily: 'giaytrang',});

</script>

Thêm màu cho Cufon

<script type="text/javascript">

Cufon.replace('h1', { fontFamily: 'giaytrang',color:'#D82121'});

</script>

 Thêm màu gradient kèm hiệu ứng khi rê chuột vào (text có chứa link)

<script type="text/javascript">

Cufon.replace('h1', { fontFamily: 'giaytrang',color: '-linear-gradient(red, blue)',hover: {

              textShadow: '2px 2px red',

              color: '-linear-gradient(black, white)'}});

</script>

Vùng chọn cho Cufon

Theo như các ví dụ trên thì mặc định tất cả các thẻ h1 trong web đều sử dụng Cufon, nhưng nếu bạn muốn sử dụng Cufon cho từng class riêng, giả sử như class này

<h1 class="container">

Đây là thẻ h1

</h1>

Thì các bạn chèn javascript như sau

<script type="text/javascript">

Cufon.replace('h1.container', { fontFamily: 'giaytrang'});

</script>

Tham khảo thêm: Cufon Documentation – Styling

Tips

Bạn có thể kết hợp giữa CSS và Javascript để trang trí các font chữ đẹp hơn.

Lời kết

Tới đây mình nghĩ là các bạn cũng đã nắm qua cách thức sử dụng Cufon căn bản và nâng cao rồi nhỉ. Trong bài viết tiếp theo, mình sẽ hướng dẫn các bạn thêm Cufon vào WordPress nhanh chóng và tiện lợi hơn nhờ các plugin hỗ trợ. Nhưng ngay từ bây giờ, bạn có thể áp dụng vào blog WordPress của mình luôn bằng cách chèn thủ công như hướng dẫn trong bài này.
Nếu các bạn có những thắc mắc gì liên quan đến việc sử dụng và tùy chỉnh Cufon, hãy gửi bình luận ngay tại bài viết này nhé và mình sẽ giải đáp nhanh nhất có thể. Chúc mọi người làm thành công!

Read More

Tạo hiệu ứng Dialog Box

[jQuery] Hướng dẫn tạo hiệu ứng Dialog Box đơn giản

Cập nhật lần cuối ngày 05/01/2015 trong Javascript - jQuery

Dialog, Lightbox hay Popup là những thuật ngữ quen thuộc trong Jquery. Nó giúp mở một cửa sổ nhỏ, nổi bật giữa trang web để hiện thông báo hướng dẫn, giới thiệu hay tạo một form lấy thông tin từ người dùng. Những box như vậy tương tác ngay trên trang hiện tại mà không cần mở trang mới, điều này tạo sự thân thiện và thích thú với người xem.
Bài viết này, chúng ta sẽ tạo một box đăng nhập đơn giản, sử dụng HTML, CSS và jQuery.

Demo Source code

HTML

Code html bao gồm 2 thành phần cơ bản:
Tạo một button để khi click vào thì form đăng nhập được show ra:

01	<a class="login-window button" href="#login-box">Đăng nhập</a>

Sau đó là lớp “.login”, chính là form đăng nhập như sau:

01 02 03 04 05 06 07 08 09 10 11 12 13 14

<div class="login" id="login-box">Đăng nhập  <a class="close" href="#"><img class="img-close" title="Close Window" alt="Close" src="close.png" /></a> <form class="login-content" action="#" method="post"><label class="username">  <span>Tên hoặc email</span>  <input id="username" type="text" autocomplete="on" name="username" placeholder="Username" value="" />  </label>  <label class="password">  <span>Mật khẩu</span>  <input id="password" type="password" name="password" placeholder="Password" value="" />  </label>  <button class="button submit-button" type="button">Đăng nhập</button>  <a class="forgot" href="#">Quên mật khẩu?</a></form></div>

Mã html trên hoàn toàn dễ hiểu, nên mình sẽ không tập trung nhiều.

CSS

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106

/*phần tử phủ toàn màn hình,không được hiển thị*/ #over {     display: none;     background: #000;     position: fixed;     left: 0;     top: 0;     width: 100%;     height: 100%;     opacity: 0.8;     z-index: 999; } a, a:visited, a:active{     text-decoration:none; } .login {     background-color:#85B561;     height:auto;     width:450px;     font-family:Verdana, Arial, Helvetica, sans-serif;     font-size:14px;     padding-bottom:5px;     display:none;     overflow:hidden;     position:absolute;     z-index:99999;     top:10%;     left:50%;     margin-left:-300px; } .login .login_title {     color:white;     font-size:16px;     padding:8px 0 5px 8px;     text-align:left; } .login-content label {     display: block;     padding-bottom: 7px; } .login-content span {     display: block; } .login-content {     padding-left:35px;     background-color:white;     margin-left:5px;     margin-right:5px;     height:auto;     padding-top:15px;     overflow:hidden; } .img-close {     float: right;     margin-top:-43px;     margin-right:5px } .button{     display: inline-block;     min-width: 46px;     text-align: center;     color: #444;     font-size: 14px;     font-weight: 700;     height: 36px;     padding: 0px 8px;     line-height: 36px;     border-radius: 4px;     transition: all 0.218s ease 0s;     border: 1px solid #DCDCDC;     background-color: #F5F5F5;     background-image: -moz-linear-gradient(center top , #F5F5F5, #F1F1F1);     cursor: pointer; } .button:hover{      border: 1px solid #DCDCDC;     text-decoration: none;     -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.1);     -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.1);     box-shadow: 0 2px 2px rgba(0,0,0,0.1); } .login input {     border:1px solid #D5D5D5;     border-radius:5px;     box-shadow:1px 1px 5px rgba(0,0,0,.07) inset;     color:black;     font:12px/25px "Droid Sans","Helvetica Neue",Helvetica,Arial,sans-serif;     height:28px;     padding:0px 8px;     word-spacing:0.1em;     width:300px; } .submit-button{     display: inline-block;     padding: auto;     margin: 15px 75px;     width: 150px; }

Xem đoạn css trên, bạn cần chú ý tới 2 thành phần quan trọng:
Phần tử “#over”: là lớp phủ toàn màn hình, bạn ẩn nó bằng cách đặt display: none và để z-index: 999 để nó hiện  nổi bật hơn các phần tử nền. Ngoài ra position: fixed để cố định vị trí cho nó đồng thời đặt opacity: 0,8để làm mờ trang.
Thứ 2 là form đăng nhập: lớp “.login” bạn đặt z-index: 99999, lớn hơn phần tử “#mask”, vì nó sẽ nổi bật nhất trên trang web.
Các thuộc tính còn lại, bạn có thể tùy chỉnh theo ý mình sao cho đẹp nhất.

Jquery

Phần quan trong nhất là jquery. Bạn nhớ là load thư viện jquery vào trước nhé

01	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Ở đây mình dùng thư viện jquery phiên bản 1.10.2

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23

$(document).ready(function() {     $('a.login-window').click(function() {         //lấy giá trị thuộc tính href - chính là phần tử "#login-box"         var loginBox = $(this).attr('href');         //cho hiện hộp đăng nhập trong 300ms         $(loginBox).fadeIn(300);         // thêm phần tử id="over" vào sau body         $('body').append('<div id="over">');         $('#over').fadeIn(300);         return false;  });  // khi click đóng hộp thoại  $(document).on('click', "a.close, #over", function() {        $('#over, .login').fadeOut(300 , function() {            $('#over').remove();        });       return false;  }); });

Mã jquery sẽ xử lý 2 sự kiện chính:
Khi click vào nút đăng nhập: $('a.login-window').click(function():
Câu lệnh var loginBox = $(this).attr('href') sẽ lấy thuộc tính href – chính là “#login-box” . Bạn xem lại mã html ta đã có:
<a href="#login-box" class="login-window button">Đăng nhập</a>
Hàm fadeIn(300) sẽ hiện dần hộp đăng nhập trong 300ms. Bạn có thể thay đổi thời gian này và nhớ là đơn vị tính bằng ms. Hoặc cũng có thể dùng fadeIn(“slow”), fadeIn(“fast”) để lớp hiện ra chậm hay nhanh.
Câu lệnh $('body').append('<div id="over"></div>') sẽ thêm vào cuối thẻ body id “#over” mà ta đã style cho nó ở phần CSS. Sau đó là show nó ra thôi.
Sự kiện thứ 2: khi ta click vào nút đóng cửa sổ hoặc click vào lớp phủ nền “#over” thì cửa sổ đăng nhập sẽ đóng lại.
Hãy chú ý câu lệnh $(document).on('click', "a.close, #over", function(){….})
Các bạn sẽ thắc mắc tại sao không dùng $(“a.close, #over”).on(). Bởi vì, phần tử “#over” được thêm vào sau khi tài liệu ( gồm cả mã jquery trên ) được load nên nếu dùng như vậy thì hộp thoại sẽ không bị ảnh hưởng khi ta click vào nền. Do vậy sử dụng $(document).on() là hợp lý. Cái này bạn tự test để kiểm tra và xem thêm về hàmon() tại http://api.jquery.com/on/.
Nhiều bạn có thể sử dụng hàm live() thay cho hàm on(). Tuy nhiên từ phiên bản jquery 1.9 thì hàm live()không được hỗ trợ nữa và nó sẽ không hoạt động.
Hàm fadeOut() là công việc ngược lại hàm fadeIn(), ẩn mờ dần box đăng nhập, còn hàm remove() sẽ loại bỏ phần tử “#over” khỏi tài liệu.
Như vậy là chúng ta đã tạo được một box dialog đơn giản để điền thông tin đăng nhập. Bạn hãy thực hành và tạo những hiệu ứng và style đẹp hơn mà mình thích.

Lời kết

Mình nghĩ rằng không khó để tìm ra những plugin tạo lightbox hay dialog trên mạng. Rất nhiều, tuy nhiên nếu các bạn tự tay xây dựng cho mình một sản phẩm riêng thì vẫn thích thú hơn đúng không? Nhất là những bạn đang bắt đầu với jquery. Hy vọng bài viết sẽ có ích với các bạn. Hãy comment bên dưới nếu bạn cần trao đổi nhé!

Read More