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 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

Nếu bạn thấy bài viết này hữu ích thì có thể chia sẻ nó qua:

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

Nội dung được đề xuất

avatar
18 Comment threads
51 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
14 Comment authors
Hocban.vnnhac giang sinhĐạo HàmTungChemMinh Khánh Recent comment authors
nhac giang sinh <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">1</span><span style="color: #e91e63;">) </span>

Tôi ước gì cha già noel có thể thấy được dòng bình luận này của tôi trên hocban.vn …để ông biết bao năm mùa noel rồi mà tôi vẫn ko có gấu…..đề nghị ông hiện thân…. =]]]]]

Đạo Hàm <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">1</span><span style="color: #e91e63;">) </span>

Mới năm ngoái còn lọ mọ vào copy code, vèo phát đã gần 1 năm

TungChem <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">1</span><span style="color: #e91e63;">) </span>

Chúc mừng giáng sinh cả nhà

Minh Khánh <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">29</span><span style="color: #e91e63;">) </span>
Minh Khánh (29)

Chúc mừng giáng sinh!

Vỹ Spirit <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">108</span><span style="color: #e91e63;">) </span>

Mấy mùa lễ như Noel, tết âm lịch em rất thích vì được trang trí cho blog đẹp thêm 😀

Vỹ Spirit <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">108</span><span style="color: #e91e63;">) </span>

Đúng òi, nhìn hoài 1 kiểu thấy chán lắm 😀 năm nay tự nhiên hứng thú nên em chuẩn bị trang trí cách đây gần 1 tháng trước 😀

Vỹ Spirit <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">108</span><span style="color: #e91e63;">) </span>

Có hứng thú và ý tưởng mới làm bác ơi 🙁

Vỹ Spirit <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">108</span><span style="color: #e91e63;">) </span>

Đúng òi, bác làm đi để em qua quẩy nhé 😀

Lại Đình Cường <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">114</span><span style="color: #e91e63;">) </span>

Nhanh nhỉ, mới đó mà đã 1 năm rồi.

Lại Đình Cường <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">114</span><span style="color: #e91e63;">) </span>

Bây giờ vẫn còn đông vui mà 🙂

WCR <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">2</span><span style="color: #e91e63;">) </span>

add_custom_background();
Nếu ko có thay nền ( backgroud) thì bạn vào file fuctions thêm code trên là có 🙂

Sabo <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">28</span><span style="color: #e91e63;">) </span>

Hết lô en rồi, chuẩn bị trang trí cho tết âm lịch thôi bác :))

Lại Đình Cường <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">114</span><span style="color: #e91e63;">) </span>

Viết thêm tút hướng dẫn trang trí website dịp Tết đi bạn 😀

Lại Đình Cường <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">114</span><span style="color: #e91e63;">) </span>

Dạo này bận hay sao mà thấy ít online vậy bạn? Giờ bắt đầu viết hướng dẫn là được rồi đó, còn có hơn 1 tháng nữa à.

Lại Đình Cường <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">114</span><span style="color: #e91e63;">) </span>

Mới up bản mới, khi nào online ghé thăm ủng hộ nhé 🙂

Lại Đình Cường <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">114</span><span style="color: #e91e63;">) </span>

Mới up lúc sáng nay thôi, để chạy một thời gian rồi cập nhật thêm, cái này là bổ sung chứ không phải viết mới. Cảm ơn bạn nhé.

Đạt Nguyễn <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">154</span><span style="color: #e91e63;">) </span>

Đã cài cái gàu trên đầu rơi lả chã cho trang web, nói chung cũng đẹp đẹp, đang kiếm cái bông tuyết khác hoặc hình khác để thay đổi tùy trường hợp. Ví dụ ngày valentin thì hình ba con sói rơi đầy web, ngày 8.3 thì vẫn là hình ba con sói, ngày lễ khác thì thôi ba con sói luôn vậy, chắc chắn sẽ rất CHẤT

Lại Đình Cường <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">114</span><span style="color: #e91e63;">) </span>

366 ngày để hình 3cs bay bay cũng được nhỉ 😀

Lại Đình Cường <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">114</span><span style="color: #e91e63;">) </span>

Sao có lúc trang của bạn không vào được nhỉ?

Lại Đình Cường <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">114</span><span style="color: #e91e63;">) </span>

Thử liên hệ với support hỏi xem sao?

Đàm Ngọc Duy <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">66</span><span style="color: #e91e63;">) </span>

Sao plugin mình dùng trên thiết bị mobi nó ko hiển thị tuyết rơi.

Thái Văn Thắng <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">31</span><span style="color: #e91e63;">) </span>
Thái Văn Thắng (31)

Nay bài đặt chèn ads nữa ta

hai le <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">32</span><span style="color: #e91e63;">) </span>

cũng muốn làm tí cho đẹp nhưng sợ load trang như rùa ấy

Lại Đình Cường <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">114</span><span style="color: #e91e63;">) </span>

Muốn đẹp thì phải hy sinh bạn à.

Trường Đz <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">5</span><span style="color: #e91e63;">) </span>

Ngon đấy. vào blog thấy ấm áp hẳn ra :v

Trường Đz <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">5</span><span style="color: #e91e63;">) </span>

Đợi duyệt comment lặn quẩy mà duyệt lâu vãi. Tụt cảm xúc cmnr =.=!!

Trường Đz <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">5</span><span style="color: #e91e63;">) </span>

Đi chơi noel hỉ anh, sớm thế :v
Mail khác anh ê. Để mai đổi avatar :3

Trường Đz <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">5</span><span style="color: #e91e63;">) </span>

Để avatar mặt đập chai của e thôi chứ thương hiệu gì!! :v
Bờ lốc viết còn chưa xong nữa ở đó làm kênh youtube. Chèn ơi !! không có rảnh đâuuu

Trường Đz <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">5</span><span style="color: #e91e63;">) </span>

Thôi không biết làm đâu, với máy tính yếu làm k đuọc đâu :v lười bỏ xừ
Anh Tịnh Nguyễn làm tặng thì lấy liền :v

Vỹ Spirit <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">108</span><span style="color: #e91e63;">) </span>

EM cũng trang trí noel mà ko có tuyết rơi 🙁

Vỹ Spirit <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">108</span><span style="color: #e91e63;">) </span>

Em tự chèn code bác ạ 😀

Vỹ Spirit <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">108</span><span style="color: #e91e63;">) </span>

Vậy nặng lắm bác, em hong chơi đâu 😂

Vỹ Spirit <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">108</span><span style="color: #e91e63;">) </span>

Ảnh động nó mới nặng nó bác, của em là ảnh tĩnh mà 😀
Đúng ra cái bản gốc của nó là rê chuột vô mấy quả chuông nó rung rung lên rồi có tiếng chuông kêu nữa mà em sợ chạy thêm script nó nặng nên em làm thành ảnh tĩnh luôn 😀

Lại Đình Cường <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">114</span><span style="color: #e91e63;">) </span>

Tuyệt rơi nhiều lạnh quá @@

Lại Đình Cường <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">114</span><span style="color: #e91e63;">) </span>

Cái đó chỉ có cần chèn video như thế này nè bạn: https://goo.gl/nZBD5T