Trang trí website nhân dịp Giáng sinh 2017

Giáng sinh 2017 đang đến rất gần rồi, chỉ còn vài ngày nữa thôi là tất cả mọi người sẽ bước sang năm mới 2018. Trong tiết trời se lạnh như thế này thì việc trang trí thêm một chút cho trang web của bạn cũng giúp mọi người cảm thấy vui vẻ và ấm áp hơn. Nếu bạn đang sở hữu một blog hoặc website thì ngay bây giờ hãy bắt tay vào trang trí cho ngôi nhà online thân yêu của mình đi nào.

Việc trang trí Giáng sinh cho trang web có thể sẽ làm trang nặng hơn và load chậm hơn một chút, nhưng mà không sao vì mọi người đều nói nếu muốn đẹp thì phải chịu khó hy sinh.

Trang trí website nhân dịp Giáng sinh 2017 và năm mới 2018

Hễ nghĩ đến Noel thì mọi người sẽ nghĩ ngay đến cây thông Noel, tuyết rơi hay lò sưởi,… có rất nhiều cách để làm đẹp cho trang web của bạn trong dịp Noel 2017 này, thậm chí bạn chỉ cần thay hình nền cho trang web sang hình nền Noel là thấy khác đi ít nhiều rồi.

Hình nền Giáng sinh 2017

Bài viết này mình chỉ hướng dẫn cho các bạn đang sử dụng WordPress Self-Hosted thôi nhé. Việc đầu tiên bạn cần làm đó là cài đặt plugin để cho phép thêm code vào thẻ head và giữa thẻ body. Có rất nhiều plugin có thể giúp bạn làm thao tác này, nếu như giao diện của bạn đã có hỗ trợ tính năng thêm code vào giữa thẻ head hoặc trước khi đóng thẻ body ở phần footer rồi thì bạn bỏ qua bước này nhé. Ngược lại, nếu giao diện chưa có tính năng cho phép tùy chỉnh code thì bạn cài đặt plugin AddFunc Head & Footer Code.

Xem thêm: Hướng dẫn cài đặt plugin cho WordPress

Sau khi đã cài đặt và kích hoạt xong plugin thì bạn vào menu Settings → Head & Footer Code. Bên trong này sẽ cho phép bạn chèn code và thẻ head và phần footer của trang web. Đối với css thì bạn nên thêm vào thẻ head, còn đối với javascript thì bạn thêm vào footer của trang.

Thay đổi hình nền Giáng sinh cho trang web

Để thay đổi hình nền cho trang web thì rất đơn giản, trước tiên bạn sẽ tải một hình nền Noel bất kỳ từ trên mạng về máy tính, sau đó upload lên thư viện tập tin của WordPress và sao chép url của hình ảnh này. Bạn cũng có thể sử dụng hình ảnh mình đã gửi bên trên.

Bạn thêm đoạn code sau vào phần head nhé, chú ý thay đổi lại các thông số cho phù hợp với trang của bạn, quan trọng nhất là thay đường dẫn đến hình ảnh bạn vừa mới up lên trang WordPress của bạn:

<style type="text/css">
body {
    background-color: #b2b2b2;
    background-image: url("url-hinh-anh.jpg");
    background-position: left top;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
</style>

Sau khi thêm code bên trên vào phần head rồi thì bạn lưu lại và xóa cache trình duyệt, ra ngoài front-end để kiểm tra lại kết quả.

Tạo hiệu ứng tuyết rơi Giáng sinh cho trang web

Nếu bạn muốn thêm tuyết rơi cho trang web của mình nhân dịp Giáng sinh về thì cách làm cũng rất đơn giản. Bạn chỉ việc sao chép đoạn code bên dưới của mình và thêm vào phần footer ở trang cài đặt như bạn làm thay đổi hình nền Giáng sinh bên trên.

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/JQuery-Snowfall/1.7.4/snowfall.min.js"></script>
<script type="text/javascript">
snowFall.snow(document.body, {round : true, shadow : true, minSize: 5, maxSize:8});
</script>

Sau khi lưu lại bạn xóa cache trình duyệt và ra ngoài để kiểm tra kết quả. Bạn có thể thay đổi lại các tham số cài đặt cho phù hợp với sở thích của bạn. Xem thêm hướng dẫn cấu hình Snowfall jquery plugin trên trang chủ của GitHub nhé. Còn đây là demo jQuery Snowfall trên trang chủ của họ.

Chèn nhạc và clip Giáng sinh cho WordPress

Nếu bạn đang dùng WordPress phiên bản mới nhất thì việc chèn Audio cũng như Video trên sidebar rất dễ dàng. Ý tưởng ở đây là bạn chèn một bài hát Giáng sinh hoặc một playlist nhạc Noel hoặc một clip nào đấy để trên sidebar hoặc chèn trực tiếp vào nội dung của bài viết.

Ngoài ra, bạn còn có thể làm hình nền là lò sưởi, sau đó viết code chèn video vào phía trong lò sưởi tạo hiệu ứng đốt lò sưởi trong đêm Giáng sinh. Bạn có thể tham khảo cách làm hiệu ứng đốt lò sưởi Giáng sinh trên Virtual Fireplace. Tuy nhiên nếu chèn video vào trang web thì load hơi nặng trang, bạn có thể tìm kiếm hình ảnh động lò sưởi đang cháy để thay thế.

Như vậy là bạn đã trang trí xong trang web của mình nhân dịp Giáng sinh rồi đấy. Mình xin gửi lời chúc đến bạn và gia đình một mùa Giáng sinh an lành và năm mới 2018 thật nhiều sức khỏe, thành công.

6 bình luận cho “Trang trí website nhân dịp Giáng sinh 2017

  1. Haha, năm nay anh em khá hào hứng với trào lưu trang trí website ghê. Năm ngoái em không thấy ai chơi với mình hết trơn :v

    Cái ảnh động bếp lò em chèn vào rồi (sẽ nhẹ hơn video), có thể nên lấy file nhạc mp3 trong video rồi nhúng vào trong web như vậy là vừa có hình vừa có tiếng mà nhẹ hơn 😀

    1. Uhm, mình cũng bon chen viết hướng dẫn và test trên localhost thôi chứ chưa có thời gian để up lên trang thật nữa :p

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *