Microdata là gì?

Giới thiệu
Vào 05.2011, bộ ba Google, Yahoo, Bing đã công bố schema.org và mọi người đã bắt đầu nói về dữ liệu có cấu trúc. Schema.org là một cách mới để các máy tìm kiếm hiểu các trang web. Nếu các tác giả nội dung web thêm một chút siêu dữ liệu vào các trang của họ — chỉ một vài thuật ngữ của bảng từ vựng — thì các kết quả tìm kiếm của họ hiển thị tốt hơn trong cả ba máy tìm kiếm.
Đánh dấu thêm đã không thay đổi cách hiển thị các kết quả tìm kiếm cho nhiều trang đã thực hiện schema.org. Mặc dù, các tác giả nội dung web vẫn còn háo hức để nhận được các trang của họ được đánh dấu và sẵn sàng để sử dụng trong cả ba máy tìm kiếm lớn.
Schema.org đặt ra một thách thức cho các tác giả web chưa có kinh nghiệm với các cú pháp khác nhau để bổ sung thêm dữ liệu có cấu trúc vào HTML. Các cú pháp là:
  • Microformats (vi định dạng).
  • RDFa
  • Microdata (Vi dữ liệu).
Để tăng thêm thách thức này, Google (máy tìm kiếm có ảnh hưởng nhất đối với nhiều tác giả web) đã cho biết nó sẽ chỉ xử lý microdata. Microdata, là mới nhất trong ba cú pháp nói trên, vẫn chưa có nhiều công cụ hỗ trợ.
Trong bài này, hãy tìm hiểu cách sử dụng Drupal để thêm microdata vào các trang của bạn. Chuẩn bị nội dung của bạn sao cho có thể sử dụng nó trong các ứng dụng như Rich Snippets của Google.
Microdata là gì?

Các từ viết tắt thông dụng

  • FOAF: Bạn của một người bạn
  • RDF: Khung công tác mô tả tài nguyên
  • RDFa: RDA với các thuộc tính
Microdata là một cách đơn giản để thêm dữ liệu có cấu trúc vào các trang web. Nó định nghĩa một vài thuộc tính, như itemtype  itemprop, có thể được đặt vào các thẻ HTML để cho biết trang đó là về cái gì. Microdata được Ian Hickson, một biên tập viên về đặc tả HTML 5, giới thiệu vào năm 2009. Mặc dù, các nguồn gốc của ý tưởng này có trước đó lâu rồi.
Microdata dựa trên RDFa, là một cách đặt RDF trong HTML. Ý tưởng về RDFa đã được Mark Birbeck giới thiệu vào năm 2004 với một lưu ý được W3C công bố. Sau đó, ý tưởng này được tích hợp vào phiên bản tiếp theo là XHTML. RDFa đã giới thiệu một số thuộc tính HTML mới, như property  about và đã sử dụng lại một số thuộc tính, như rel.
RDFa mạnh mẽ, nhưng với các tác giả, có thể khó mà biết được liệu RDFa của họ có đúng không do các tương tác của các thuộc tính đôi khi phức tạp. RDFa cũng đã thừa hưởng một số tính năng của XML, như các tiền tố vùng tên, có thể gây khó hiểu.
Các microformat (vi định dạng), một phiên bản khác của dữ liệu có cấu trúc trong XHTML, đã được khởi chạy gần một năm sau bởi một nhóm các nhà phát triển. Trái ngược với RDFa, các microformat sử dụng lại các thuộc tính XHTML hiện có mà các tác giả nội dung web vẫn thường sử dụng, như thuộc tính rel trên các liên kết. Các microformat cũng thêm một ít ngữ nghĩa bên trong các thuộc tính đó. Người ta đã đặt tầm quan trọng vào cách chỉ đánh dấu nội dung nhìn thấy được; đối với nội dung không nhìn thấy được, rất dễ bị sử dụng sai hoặc mất đồng bộ với nội dung nhìn thấy được.
Một vấn đề với các microformat là không có một cách chung để phân tích cú pháp chúng. Thay vào đó, người ta đã tăng thêm sự hỗ trợ cho mỗi microformat. Ví dụ, nếu bạn muốn xử lý dữ liệu lịch và dữ liệu địa chỉ, bạn phải chắc chắn rằng trình phân tích cú pháp của bạn hỗ trợ cả hai loại dữ liệu đó hoặc sử dụng hai trình phân tích cú pháp khác nhau. Cũng có thể rất khó để nhận được một microformat mới được xuất bản thông qua phương thức cộng đồng.
Microdata kết hợp các ý tưởng tốt từ cả hai các microformat lẫn RDFa với nhau. Microdata:
  • Giảm sự phức tạp của RDFa bằng cách giảm số lượng các thuộc tính và các tùy chọn cho việc bố trí của chúng.
  • Loại bỏ các tiền tố vùng tên.
  • Duy trì phân tích cú pháp chung RDFa, giúp cho việc tạo các công cụ làm việc trên dữ liệu đã xuất bản dễ dàng hơn.
  • Duy trì khả năng cho các nhóm người khác nhau để tạo các bộ các giá trị thuộc tính riêng của họ, được gọi là các bảng từ vựng, để sử dụng với microdata.

Tạo thanh điều hướng Breadcrumbs có thứ bậc Label cho Blogger


Breadcrumbs là thanh điều hướng được sử dụng để hiển thị thứ bậc label trong một trang web/blog. Nó giúp cho người đọc biết được mình đang ở đâu trong trang web (đang đọc bài trong mục nào). Thông thường đặt ở đầu blog tốt hơn là ngay trên bài đăng hoặc tiêu đề chính của một trang bài viết. Trong Blogger không có thư mục con thực sự mà bạn có thể hiển thị một đường dẫn phân cấp, nhưng ta có thể sử dụng các Nhãn như là một thư mục con. Bài này sẽ hướng dẫn làm thế nào để hiển thị một hoặc nhiều label trong Breadcrumbs và cách làm cho chúng xuất hiện trong "Kết quả tìm kiếm" của Google bằng cách sử dụng kỹ thuật Microdata.

Ảnh minh họa


☼ Cách tiến hành:

1. Đăng nhập vào Blog

2. Vào Mẫu (Template)

3. Chọn Chỉnh sử HTML

4. Tìm đoạn: <div class='blog-posts hfeed'>


- Và thêm vào sau nó mã sau:
<b:if cond='data:blog.homepageUrl != data:blog.url'>
  <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
    <div class='breadcrumbs' itemscope='itemscope' itemtype='http://data-vocabulary.org/Breadcrumb'>
      <a class='first' expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Home</span></a> 
      <a expr:href='data:blog.url'> <span itemprop='title'><data:blog.pageName/></span> </a>
    </div>
 <b:else/>
  <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <b:loop values='data:posts' var='post'>
       <b:if cond='data:post.labels'>
         <div class='breadcrumbs' itemscope='itemscope' itemtype='http://data-vocabulary.org/Breadcrumb'>
           <a class='first' expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Home</span></a>
           <b:loop values='data:post.labels' var='label'>
            <b:if cond='data:label.isLast == &quot;true&quot;'>
             <a expr:href='data:label.url' itemprop='url'><span itemprop='title'><data:label.name/></span></a>
             </b:if>
           </b:loop>
          </div>
         <b:else/>
          <div class='breadcrumbs ' itemscope='itemscope' itemtype='http://data-vocabulary.org/Breadcrumb'>
           <a class='first' expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Home</span></a>
           <a href='#'><span> Unlabelled</span></a>
         </div>
       </b:if>
     </b:loop>
   <b:else/>
    <b:if cond='data:blog.pageType == &quot;archive&quot;'>
      <div class='breadcrumbs ' itemscope='itemscope' itemtype='http://data-vocabulary.org/Breadcrumb'>
       <a class='first' expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Home</span></a> 
       <a expr:href='data:blog.url'><span>Archives for <data:blog.pageName/></span></a>
      </div>
   <b:else/>
    <b:if cond='data:blog.pageType == &quot;index&quot;'>
      <b:if cond='data:blog.pageName == &quot;&quot;'>
      <b:else/>
       <div class='breadcrumbs' itemscope='itemscope' itemtype='http://data-vocabulary.org/Breadcrumb'>
        <a class='first' expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Home</span></a>
        <a expr:href='data:blog.url'><span itemprop='title'>Posts filed under <data:blog.pageName/></span></a>
       </div>
     </b:if>
    </b:if>
   </b:if>
  </b:if>
 </b:if>
</b:if>

- Nếu tìm thấy nhiều đoạn <div class='blog-posts hfeed'> mà bạn không biết thêm vào chỗ nào thì có thể  thay nó dưới code này: <b:includable id='main' var='top'>

5. Thêm CSS sau vào trước thẻ ]]></b:skin>
/* Breadcrumbs
---------------------------------------------------------*/
.breadcrumbs {
  background: url("http://4.bp.blogspot.com/-nMV4Sjs0XqE/UX-phKlumUI/AAAAAAAAAKs/v_GDHbVpkyo/s1600/breadcrumbs_bg.png") repeat scroll 0 0 transparent;
  list-style: none;
  margin-bottom: 10px;
}
.breadcrumbs  a {
  background-image: url("http://4.bp.blogspot.com/-nMV4Sjs0XqE/UX-phKlumUI/AAAAAAAAAKs/v_GDHbVpkyo/s1600/breadcrumbs_bg.png");
  background-position: 100% 0;
  background-repeat: no-repeat;
  color: #666666;
  display: inline-block;
  font-size: 12px;
  height: 29px;
  line-height: 29px;
  margin-right: -20px;
  padding: 0 25px;
  position: relative;
  text-decoration: none;
  vertical-align: top;
  z-index: 1;
}
.breadcrumbs  a:hover   {
  background-position: 100% -48px;
  color: #333;
}
.breadcrumbs .first , .breadcrumbs .first:hover {z-index: 30 !important;}
.breadcrumbs .first span {
  background-image: url("http://4.bp.blogspot.com/-nMV4Sjs0XqE/UX-phKlumUI/AAAAAAAAAKs/v_GDHbVpkyo/s1600/breadcrumbs_bg.png");
  display: inline-block;
  height: 29px;
  margin-left: -25px;
  padding-left: 12px;
  z-index: 12 !important;
}
.breadcrumbs a:nth-child(2) {z-index:29 !important;}
.breadcrumbs a span:hover {
  background-position: 0 -48px;
  color: #333;
}
6. Lưu lại là xong!

- và Bây giờ Breadcrumbs đã xuất hiện trong trang bài đăng, trang Label, trang Lưu Trữ cũng như các trang tĩnh.

Một số tùy chọn hiển thị một hoặc nhiều nhãn (label)


