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

22/03/2022

0 32 4 minutes read

Trang trí trang web cho lễ Giáng sinh (Christmas) – Hình minh họa

Đã lâu không chơi với WordPress, hôm nay chúng ta sẽ có một cuộc vui nho nhỏ. Trong bài viết này, tôi sẽ chia sẻ với bạn một số mẹo để trang trí trang web WordPress của bạn cho Giáng sinh để mang lại không khí cho nó. Giáng sinh cũng sắp đến.

Nội dung

1 Mục đích của trò chơi này
2 Một số cách để trang trí trang web WordPress của bạn cho Giáng sinh
3 Các bài viết về trang trí website WordPress
4 Thông tin thêm

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

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

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

Một số cách để trang trí trang web WordPress của bạn cho Giáng sinh

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

1. Thay đổi ảnh nền website theo chủ đề giáng sinh, giáng sinh

Cách này phải nói là đơn giản nhất trong tất cả các cách, vì hầu như theme nào cũng hỗ trợ tính năng đổi ảnh nền này. Vậy làm như thế nào thì mình sẽ không nói thêm!

Thay đổi chủ đề Giáng sinh cho trang web WordPress

Rất khó để tìm một hình nền phù hợp với bạn, có rất nhiều trong số đó trên Google. Làm theo ý bạn hoặc bạn nào biết cắt và chỉnh sửa ảnh thì làm theo sở thích của mình nhé: v

2. Thêm nhạc nền giáng sinh, noel

Khiếp, âm nhạc là thứ thứ hai đóng vai trò quyết định đến không khí Giáng sinh. Với hướng này, bạn có thể chèn nhạc để nó tự chạy hoặc chỉ cần nhấp chuột để chạy. Tùy theo sở thích mà bạn có thể chọn bất kỳ cách nào, nhưng cũng cần lưu ý:

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

Giáng sinh nền cho trang web

Việc chèn nhạc nền tự động phát có thể làm phiền người dùng nếu họ không thích nhạc của bạn (tệ quá: v) hoặc âm thanh nó phát làm họ khó chịu, không thích.
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, âm thanh sẽ bị trùng, nghe rất lộn xộn, kẻ hát trước, kẻ hát sau rất khó chịu. Nếu là Landing page thì ok, vì nó chỉ có 1 trang nên không bị chèn ép.

Về cách thực hiện, bạn xem bài hướng dẫn chèn nhạc nền cho WordPress, bạn chỉ cần tải bài hát giáng sinh của mình lên host và thay vào đường dẫn của bài hát mẫu.

Về phần thêm nhạc nhưng để chạy thủ công, Hocban.vn có widget phát nhạc trên Sidebar, bấm vào nút play để nghe đoạn nhạc đó, hay quá: v

3. Thêm hoạt ảnh Giáng sinh trong thanh bên

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

chúc bạn một giáng sinh vui vẻ và chúc mừng năm mới hình ảnh gif hoạt hình

Bạn copy đoạn mã này, sau đó vào tạo widget HTML trên sidebar và dá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=""   />

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

Haha, đây là một cách khá hay, Giáng sinh chắc chắn sẽ có tuyết, đúng không? Để thêm tuyết, bạn có thể thêm mã sau trước khi đóng cửa thường thì nó nằm trong tệp 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 bạn add nhé, bạn có thấy gì khác không: v Đây là đoạn code mà Trường Nguyên (Bacsiwindow.com) chia sẻ trên blog của mình, mình thấy hay nên drop vào đây cho các bạn chơi.

Nếu bạn đang sử dụng WordPress, bạn có thể cài đặt plugin Bão tuyết Nó cũng đẹp và phù hợp với những bạn còn nhút nhát hoặc không biết cách chèn code.

Ngoài ra, bạn cũng có thể tìm kiếm các plugin trang trí giáng sinh cho WordPress trên Google nữa, mình thấy rất nhiều nhưng chưa thử. Những bạn nào đã dùng thử có thể chia sẻ / giới thiệu cho mọi người bằng cách comment bên dưới nhé, cảm ơn các bạn!

Các bài viết về trang trí website WordPress

Thêm hiệu ứng chim bay 3D vào WordPress
Thêm nhạc nền tự động phát vào trang web WordPress của bạn
Trang trí năm mới cho trang web WordPress

4,5 / 5 – (10 phiếu bầu)

Marketing online

Thông tin thêm

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

#Trang #trí #website #WordPress #dịp #Giáng #Sinh #Noel #chơi #nào #mọi #người
[rule_3_plain] #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
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 LỤC NỘI DUNG1 Mục đích của cái trò này2 Một số cách trang trí website WordPress dịp Giáng Sinh2.1 1. Thay đổi ảnh nền website về chủ đề Noel, Giáng Sinh2.2 2. Thêm nhạc nền Giáng Sinh, Noel vào2.3 3. Thêm ảnh động Giáng Sinh bên sidebar2.4 4. Thêm hiệu ứng tuyết rơi vào Website3 Bài viết về trang trí website WordPress
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
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

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=”” />
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