Trang trí website WordPress dịp Giáng Sinh (Noel) chơi nào mọi người

Trang trí website dịp Noel (Giáng Sinh) - Ảnh minh họa

Trang trí website dịp Noel (Giáng Sinh) – Ảnh minh họa

Lâu ngày không có gì chơi với WordPress thì hôm nay chúng ta sẽ quẩy tí nhỉ. Trong bài viết này, mình chia sẻ đến bạn một số mẹo để trang trí website WordPress dịp Giáng Sinh (Noel) cho nó có không khí. Giáng sinh cũng sắp đến rồi.

Mục đích của cái trò này

Hề hề, mục đích cũng khá đơn giản chỉ là “mình thích thì mình làm thôi :v ” Nghe có vẻ hơi ngang nhỉ, nhưng thôi… vì nó sẽ có những lợi ích như sau:

  • Theo trends (xu hướng): Lúc này cũng gần tới Giáng Sinh rồi, không khí Noel nó đang khá là sôi nổi, bạn có thể không cần quan tâm nhưng mà nếu quẩy theo cũng vui đúng không nào.
  • Đối với khách truy cập, nếu họ vào thấy không khí vui tươi thế này thì cũng thích nữa. Nó cho ta thấy được cái hồn của web, các bạn để ý những ngày như thế này thì những website sau sẽ tràn ngập chủ đề về Giáng Sinh như: Web nghe nhạc trực tuyến, website thương mại điện tử, Google,…
  • Không gian của riêng bạn, nếu nhà bạn không theo đạo nhưng bạn vẫn thích dịp Lễ Noel. Bạn thích làm gì đó nhưng bạn không có kinh phí đầu tư như: đèn đóm, cây thông, hộp quà,.v.v.. thì bạn có thể tạo ngay cái không gian cho riêng mình trên Website / blog.

Một số cách trang trí website WordPress dịp Giáng Sinh

Có khá nhiều cách để làm cho website/blog của bạn có không khí Noel, Giáng Sinh lắm, tuy nhiên ở đây mình chia sẻ một số cách mà các bạn có thể làm với website WordPress.

1. Thay đổi ảnh nền website về chủ đề Noel, Giáng Sinh

Cách này cứ phải nói là đơn giản nhất trong tất cả các cách luôn, bởi vì hầu như theme nào cũng có hỗ trợ phần đổi ảnh nền này. Nên cách thực hiện chắc mình không nói thêm nhé !

Thay doi anh nen ve chu de Noel cho website WordPress

Thay doi anh nen ve chu de Noel cho website WordPress

Nó khó ở chỗ là tìm cái ảnh nền nào sao cho vừa ý của bạn thôi, trên Google hơi bị nhiều luôn đó. Làm theo như mình cũng được hoặc bạn nào rành cắt ghép, chỉnh sửa ảnh thì tự làm một cái theo sở thích xem sao :v

2. Thêm nhạc nền Giáng Sinh, Noel vào

Hề hề, âm nhạc là cái thứ 2 đóng vai trò quyết định đến không khí Noel nè. Với hướng này các bạn có thể chèn nhạc vào cho nó tự chạy hoặc là bấm mới chạy. Tùy theo sở thích mà bạn có thể chọn cách nào cũng được song cũng cần lưu ý:

  • Thêm hình nền: chọn ảnh nền chủ đề giáng sinh có bố cục rộng và nét để phía sau nhìn không bị vỡ. Nhưng phải nén ảnh trước khi đặt vì nó sẽ nặng nhé ! Đây là một nền ví dụ.
Background Noel cho website

Background Noel cho website

  • Chèn nhạc nền tự động phát thì có thể làm khó chịu người dùng nếu họ không thích cái nhạc của bạn (nó dở quá chẳng hạn :v ) hoặc là âm thanh nó phát làm phiền họ, họ không thích.
  • Có có một nhược điểm nữa là khi người dùng mở nhiều Tab trên website của bạn thì âm thanh sẽ bị chèn lấn lên nhau, nghe rất chi là tạp nham, thằng hát trước, thằng hát sau rất khó chịu. Nếu là Landing page thì oke luôn, vì nó chỉ có 1 trang nên không có bị chèn ép nhau.

Về cách thực hiện thì các bạn xem bài hướng dẫn chèn nhạc nền tự chạy cho WordPress, các bạn chỉ cần úp load bài hát Noel của các bạn lên host và thay thế đường dẫn của bài hát mẫu là xong.

Đối với phần thêm nhạc nhưng cho chạy thủ công thì Hocban.vn có cái widget phát nhạc bên Sidebar, các bạn click vào nút play để nghe thử đoạn nhạc đó nhé, hay phết đó :v

3. Thêm ảnh động Giáng Sinh bên sidebar

Nhớ ngày xưa khi mua một cái điện thoại, người ta hay tải vào thẻ nhớ rất nhiều hình gif về Giáng Sinh, sinh nhật đồ. Nay nhân dịp trang trí website hoài cổ tí anh em nhé !

Bạn copy đoạn code này, sau đó vào tạo một widget HTML bên sidebar và dán nó vào >> lưu lại và xem kết quả nhé !

<img src="https://donghuongkontum.files.wordpress.com/2017/12/wishing-you-a-very-merry-christmas-and-happy-new-year-animated-gif-image.gif" alt="" width="387" height="351" />

4. Thêm hiệu ứng tuyết rơi vào Website

Haha, đây là một cách khá hay ho, Giáng Sinh thì phải có tuyết đúng không nè. Để thêm tuyết vào thì các bạn thêm đoạn code sau vào trước thẻ đóng </body> là được, thường thì nó nằm trong file footer.php

<style type="text/css">
.snow-container{position:fixed;width:100%;max-width:100%;z-index:99999;pointer-events:none;overflow:hidden;top:0;height:100%}
.snow{display:block;position:absolute;z-index:2;top:0;right:0;bottom:0;left:0;pointer-events:none;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);-webkit-animation:snow linear infinite;animation:snow linear infinite}
.snow.foreground{background-image:url("https://2.bp.blogspot.com/-Wy6UPSscdjQ/WiaUVdMxwvI/AAAAAAAAAUU/VlYKpmYGGGskfkn9gc9yKYx-TNKArubPACLcBGAs/s1600/snow-effect-_---------BacSiWindows-Com.png ");-webkit-animation-duration:15s;animation-duration:10s}
.snow.foreground.layered{-webkit-animation-delay:7.5s;animation-delay:7.5s}
.snow.middleground{background-image:url(https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-medium-0b8a5e0732315b68e1f54185be7a1ad9.png);-webkit-animation-duration:20s;animation-duration:15s}
.snow.middleground.layered{-webkit-animation-delay:10s;animation-delay:10s}
.snow.background{background-image:url(https://2.bp.blogspot.com/-cZWwrfEYtMI/WiaUgSmqv6I/AAAAAAAAAUY/fayIXcjKnvoWtHL-x-2H2oO5-Ks2e6_nQCLcBGAs/s1600/snow-effect_-_--------------BacSiWindows-Com.png);-webkit-animation-duration:25s;animation-duration:20s}
.snow.background.layered{-webkit-animation-delay:12.5s;animation-delay:12.5s}
@-webkit-keyframes snow{0%{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}100%{-webkit-transform:translate3d(5%,100%,0);transform:translate3d(5%,100%,0)}}
@keyframes snow{0%{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}100%{-webkit-transform:translate3d(5%,100%,0);transform:translate3d(5%,100%,0)}}
</style>
<div class='snow-container'><div class='snow foreground'/><div class='snow foreground layered'/><div class='snow middleground'/><div class='snow middleground layered'/><div class='snow background'/><div class='snow background layered'/></div>

Rồi, các bạn thêm vào được chưa, có thấy gì khác không :v Cái này là code của bạn Trường Nguyễn (Bacsiwindow.com) chia sẻ trên blog của bạn ấy, mình thấy hay nên quất qua đây cho anh em chơi.

Nếu bạn đang dùng WordPress thì có thể cài plugin Snow Storm cũng đẹp nhé và phù hợp với những anh em nào ngại hoặc không biết chèn code.

Ngoài ra các bạn cũng có thể tìm kiếm các plugin trang trí Noel cho WordPress trên Google nữa nhen, mình thấy cũng nhiều lắm đó nhưng hiện tại chưa có thử. Anh em nào thử rồi có thể chia sẻ / giới thiệu đến mọi người bằng các bình luận bên dưới luôn nhen, cảm ơn các anh em !

Bài viết về trang trí website WordPress

Bài viết bạn đang xem được viết bởi Tịnh Nguyễn, là người thường đăng bài và comment dạo trên Hocban.vn

Đây là các bài viết Google đề xuất cho bạn:


71 bình luận

Viết bình luận theo mẫu

(Các mục bắt buộc được đánh dấu * )