Đoạn mã trên chỉ cho thấy 1 Label, Trong trường hợp bài viết của bạn có gán nhiều nhãn mà bạn muốn hiển thị tất cả các nhãn trên thanh Breadcrumbs thì hãy bỏ dòng tô màu xanh trong Bước 4 và thêm CSS sau vào trước thẻ ]]></b:skin>
.breadcrumbs a:nth-child(3) {z-index:28 !important;}
.breadcrumbs a:nth-child(4) {z-index:27 !important;}
.breadcrumbs a:nth-child(5) {z-index:26 !important;}
.breadcrumbs a:nth-child(6) {z-index:25 !important;}
.breadcrumbs a:nth-child(7) {z-index:24 !important;}
.breadcrumbs a:nth-child(8) {z-index:23 !important;}
.breadcrumbs a:nth-child(9) {z-index:22 !important;}
.breadcrumbs a:nth-child(10) {z-index:21 !important;}
.breadcrumbs a:nth-child(11) {z-index:20 !important;}
.breadcrumbs a:nth-child(12) {z-index:19 !important;}
.breadcrumbs a:nth-child(13) {z-index:18 !important;}

Done! Hãy thưởng thức thành quả bạn đạt được nhé.

Thêm nút "Chia sẻ trên Facebook" lên thanh Bookmarks (nút chia sẻ nhanh lên facebook)

Khi các bạn muốn chia sẻ link, hay một bài viết thì các bạn phải copy link của nó rồi paste vào ô trang thái rồi bấm đăng cũng chưa được tiện cho lắm. Facebook có hỗ trợ nút "Chia sẻ trên Facebook" mà chúng ta có thể để nó trên thanh Bookmarks của trình duyệt. Nó sẽ thuận tiện hơn rất nhiều nếu như bạn là một người hay chia sẻ link hay bài viết.


Các bạn vào link này: http://www.facebook.com/share_options.php

Và đơn giản chỉ cần giữ chuột trái kéo cái biểu tượng lên Bookmarks là xong (Xem hình).


Hoặc các bạn có thể click chuôt phải vào Bookmark chọn New Bookmark trong Firefox và điền vào:
- Name: Chia sẻ trên Facebook (hoặc tuỳ các bạn đặt)
- Location (URL):
javascript:var%20d=document,f='http://www.facebook.com/share',l=d.location,e=encodeURIComponent,p='.php?src=bm&v=4&i=1367282529&u='+e(l.href)+'&t='+e(d.title);1;try{if%20(!/^(.*\.)?facebook\.[^.]*$/.test(l.host))throw(0);share_internal_bookmarklet(p)}catch(z)%20{a=function()%20{if%20(!window.open(f+'r'+p,'sharer','toolbar=0,status=0,resizable=1,width=626,height=436'))l.href=f+p};if%20(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else{a()}}void(0)

Hoặc Add page trong Google Chrome
 - Name: Chia sẻ trên Facebook
 - URL:
javascript:var d=document,f='http://www.facebook.com/share',l=d.location,e=encodeURIComponent,p='.php?src=bm&v=4&i=1367281023&u='+e(l.href)+'&t='+e(d.title);1;try{if (!/^(.*\.)?facebook\.[^.]*$/.test(l.host))throw(0);share_internal_bookmarklet(p)}catch(z) {a=function() {if (!window.open(f+'r'+p,'sharer','toolbar=0,status=0,resizable=1,width=626,height=436'))l.href=f+p};if (/Firefox/.test(navigator.userAgent))setTimeout(a,0);else{a()}}void(0)

Sau đó OK.

Khi các bạn đang xem 1 bài viết mà muốn chia sẻ luôn bạn chỉ việc bấm vào nút "Chia sẻ Facebook" trên thanh Bookmarks và nó sẽ hiện ra một cửa sổ như hình dưới.


Rồi bấm "Chia sẻ liên kết". Đơn giản và thuận tiện hơn rất nhiều đúng không nào.

Xóa dòng chữ "Hiển thị các bài đăng có nhãn..." trong Blogger mà vẫn giữ lại thông báo khác

Trong Blogspot, mỗi khi ta bấm vào xem nhãn của bài viết thường xuất hiện thông báo "Hiển thị các bài đăng có nhãn...Hiển thị tất cả bài đăng" (Với blog dùng ngôn ngữ tiếng Anh là "Showing posts with label ... Show all posts") như bên dưới:

Dòng thông báo với blog sử dụng ngôn ngữ tiếng Việt


Dòng thông báo với blog sử dụng ngôn ngữ tiếng Anh


Nếu bạn muốn xóa dòng thông báo này,Hãy thực hiện theo các bước bên dưới:

1. Đăng nhập vào Blogger > Mẫu > Chỉnh sửa HTML. Sau đó bạn làm theo 1 trong 2 cách dưới đây

Cách 1 Chèn đọan CSS sau vào phía trên (hoặc trước) dòng ]]></b:skin>
.status-msg-wrap{
  display:none;
}

Cách 2 Nếu cách 1 không được bạn tìm đến đoạn code bên dưới rồi xoá nó đi:
  <b:if cond='data:navMessage'>
  <div class='status-msg-wrap' style='width:100%'>
    <div class='status-msg-body'>
      <data:navMessage/>
    </div>
    <div class='status-msg-border'>
      <div class='status-msg-bg'>
        <div class='status-msg-hidden'><data:navMessage/></div>
      </div>
    </div>
  </div>
  <div style='clear: both;'/>
  </b:if>
 > Xong!

Nhưng trong cả 2 cách này sẽ làm mất đi 1 thông báo mà bạn có thể cần đến, đó là thông báo link hỏng.


Khi bạn xem 1 bài viết đã bị xoá, hoặc link sai trong blog sẽ hiện ra 1 dòng thông báo để người đọc biết được link bài viết không hợp lệ. Để khắc phục điều này các bạn hãy làm như sau:

