Tạo background cho website với kích thước giữ nguyên -jquery

Khi ta sử dụng zoom của trình duyệt web thì thường hình nền cũng sẽ bị thu nhỏ lại. ở đây ta sử dụng jquery để tạo ra hình nền cố định mà khi zoom kích thước nó vẫn giữ nguyên , và ảnh được đặt ở trung tâm trình duyệt, chạy tốt trên FF, chrome, ie8, opera....

hình template 

khi zoom background sẽ bị lệch hay thu nhỏ cùng template .

 đế giữ nguyên hình ảnh ngay cả khi sử dụng chức năng zoom của trình duyệt  có 1 vài cách như sau :

C1: sử dụng css3  - 1 số ít trình duyệt hỗ trợ

Sử dụng api của bit.ly rút ngắn link và thay thế link cũ bằng link đã được rút ngắn

Dịch vụ rút gọn link goo.gl đến nay chưa hỗ trợ api cho webclient mà chỉ hỗ trợ cho webserver.trong các dịch vụ rút gọn link thì bit.ly hỗ trợ cho cả 2 và rất dễ sử dụng . Demo:

link của bit.ly đã thay thế link cũ

Code :

Sử dụng api của bit.ly rút ngắn link

Đầu tiên, bạn vào đây để đăng ký cho mình một tài khoản để có khóa API (API KEY).

SỬ DỤNG API CỦA BIT.LY

Các tham số xác thực và đối số sử dụng: 

http://api.bitly.com/v3/shorten?login=bitlyapidemo&apiKey=apikey123456&longUrl=http%3A%2F%2Fbetaworks.com%2F&format=json3

 login=bitlyapidemo&apiKey=apiKeyabc123456

Tạo khung cho ảnh trong suốt bằng Css

sử dụng ảnh nhỏ trong suốt làm nền  sau đó dùng padding  lùi vào tạo viền.

<style>
body{background:#2EAF4C url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1H1Io0EhTA-xhH7jCHkVZwfu2pvGWEJRvm-0FxTuy-Jz3lpV8DRO4P3fDup-iwEikQYYgOMOZL3VPmMZv4Lbb0kZ4I4bWldH9iLc6OEIfqz60WL1DkDGRWj4N4H-fpNPIihDjSUHB72Ts/s1600/Windows_7_2.jpg) repeat fixed center top;color:#FFF;font-family:}
img {  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLU1lLFxDEc5jakbLYV15BuJiGukQaJm-ZAl-kC1pN4DV_d88WthvCK0pvqmQWPatmV3xTVkvF7BTmoejeKKNWtajKng-_zCs7BuqRYeP1i94mj9SIkZls7Ahr9Zupv2ri1XFmjfjjWVJc/s1600/black.png") repeat scroll left top transparent;    border: medium none;    margin-top: 50px;    padding: 15px;}
</style>

tham số padding :15px là  độ dày của khung  ảnh .
sử dụng
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1H1Io0EhTA-xhH7jCHkVZwfu2pvGWEJRvm-0FxTuy-Jz3lpV8DRO4P3fDup-iwEikQYYgOMOZL3VPmMZv4Lbb0kZ4I4bWldH9iLc6OEIfqz60WL1DkDGRWj4N4H-fpNPIihDjSUHB72Ts/s1600/Windows_7_2.jpg" width="300" height="200">

google history - Những gì bạn tìm kiếm google sẽ lưu lại

Không chỉ trình duyệt web mới lưu thông tin của  bạn , mà ngay cả google cũng tự động lưu thông tin  tìm kiếm cũng như các trang web mà ta truy cập từ google.
để xem các thông tin mà google history đã lưu
Login acc gmail và truy cập vào trang https://www.google.com/history/?hl=en

Lịch sử từ khóa và các trang  bạn đã truy cập đều được google lưu tại đây.

Tạo bóng đổ cho khung bằng css

opera firefox chrome

.shadow {
  -moz-box-shadow: 5px 5px 5px #ccc;
  -webkit-box-shadow: 5px 5px 5px #ccc;
  box-shadow: 5px 5px 5px #ccc;
}

 inset shadow

.shadow {
   -moz-box-shadow:inset 0 0 10px #000000;
   -webkit-box-shadow:inset 0 0 10px #000000;
   box-shadow:inset 0 0 10px #000000;
}

1. thamso1: Bóng đổ theo chiều ngang, nghĩa là phần bóng đổ sẽ lệch về phía phải của đối tượng.
2. thamso2: Bóng đổ theo chiều dọc, nghĩa là phần bóng đổ sẽ lệch về phía trên của đối tượng.