Lưu trữ files trên Google Code 2014

Khi sử dụng blogger, việc tìm một dịch vụ ổn định và miễn phí để lưu các tập tin JS, CSS,... là một việc cần thiết. Nếu bạn đang tìm một nơi ổn định để lưu các tập tin để phục vụ cho blog của bạn thì Google Code là một lựa chọn tuyệt vời dành cho bạn bởi tốc độ load nhanh và hoàn toàn miễn phí. Ngoài ra, bạn cũng có thể sử dụng Google Drive để lưu giữ các tập tin như 1 hosting miễn phí

Đăng ký sử dụng Google Code

- Trước tiên vào trang code.google.com đăng nhập bằng tài khoản google của bạn
- Sau khi đăng nhập bạn sẽ được chuyển đến trang như hình bên dưới

- Bấm vào Creat new project để tạo một project mới
- Tiếp theo, điền đầy đủ các thông tin tương tự như hình bên dưới

-  Sau khi điền xong nhấn Creat project và Project của bạn đả được tạo như hình bên dưới. Công việc còn lại là upload các tập tin của bạn lên google code

Upload files lên Google Code

- Tại giao diện trang Project vừa tạo của bạn

- Nhấn vào Source >> Browse như hình bên dưới

- Bấm vào nút Upload

- Chọn các files cần tải lên

- Bấm Commit, tập tin của bạn sẽ được tải lên google code

- Để lấy đường dẫn của tập tin vừa upload lên bấm chuột phải vào View raw file chọn Sao chép địa chỉ liên kết như hình dưới đây

- Và ta được địa chỉ của file vừa upload:

https://phannhatchanh.googlecode.com/svn/shBrushCss.js

Sử dụng phần mềm TortoiseSVN để upload được nhiều tập tin cùng một lúc

Tăng tốc cho Blogger với LazyLoad Plugin

Lazyload là một Plugin Jquery sử dụng cho việc load hình ảnh trên trang web. Công dụng của nó là các hình ảnh chỉ hiển thị trong tầm mắt bạn nhìn thấy được trên trình duyệt và khi bạn di chuyển thanh cuộn của trình duyệt tới đâu thì hình ảnh khu vực đó mới được nạp và hiển thị, điều này sẽ giúp cải thiện tốc độ tải trang của bạn đi đáng kể khi blog của bạn sử dụng nhiều hình ảnh. Bạn có thể xem demo tại đây hoặc tại đây

Xem Demo Download Plugin

Cài đặt Lazyload cho Blogger

- Để cài đặt, trước tiên vào Blogger >> Mẫu >> Chỉnh sửa HTML
- Copy đoạn code dưới đây dán nó vào trước thẻ </body>

<!--Lazy Loading-->
<script src='https://65a77fe780fd0d6fd0d7c825fbb01c35124d06df.googledrive.com/host/0BwL0KbT-xOaTZzd4ZldpckNDbUE'></script>
<script>//<![CDATA[
$(function () {
    $("img.lazy").lazyload({
        effect: "fadeIn"
    });
});
//]]></script>

Với đoạn mã trên hình ảnh sẽ được nạp với hiệu ứng fadeIn của jQuery trong đẹp mắt và chuyên nghiệp.

Lưu ý: Template của bạn phải có thư viện jQuery:
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript' />
Nếu chưa có Copy và đặt nó trước thẻ </head>

Sử dụng Lazyload cho Blogger

Để sử dụng lazyload, bạn phải thay đổi thẻ hình ảnh của bạn. Địa chỉ hình ảnh của bạn phải được đưa vào thuộc tính data-original và thêm class="lazy" vào thẻ hình ảnh
Ví dụ hình ảnh ban đầu là:

<img src="http://hinh_anh_cua_toi.jpg" width="440" height="280" />

và để áp dụng lazyload bạn phải thay đổi nó lại thành:

<img data-original="http://hinh_anh_cua_toi.jpg" class="lazy" width="440" height="280" />

Như vậy, mỗi khi muốn sử dụng lazyload cho hình ảnh nào thì chỉ việc thay đổi src thành data-original và thêm lớp class="lazy" vào thẻ hình ảnh đó.

Bạn có thể xem thêm các cách tùy biến và sử dụng tại trang chủ của lazyload 

SQL Joins

Điều hướng các bài viết của Blogger bằng phím tắt

Tiện ích này cho phép bạn điều hướng qua lại các bài viết trên blog của bạn bằng cách sử dụng phím tắt mũi tên ← hoặc → trên bàn phím, nó có thể sẽ tiện lợi cho bạn nếu muốn chuyển tới bài kế tiếp hoặc trước đó một cách nhanh chóng bằng phím tắt.

- Chỉ cần dán đoạn mã dưới đây trên thẻ đóng </head> hoặc trên thẻ đóng </body> trong trình soạn thảo Mẫu (Mẫu >> Chỉnh sửa HTML) của bạn, sau đó lưu lại.
- Hoặc vào Blogger >> Bố cục >> Thêm Tiện ích >> HTML/Javascript dán đoạn code phía dưới vào và lưu lại

<script type="text/javascript">
//<![CDATA[
(function(win, doc) {
    var pager;
    // left = 37, right = 39
    doc.onkeydown = function(e) {
        switch (e.keyCode) {
            case 37: pager = doc.getElementById('blog-pager-newer-link'); break;
            case 39: pager = doc.getElementById('blog-pager-older-link'); break;
        }
        if (pager) {
            pager.className = pager.className += ' active';
            win.location.href = pager.children[0].href;
            return false;
        }
    };

    doc.onkeyup = function(e) {
        switch (e.keyCode) {
            case 37: pager = doc.getElementById('blog-pager-newer-link'); break;
            case 39: pager = doc.getElementById('blog-pager-older-link'); break;
        }
        if (pager) {
            pager.className = pager.className.replace(/ active/g, "");
        }
    };
})(window, document);
//]]>
</script>

- Lưu lại vậy là xong!
Đoạn mã trên có tác dụng điều hướng các bài viết qua lại bằng cách sử dụng phím tắt ← hoặc → trên bàn phím.

Xem Demo

Để trang trí cho nó có thể sử dụng đoạn css dưới đây:

#blog-pager-older-link.active a,
#blog-pager-newer-link.active a,
#blog-pager-older-link a:active,
#blog-pager-newer-link a:active {
  background-color:red;
  color:white;
}

Phương pháp này có thể không hoạt động đối với blog có chức năng can thiệp bằng các phím khác

Nguồn internet