Thay toàn bộ đoạn code:
  <b:if cond='data:navMessage'>
  <div class='status-msg-wrap' style='width:100%'>
    <div class='status-msg-body'>
      <data:navMessage/>
    </div>
    <div class='status-msg-border'>
      <div class='status-msg-bg'>
        <div class='status-msg-hidden'><data:navMessage/></div>
      </div>
    </div>
  </div>
  <div style='clear: both;'/>
  </b:if>
Bằng đoạn code dưới đây:
  <b:if cond='data:navMessage'>
    <b:if cond='data:blog.pageType != &quot;index&quot;'>
      <b:if cond='data:blog.pageType != &quot;archive&quot;'>
  <div class='status-msg-wrap' style='width:100%'>
    <div class='status-msg-body'>
      <data:navMessage/>
    </div>
    <div class='status-msg-border'>
      <div class='status-msg-bg'>
        <div class='status-msg-hidden'><data:navMessage/></div>
      </div>
    </div>
  </div>
  <div style='clear: both;'/>
        </b:if>
      </b:if>
  </b:if>
Lưu lại là xong. Vấn đề của bạn đã được giải quyết.

Tổng hợp các cách đăng nhập Windows 7 mà quên Pass

Cách 1: Sử Dụng Chính Tài Khoản Admin

Trường Hợp Bạn Quên Mật Khẩu Của Tài Khoản Không Phải Tên Administrator. Khởi động lại máy tính và khi Windows hiển thị màn hình Logon, bấm tổ hợp phím Ctrl + Alt + Del 2 lần, một màn hình login khác sẽ hiện ra. Trong mục Username bạn gõ vào là Administrator. Và mục Password bạn để trống sau đó bấm Enter.


Bình thường khi cài đặt Windows thì mật khẩu của tài khoản Administrator thường được để trống nên bạn có thể dùng cách trên để login vào Windows.Sau khi login được vào Windows, bạn kích phải chuột vào My Computer -> Manage. Một cửa sổ quản trị hiện lên, bạn chọn vào mục Local Users and Groups -> Users. Bên phải sẽ hiển thị ra danh sách của tất cả các tài khoản có trong máy tính của bạn. Chọn tài khoản bạn quên mật khẩu, kích phải chuột chọn Set Password. Sau đó nhập lại Password mới cho tài khoản đó rồi bấm OK.

Khởi động lại máy tính và đăng nhập lại tài khoản với mật khẩu mới là được.


Cách 2: Sử Dụng CD Hiren’s Boot V 7.4 Trở Lên

Trường hợp tài khoản quên mật khẩu là Administrator

Bước 1: Khởi động từ đĩa CD Hiren’s Boot 7.4. Trong menu xuất hiện, chọn Next\Password Tools\Active Password Changer 2.1(NT/2000/XP/2003)

Bước 2: Trong cửa sổ Active @ Password Changer, bạn nhấp vào số 2 để chọn mục Search for MS SAM Database(s) on all hard disks and logical drives.
Nhấn Enter

Bước 3: Nếu bạn nhập được thông báo “There is one MS SAM database, press Enter to continue”, hãy nhấn Enter. Chương trình sẽ liệt kê tất cả các user có trên hệ thống Bạn nhấn số 0 để chọn user Administrator. nhấn enter

Bước 4: Nhấn Y, nhấn Enter để xác định nhận việc Reset mật khẩu user Administrator. Chương trình thông báo đã phục hộI mật khẩu thành công, nhấn ESC nhiều lần để thoát khỏI chương trình.
Sau đó khởI động lạI máy. bạn sẽ vào được Windows vớI account Administrator mà không cần mật khẩu nữa.


Cách 3: Sử Dụng Chính Đĩa CD Cài Đặt Windows

Bạn phải chắc là bạn chỉ quên mật khẩu tài khoản đăng nhập của mình và hệ thống của bạn vẫn khởi động bình thường. Bên cạnh đó bạn phải có sẵn trong tay đĩa CD cài đặt Windows XP có thể khởi động được và CD Key cài đặt Windows XP.

Thực hiện khôi phục mật khẩu Đưa đĩa CD cài đặt Windows XP vào ổ CD-ROM và khởi động hệ thống của bạn Khi hệ thống yêu cầu bạn bấm một phím bất kỳ để khởi động từ đĩa CD, bạn ấn Enter.

Bạn phải chờ đến khi hệ điều hành tải xong phần chuẩn bị cài đặt, sau đó bạn ấn ENTER để vào tiến trình cài đặt Windows. Ấn F8 khi xuất hiện bản Licensing Agreement. Tại màn hình kế tiếp bạn lựa chọn “Sửa chữa” (Repair) lại hệ điều hành. Sử dụng phím mũi tên lên xuống để lựa chọn đúng hệ điều hành trên đĩa cứng mà bạn cần sửa – ở đây là hệ điều hành mà bạn đã quên mật khẩu.

Quá trình Repair bắt đầu khởi động chạy. Trình cài đặt Windows sẽ tiến hành kiểm tra đĩa cứng của bạn và sao chép các tệp tin. Tiến trình này phải mất ít nhất vài phút tuỳ theo tốc độ hệ thống của bạn. Sau quá trình sao chép hệ thống sẽ khởi động lại một lần. Trong quá trình khởi động lần này bạn không được bấm bất kỳ một phím nào hết và phải chờ đến khi trình cài đặt Windows bắt đầu xuất hiện, lần này là với giao diện đồ hoạ vốn có của Windows XP.

