Cách lưu file CSS và Javascript (.js) lên Google Drive để sử dụng cho Blogger

Việc tìm kiếm các thủ thuật trên web để ứng dụng cho thiết kế Blogger là điều không hề xa lạ đối với mỗi newbie khi bắt đầu thiết kế web. Có rất nhiều hướng dẫn, thủ thuật được chia sẻ trên mạng, mà trong đó không thiếu các đoạn code đã được mã hóa thành các file css hoặc javascript (.js). Việc áp dụng các đoạn code có dẫn nguồn đến một file css hoặc js có nhược điểm là nếu file đích không còn tồn tại, đoạn code của chúng ta sẽ không hoạt động. Do đó chúng ta cần lưu các file này lại để tiện sử dụng về sau.
Bài viết này sẽ hướng dẫn các bạn cách lưu file css hoặc javascript lên Google Drive để sử dụng cho Blogger.

1. Tại sao phải lưu tập tin trên Google Drive?

• Dung lượng lưu trữ lớn: Google Drive cung cấp cho bạn lưu trữ lên đến 15 GB dùng chung cho tất cả các dịch vụ của Google.
• Dễ sử dụng: chúng ta đã quá quen thuộc với việc dùng email của Google nên việc sử dụng thêm Google Drive là không hề khó khăn.
• Độ tin cậy cao: file luôn tồn tại và không bao giờ bị xóa.
• Miễn phí: bạn hoàn toàn có thể lưu và chia sẻ file thoải mái.

2. Ưu điểm của Hosting CSS / JavaScript trong một tập tin là gì?

Nếu những ai đã quen thuộc với thiết kế web bằng Blogger thì đều biết rằng việc chỉnh sửa cả một đoạn code trên Blogger là vô cùng rắc rối và phiền phức khi phải phụ thuộc khá nhiều vào việc đặt code trong các thẻ (Tag) HTML.
Do đó việc kết hợp tất cả các kiểu (style) và các đoạn mã vào trong một file duy nhất sẽ giúp ta tối ưu được đoạn code dài loằng ngoằng cũng như dễ chỉnh sửa và quản lý về sau.

3. Cách lưu tập tin CSS và Javascript lên Google drive

Sau đây là một đoạn code phân trang cho bài viết trên Blogger:

<style type='text/css'>
#blog-pager{height: 28px;
    padding: 10px 0 0;
overflow:hidden;
text-align:center;
}
.showpageArea a {text-decoration:underline; font-size: 16px;      text-align: center;}
.showpageNum a {font-size:16px;text-decoration:none;border: 1px solid #cccccc;margin:0 5px;padding:5px;}
.showpageNum a:hover {border: 1px solid #cccccc;background-color:#cccccc;}

.showpagePoint {font-size:16px;text-decoration:none;border: 1px solid #cccccc;background: #216FD9;margin:0 5px;padding:5px;color:#ffffff;}

.showpageOf {text-decoration:none;padding:5px;margin: 0 5px;}
.showpage a {text-decoration:none;border: 1px solid #cccccc;padding:5px;}
.showpage a:hover {text-decoration:none;background: #cccccc;}
.showpageNum a:link,.showpage a:link {text-decoration:none;color:#333333;}</style>
<script style='text/javascript'>var pageCount=7;
var displayPageNum=5;var upPageWord="Previous";var downPageWord="Next";</script>
<script style='text/javascript' src='http://netoopscodes.googlecode.com/svn/netoops-page-nav-v2.js'></script>

Trong đoạn code trên,bạn sẽ thấy một lệnh sử dụng source code là một file javascript từ bên ngoài (màu đỏ). Điều ta cần làm là lưu lại file này lên Google drive để sử dụng thay vì dùng file của người khác để tránh tình trạng file bị xóa sau này.

a. Tạo file .js

Mở link file js này trong trình duyệt, click phải vào trang web chọn Save Page As --> Đặt tên file có kèm đuôi .js

b. Lưu file lên Google Drive

Các bạn hoàn toàn có thể tải file lên trực tuyến hoặc dùng ứng dụng Google Drive. Bạn cần lưu ý thay đổi quyền truy cập file thành Public để có thể sử dụng cho Blogger. Hãy làm như sau:
Click phải vào file --> chọn Share... như hình bên dưới:

Sau đó ta chỉ việc thay đổi quyền truy cập file từ Private sang Public theo hai bước sau:

c. Lấy link file để sử dụng cho Blogger

Trong bước trên ta đã thấy link chia sẻ của file, tuy nhiên link này chưa thể sử dụng trực tiếp cho Blogger được mà cần thay đổi chút ít. Cụ thể ta làm như sau:
Link gốc:

https://drive.google.com/file/d/0B5hv2a4VX3SRRGplZ3k5dlh4ZDQ/edit?usp=sharing

Link mới:

https://googledrive.com/host/0B5hv2a4VX3SRRGplZ3k5dlh4ZDQ

Khi thay đổi link, bạn cần phải đảm bảo mã file (màu đỏ) được giữ nguyên.
Đến đây thì bạn đã có thể sử dụng link này cho các đoạn code bên trong Blogger của bạn.