Breaking News

Thay đổi nền ngẫu nhiên cho blog khi refresh

Nếu để ý bạn sẽ thấy có nhiều trang web mỗi lần bạn truy cập lại có một hình nền khác nhau. Hẳn nhiều blogger đang thắc mắc họ làm như thế nào mà nền của họ thay đổi liên tục thế chẳng lẽ họ bỏ thời gian để ngồi thay đổi. Câu trả lời là không nó được cài đặt tự động các bạn ạ. Hiện nay có nhiều đoạn code và nhiều hướng dẫn các bạn làm điều đó tuy nhiên đa phần là không thể làm được trên nền tảng của blogger hoặc có làm được nhưng gây chậm quá trình tải trang và treo trình duyệt khi áp dụng.

Bài viết này Thucle Blogs sẽ hướng dẫn các bạn các bước để có thể thay đổi hình nền blog của bạn sau mỗi lần bạn tải lại trang web (hoặc bấm phím F5). Blog của bạn sẽ trở nên đặc biệt hơn trong mắt của độc giả, và tạo cho bạn có một phong cách riêng không lẫn với các blog khác.
Thay đổi hình nền khi load trang cho blog


Cách để nền blog thay đổi ngẫu nhiên mỗi khi load lại trang web

1.1- Đăng nhập vào blog
1.2- Chọn thẻ Mẫu (Template)
1.3- Chọn nút chỉnh sủa HTML (Edit HTML)
1.4- Dán code sau trước thẻ </head> :
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script>
/*<![CDATA[*/
function randOrd() {
    return (Math.round(Math.random())-0.5); 
}

$(document).ready(function() {
    var colors= [ 'bgcolor0', 'bgcolor1', 'bgcolor2', 'bgcolor3', 'bgcolor4' ];
    colors.sort( randOrd );
    $('.post').each(function(i, val) {
        $(this).addClass(colors[i]);
    });
});
/*]]>*/
</script>
</b:if>
» Tùy chỉnh code:
var colors= Để thêm nền cho blog bạn phải khai báo biến trong mã scripts trên. Trong đoạn code này mình chỉnh khai báo có 4 màu nền khác nhau,  nếu muốn nhiều hơn bạn hãy thêm các biến 'bgcolor....' tương ứng vào. Mình ví dụn mình thêm một màu nềnbgcolor5 nữa thì ta sẽ có đoạn code như sau:
var colors= [ 'bgcolor0', 'bgcolor1', 'bgcolor2', 'bgcolor3', 'bgcolor4','bgcolor5' ];
- Lưu ý: giữa 2 biến khai báo nằm trong dấu nháy đơn và cách nhau bởi dấu phẩy. Không để dấu phẩy sau biến cuối cùng. Ngoài ra bạn phải thêm thuộc tính CSS như bước tiếp theo để bài viết này có tác dụng nha.
- Nếu muốn đoạn code này có tác dụng ở tất cả các trang thì hãy xóa phần màu xám đi nha. Đoạn đó mình cho vào để đoạn code chỉ hiện thị ở trang bài viết mà :)

1.5- Thêm đoạn CSS sau trước thẻ ]]></b:skin>
.bgcolor0{border-color:#D9B700!important;background-color:#D9B700!important}
.bgcolor1{border-color:#F29500!important;background-color:#F29500!important}
.bgcolor2{border-color:#0097AA!important;background-color:#0097AA!important}
.bgcolor3{border-color:#C23916!important;background-color:#C23916!important}
.bgcolor4{border-color:#94C849!important;background-color:#94C849!important}
» Tùy chỉnh:
  • Phần tô màu vàng là các mã màu sẽ hiện thị ngẫu nhiên khi bạn tải lại trang.  Bạn có thể thay đổi màu nền thành các hình ảnh của bạn bằng cách thay đổi những đoạn in đậm có dạng 
  • background-color:#D9B700 !important
    thành:
    background: #D9B700 url(http://1.bp.blogspot.com/--iYq3UvuuyA/URxgxIobuRI/AAAAAAAAIqQ/hmCRdUSJ3Tk/s1600/buom-namkna-blogspot-com.gif) repeat scroll top left !important
    Bạn có thể sử dụng thư viện hình ảnh của mình ở đây.
  • Và để thêm một màu nền thì bạn chỉ cần khai báo biến ở bước 1.4 và tiến hành thêm thuộc tính CSS ở phần này như sau.
    .bgcolor5{background-color:#94C849!important;border-color:#dddddd!important}
    Rất đơn giản phải không.
1.6- Giờ thì lưu mẫu của bạn lại và quay trở lại blog bấm nút tải lại trang hoặc bấm phím F5 trên bàn phím sau đó chú ý nền blog để thấy rõ sự thay đổi của nó nha.

Không có nhận xét nào