Giờ đây bạn phải liên tục chú ý đến góc cuối cùng bên tay trái của màn hình cài đặt khi nào bạn nhìn thấy dòng chữ Installing Devices thì bạn ngay lập tức ấn tổ hợp phím SHIFT+F10. Một cửa sổ nhập lệnh văn bản kiểu DOS xuất hiện và bạn gõ vào lệnh NUSRMGR.CPL rồi ấn ENTER.

Bạn sẽ được gì? Bạn sẽ truy cập vào User Accounts của Control Panel và ở đây bạn có thể đổi lại mật khẩu của mình một cách rất đơn giản. Còn nếu bạn không muốn phải nhập mật khẩu trong quá trình đăng nhập thì tại cửa sổ nhập mã lệnh ở trên bạn gõ lệnh control userpasswords2 rồi lựa chọn không cho phép hỏi mật khẩu khi đăng nhập là được. Hoàn tất mọi quá trình bạn đóng cửa sổ và tiếp tục với quá trình cài đặt trong giây lát.


Cách 4:
Cách này được dùng nếu trước đây, khi tạo password trong “User accounts”, bạn đã có thêm vào dòng “Password hint” cụm từ gợi ý trong trường hợp quên password. Khi bạn gõ nhầm password, Windows sẽ nhắc giúp bạn câu này để có thể giúp bạn nhớ lại password.

Thay đổi màn hình đăng nhập Windows 7

Nếu sử dụng Windows 7 một thời gian cùng với việc thiết lập mật khẩu để bảo vệ quyền riêng tư và bảo mật dữ liệu thì bạn sẽ cảm thấy nhàm chán với màn hình đăng nhập. Trước đây, GenK cũng có khá nhiều thủ thuật chia sẻ với các bạn để có thể đổi hình nền ở màn hình đăng nhập trong Windows 7. Tuy nhiên, đa số đều phải cần đến phần mềm của hãng thứ 3. Nhưng bản thân Windows 7 cũng có thể làm được điều đó, có đều tính năng này mặc định đã bị vô hiệu hóa, để sử dụng bạn cần vào thiết lập với registry để bật lại tính năng này.

Bật tính năng tùy chỉnh màn hình đăng nhập

Tại ô tìm kiếm ở giao diện Start, bạn nhập vào từ khóa regedit hoặc bấm tổ hợp phím Windows + R rồi nhập vào regedit và nhấn Enter để mở giao diện Registry.


Trong giao diện Registry, bạn tìm đến khóa OEMBackground theo đường dẫn HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Authentication\LogonUI\Background


Nhấp đúp chuột vào khóa OEMBackground rồi thay đổi giá trị ở Value thành 1. Chú ý: thao tác này chỉ có tác dụng trên themes đang sử dụng, khi bạn thay đổi themes bạn cần thực hiện lại thao tác này.


Tiếp tục tại ô tìm kiếm của giao diện Start hoặc trên hộp thoại Run bạn nhập vào gpedit.msc.


Rồi tìm theo đường dẫn Computer Configuration\Administrative Templates\System\Logon.


Bạn sẽ thấy có một tùy chọn Always use custom login background, giờ hãy nhấp đúp chuột vào tùy chọn này và thiết lập sang chế độ Enabled.


Khởi động lại hệ thống để đảm bảo mọi thiết lập đều được làm mới.

Thiết lập hình nền

Bạn có thể lựa chọn một hình bất kỳ phù hợp với độ phân giải màn hình đang sử dụng, nhưng lưu ý kích thước tập tin ảnh không được lớn hơn 256KB. Và đặt tên cho tập tin ảnh làbackgroundDefault.jpg.

Tiếp theo, bạn vào thư mục theo đường dẫn C:\Windows\System32\oobe rồi tạo 2 thư mục info info\backgrounds


Copy tập tin backgroundDefault.jpg đã chuẩn bị vào thư mục info\backgrounds.


Giờ bạn có thể khởi động lại hệ thống hoặc bấm tổ hợp phím Windows+L để thấy kết quả là hình nền đã được thay đổi.


Chỉ với vài thiết lập đơn giản kể trên, bạn có thể nhanh chóng thay đổi hình nền đăng nhập nếu cảm thấy nhàm chán.

Khoá màn hình máy tính xách tay khi gập máy (Lock this computer when i close the lid)



Tự động chuyển ra màn hình đăng nhập khi bạn đóng Laptop lại. Trong windows 7 có hỗ trợ các tính năng:
 - Sleep: Máy ở chế độ ngủ. Ở chế độ này máy vẫn hoạt động nhưng không còn kết nối mạng, các chương trình vẫn mở nhưng không hoạt động (ví dụ: IDM vẫn mở nhưng không còn download, hay trình diệt virus vẫn mở nhưng không chạy diệt virus trong khi trước đó bạn vẫn đang download hoặc diệt virus). Khi bạn mở máy ra hoặc bấm vào bất kỳ nút nào (trong trường hợp bạn không gấp máy mà bấm vào nút Sleep trên bàn phím) máy sẽ mở lên màn hình Login.
 - Hibernate: Chế độ ngủ đông cũng lưu cấu hình như chế độ Sleep nhưng máy tắt hẳn không còn hoạt động. Khi các bạn bật máy lên thì máy trở lại đúng mang hình chính của trước khi bạn tặt máy, bạn có thể tiếp tục các chương trình bạn sử dụng trước đó.
 - Shut Down: Tắt máy. (cái này chắc các bạn cũng biết :D)
 - Do nothing: Là không làm gì hết. Tức là máy vẫn hoạt động như bình thương và chỉ tắt màn hình.



*Nhưng những chức năng này vẫn chưa đủ, nhiều khi bạn muốn khi đóng nắp máy tính lại nó sẽ tự động khoá màn hình (đưa ra màn hình đăng nhập) và máy vẫn hoạt động bình thường. Windows 7 có chức năng Lock nhưng bạn phải làm thủ công: Start > Nút mở rộng Shut down > Lock (hoặc WinKey + L) sau đó gấp máy. Nó sẽ không được thuận tiện cho lắm trong một vài trường hợp. Và dưới đây mình xin đưa ra 2 cách để bạn có thể sử dụng được chức năng này.

Cách 1: Sử dụng Registry
1. Vào Run gõ regedit. Cửa sổ mới mở lên bạn tìm theo khoá sau. HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\SessionManager\Power
2. Click chuột phải chọn New > DWORD (32 bits)
3. Đặt tên giá trị vừa tạo ra là: AwayModeEnabled
4. Mở lên (click đúp hoặc Enter hoặc click chuột phải chọn Modify) > Value data để là 1 (Base là Hexadecimal) > OK.
*Hoặc các bạn có thê tải file REG này về chạy nó bằng cách click đúp chuột (thay cho 4 bước trên). Link: http://www.mediafire.com/?ow2ud7bf4mbiavy
5. Cuối cung là mở Power Options > Choose what closing the close lid does >  và chọn chế độ Sleep.

Cách 2: Sử dụng phần mềm LidLock
Phần mềm này rất nhẹ và gọn gàng, rễ sử dụng.
Download: Lid Lock

LidLock - Phần mềm khoá màn hình khi đóng nắp Laptop

Phầm mềm này giúp bạn khoá màn hình máy tính và đưa về màn hình login khi bạn mở nắp.
Bạn có thể tham khảo thêm bài: Khoá màn hình máy tính xách tay khi gập máy (Lock this computer when i close the lid)


Các thiết lập của phần mềm.
 - Automatically run on startup: Tự động khởi động phần mềm cùng windows
 - After lid closes wait ... min before locking: Thời gian đợi khoá màn hình sau khi bạn đóng nắp laptop.
 - After locking wait ... min then ... : Sau khi khoá màn hình trong khoảng thời gian bao lâu sẽ chế độ mà bạn thiết lập (Sleep, Hibernate)

Download: http://www.mediafire.com/?9xq3wn3n4928i41

Sửa lỗi ảnh quá lớn tràn ra ngoài khung bài viết trong Blogger (Resize ảnh)



Khi các bạn làm Blogger có thể sẽ gặp phải lỗi kích thước ảnh qua lớn và vượt ra ngoài phần khung hiển thị bài viết trong Blog. có 2 cách giải quyết vấn đề này tương đối đơn giản.

 - Cách 1: Blogger cũng hỗ trợ công cụ resize ảnh bằng cách bạn sẽ chọn kích thước cho từng ảnh khi bạn đăng bài viết của mình giống như hình dưới.


Cách 2: rất đơn giản chỉ bằng 1 đoạn CSS, nó sẽ tự động resize những ảnh nào có kích thước lớn hơn khung hiển thị bài viết, và bạn không phải mất công chỉnh từng ảnh một khi viết bài.

Bước 1: Truy cập vào Blogger:
- Truy cập vào Blogger Bảng điều khiển (Dashboard) > Bố cục (Layout) > Chỉnh sửa HTML (Edit HTML)
Bước 2: Tìm: ]]></b:skin> và đặt trước nó đoạn mã sau:
.post img { 
  max-width:500px; /* Chiều rộng lớn nhất của ảnh */
  max-height:400px; /* Chiều cao lớn nhất của ảnh */
}
Bạn có thể sửa lại giá trị của max-width và max-height cho phù hợp với blog của bạn. Còn nếu bạn muốn hình ảnh của bạn khi hiển thị ra có kích thước cố định là 500x400 thì các bạn để đoạn code sau
.post img { 
  width:500px; /* Chiều rộng của ảnh */
  height:400px; /* Chiều cao của ảnh */
}
Hoặc nếu bạn chỉ muốn resize cái ảnh nào có chiều rộng quá lớn thì chỉ cần để 1 giá trị là max-width hoặc width.
.post img { 
  max-width:500px; /* Chiều rộng lớn nhất của ảnh */
}
 hoặc
.post img { 
  width:500px; /* Chiều rộng của ảnh */
}
 Cái khác nhau giữa max-width và width ở đây là:
 - max-width thì chỉ resize những ảnh nào lớn hơn giá trị bạn chỉ định. (Khuyên dùng)
 - width là resize tất cả, kể cả ảnh nhỏ hơn giá trị bạn chỉ đinh, nó cũng sẽ phóng to ảnh nhỏ đó đến kích thước mà bạn muốn resize ảnh.
OK rôi, giờ chỉ cẩn lưu lại là xong.

Thuộc tính transition trong CSS - Xác định một quá trình chuyển đổi khi có một hành động

Thuộc tính transition xác định một quá trình chuyển đổi khi có một hành động.

Cấu trúc

tag {
    transition: giá trị;
    -moz-transition: giá trị;
    -webkit-transition: giá trị;
    -o-transition: giá trị;
    -ms-transition: giá trị;
}
Trong đó:
  • -moz-transition hỗ trợ cho firefox.
  • -webkit-transition hỗ trợ cho Google Chrome và Safari.
  • -o-transition hỗ trợ cho Opera.
  • -ms-transition hỗ trợ cho IE.

Ví dụ transform với giá trị matrix3d(n1,n2,n3,...,n15,n16)

Thuộc tính transform với giá trị matrix3d(n1,n2,n3,n4,n5,n6n7,n8,n9,n10,n11,n12,n13,n14,n15,16): Định nghĩa một biến đổi 3D, bằng cách sử dụng một ma trận với 16 giá trị.

HTML viết:

<html>
<head></head>
<body>
<p>transform</p>
</body>
</html>

CSS viết:

p {
    background: #cc0000;
    height: 50px;
    margin: 0 auto;
    width: 120px;
}

Hiển thị trình duyệt khi chưa có transform:

transform

Thêm thuộc tính transform: matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n), CSS viết:

p {
    background: #cc0000;
    height: 50px;
    margin: 0 auto;
    width: 120px;
    transform: matrix3d(1,0,0,-0.008,0,1,0,0,0,0,1,0,0,0,0,1);
  -moz-transform: matrix3d(1,0,0,-0.008,0,1,0,0,0,0,1,0,0,0,0,1);
  -webkit-transform: matrix3d(1,0,0,-0.008,0,1,0,0,0,0,1,0,0,0,0,1);
  -o-transform: matrix3d(1,0,0,-0.008,0,1,0,0,0,0,1,0,0,0,0,1);
  -ms-transform: matrix3d(1,0,0,-0.008,0,1,0,0,0,0,1,0,0,0,0,1);
}

Hiển thị trình duyệt khi có transform:

transform

Thuộc tính transform trong CSS - Xoay, co dãn, bóp méo đối tượng

Đối với các Designer khi tiến hành xoay hoặc co giãn ảnh thường họ dùng các công cụ đồ họa như Photoshop, Firework,... để thực hiện, nhưng đối với CSS3 thì chúng ta thực hiện xoay đối tượng một cách hết sức đơn giản chỉ với một vài dòng CSS. Để minh chứng cho điều đó trong bài viết này tôi xin trình bày với các bạn cách xoay và co giãn một đối tượng ảnh bằng cách dùng các lệnh của CSS3.

Một số giá trị của thuộc tính transform:
rotate: xoay đối tượng
scale: co giãn đối tượng
skew: bóp méo đối tượng
translate: dịch chuyển đối tượng

Cấu trúc:
đối_tượng {
   transform: giá_trị; /* All */
   -ms-transform: giá_trị; /* Cho IE9 */
   -webkit-transform: giá_trị); /* Chrome và Safari */
   -moz-transform: giá_trị; /* Firefox */
   -o-transform: giá_trị; /* Opera */
}

Ví dụ về thuộc tính transform: perspective()

Thuộc tính transform với giá trị perspective: Định nghĩa một biến đổi 3D dưới dạng phối cảnh.

HTML viết:

<html>
<head></head>
<body>
<p>transform</p>
</body>
</html>

CSS viết:

Giả sử ban đầu ta thực hiện một biến đổi rotateY(45deg)
p {
    background: #cc0000;
    height: 50px;
    margin: 0 auto;
    width: 120px;
    transform: rotateY(45deg);
    -moz-transform: rotateY(45deg);
    -webkit-transform: rotateY(45deg);
    -o-transform: rotateY(45deg);
    -ms-transform: rotateY(45deg);
}

Hiển thị trình duyệt khi thực hiện một biến đổi rotateY(45deg):

transform
Ta thấy thành phần đã thực hiện một phép quay 45 độ, tuy nhiên với góc nhìn 2D ta không thể nào thấy được góc quay đó, mà chỉ thấy thành phần bị biến dạng, để nhìn được góc quay này ta hãy thêm thuộc tính perspective.

Thêm thuộc tính transform: perspective(), CSS viết:

p {
    background: #cc0000;
    height: 50px;
    margin: 0 auto;
    width: 120px;
    transform: perspective(400px) rotateY(45deg);
    -moz-transform: perspective(400px) rotateY(45deg);
    -webkit-transform: perspective(400px) rotateY(45deg);
    -o-transform: perspective(400px) rotateY(45deg);
    -ms-transform: perspective(400px) rotateY(45deg);
}

Hiển thị trình duyệt khi có transform: perspective()

transform

Thuộc tính border-radius trong CSS - Bo góc cho thành phần

Thuộc tính border trong css3 dùng để định dạng các dạng bo góc của border ngoài dạng đã được định nghĩa ởcss2 (Xem thêm về border trong css2).

Cấu trúc

tag {
    border: bề-dày kiểu mã-màu;
    border-radius: giá trị;
    -moz-border-radius: giá trị;
    -webkit-border-radius: giá trị;
    -ms-border-radius: giá trị;
    -o-border-radius: giá trị;
}
Trong đó:
  • -moz-animation hỗ trợ cho firefox.
  • -webkit-animation hỗ trợ cho Google Chrome và Safari.
  • -ms-animation hỗ trợ cho Internet Explorer.
  • -o-animation hỗ trợ cho Opera.

Thuộc tính của border-radius trong css3:

Thuộc tínhgiá trịVí dụMô tả
border-top-left-radius1 giá trị
[top-left]
border-top-left-radius: 5px;Góc trên - bên trái sẽ được uốn cong.
2 giá trị
[top] [left]
border-top-left-radius: 5px 10px;
border-top-right-radius1 giá trị
[top-right]
border-top-right-radius: 5px;Góc trên - bên phải sẽ được uốn cong.
2 giá trị
[top] [right]
border-top-right-radius: 5px 10px;
border-bottom-left-radius1 giá trị
[bottom-left]
border-bottom-left-radius: 5px;Góc dưới - bên trái sẽ được uốn cong.
2 giá trị
[bottom] [left]
border-bottom-left-radius: 5px 10px;
border-bottom-right-radius1 giá trị
[bottom-right]
border-bottom-right-radius: 5px;Góc dưới - bên phải sẽ được uốn cong.
2 giá trị
[bottom] [right]
border-bottom-right-radius: 5px 10px;
border-radius1 giá trị
[top-left top-right bottom-left bottom-right]
border-radius: 5px;Cả 4 góc đều được uốn cong.
2 giá trị
[top-left bottom-right] [top-right bottom-left]
border-radius: 5px 10px;
3 giá trị
[top-left] 
[top-right bottom-left] 
[bottom-right]
border-radius: 5px 10px 4px;
4 giá trị
[top-left] [top-right] [bottom-left] 
[bottom-right]
border-radius: 5px 10px 4px 8px;

HTML viết:

<html>
<head></head>
<body>
<p>border image</p>
</body>
</html>

Hiển thị trình duyệt khi chưa có CSS:

border image

CSS viết:

p {
    border: 2px solid #cc0000;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
}

Hiển thị trình duyệt khi có CSS:

border image

Thuộc tính Border trong CSS

Tiếp theo loạt bài viết về Box Model, hôm nay chúng ta sẽ cùng tìm hiểu về thuộc tính Border trong CSS. Đây cũng là một thuộc tính khá quan trọng. Khi thuộc tính Border được khai báo cho phép chúng có thể quy định độ dày, màu sắc và kiểu hiện thị đường viền của một thành phần nào đó, tạo ra sự phân biệt giữa các thành phần với nhau trong trang web được rõ ràng hơn.

Các giá trị của border bao gồm:
 - border-width: độ dày của đường viền.
 - border-style: kiểu đường viền.
 - border-color: màu của đường viền

Để đường viền được hiện thị thì giá trị border-style luôn phải được khai báo.

Border Width

Border-width sẽ quy định độ dày của đường viền.
Các giá trị của border-width được tính bằng px, hay có thể sử dụng 1 trong 3 giá trị: thin, medium, thick.Ví dụ:
p{ border-style: solid; border-width: 1px;}
Đoạn văn bản này được hiển thị với giá trị solid và có border-width: 1px

Border style

Border-style sẽ quy định kiểu dáng hiển thị của đường viền, những ví dụ bên dưới cho thấy kiểu dáng hiện thị tương ứng của chúng.

none: không hiển thị đường viền (mặc định khi không được khai báo)
Hiển thị với giá trị solid
Hiển thị với giá trị dashed
Hiển thị với giá trị dotted
Hiển thị với giá trị double
Hiển thị với giá trị groove
Hiển thị với giá trị ridge
Hiển thị với giá trị inset
Hiển thị với giá trị outset

Border Color

Border-color sẽ quy định màu sắc của đường viền được hiển thị. Giá trị màu có thể là:
  • Tên màu (tên tiếng anh): red, white, black . . .
  • Hệ RGB – ví dụ: rgb(255,155,0)
  • Hệ Hex – ví dụ: #ff0000
Ngoài ra border-color còn có giá trị  ”transparent” (trong suốt). Tuy nhiên thì giá trị này không mấy khi được dùng tới. Bởi vì mục đích của chúng ta là muốn đường viền được hiển thị.
Ví dụ:
p{ border-style: solid; border-width: 1px; border-color: #000000 }

Giá trị border của cạnh riêng biệt

Chẳng hạn khi viết mã CSS như sau:
1.myborder{ border-style: solid }
Thì tất cả các cạnh sẽ được hiển thị với giá trị solid, nhưng có lúc nào đó trong thiết kế của bạn, bạn chỉ muốn một cạnh nào đó được hiện thị mà thôi, hay mỗi cạnh có một kiểu hiện thị khác nhau thì sao? Để giải quyết vấn đề này thì chúng ta sẽ viết mã CSS cho từng cạnh riêng biệt.

Ví dụ sau thì mỗi cạnh sẽ được hiển thị với một kiểu khác nhau.
.myborder{
   border-top-style: solid;
   border-right-style: dashed;
   border-bottom-style: dotted;
   border-left-style: double;
}
Khi chỉ muốn cạnh nào đó hiển thị thì bạn chỉ cần viết CSS cho cạnh đó thôi.
Ví dụ sau chỉ hiện thị cạnh trên cùng.
.myborder{ border-top-style: solid }
Giá trị width và color cho viền cũng tương tự vậy:
.myborder{
   border-top-width: solid;
   border-right-width: dashed;
   border-bottom-width: dotted;
   border-left-width: double;
}
.myborder{
   border-top-color: solid;
   border-right-color: dashed;
   border-bottom-color: dotted;
   border-left-color: double;
}

Cách viết tắt đối với thuộc tính border

Xét lại ví dụ sau:
p{
   border-style: solid;
   border-width: 1px;
   border-color: #000000;
}
Ta nhận thấy các thành phần border-style, border-width, border-color được viết riêng biệt với các giá trị tương ứng.

Để đơn giản hơn chúng ta sẽ gộp chung lại để tiện cho việc chỉnh sửa cũng như làm giảm tối đa dung lượng của file CSS xuống mức thấp nhất có thể. Và đây cũng là cách hay được sử dụng nhất.

Từ ví dụ trên, ta sẽ viết chung tại như sau, đây gọi là cách viết tắt trong CSS.
p { border: 1px solid #000000 }
Như vậy đoạn mã nhìn gọn gàng hơn rất nhiều. Thứ tự để viết tắt cho thuộc tính border như sau:
  • border-width
  • border-style
  • border-color
tag {border: <border-width> <border-width> <border-width>;}
Chúng ta cũng có thể viết tắt cho từng cạnh riêng biệt như sau:
p{ border-top: 1px solid red }