Trang trí Tết cho website WordPress nè anh em !

Hello, xin chào các anh em ! Hôm nay Hocban.vn chia sẻ một số mẹo, hiệu ứng để trang trí Tết cho website WordPress nói riêng và website nói chung. Sau đây là nội dung chi tiết.

Ý nghĩa của việc trang trí Tết cho website

Theo cá nhân mình thấy thì việc trang trí này giúp tạo nên không khí vui tươi, rộn ràng hơn trong dịp Tết. Nếu nó giúp tạo nên cái hồn của một website và tạo nên nhiều hứng khởi cho người truy cập lẫn tác giả.

Trang trí Tết cho website WordPress - ảnh minh họa (nguồn weba.vn)

Trang trí Tết cho website WordPress – ảnh minh họa (nguồn weba.vn)

Nói như vậy không có nghĩa là không trang trí thì website không có hồn, nhưng mà theo mình nghĩ nếu làm vẫn dui hơn. Anh em để ý mấy website lớn, hầu như các dịp lễ tết họ đều có banner, logo thậm chí các chương trình khuyến mãi, event để dành cho dịp lễ Tết luôn đấy thôi. Vậy thì còn ngại gì nữa, nếu ai đó cho rằng bạn màu mè hoa lá hẹ quá thì kệ đi, vì Tết mà… chúng ta có quyền, mình thích thì mình làm thôi… :v

Một số cách trang trí Tết

Thì có rất nhiều cách để trang trí Tết, mọi người có thể đưa câu đối, đốt pháo, hoa mai hoa đào chưng lên,…. thì sau đây là một số mẹo mình chia sẻ cho anh em:

1. Thay đổi ảnh nền website về chủ đề Tết

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

Trang tri Tet tren website cua Kinh Do (thuong hieu banh)

Trang trí Tết trên website của Kinh Đô (thương hiệu bánh)

2. Thêm nhạc nền chủ đề Xuân hay Tết gì đó vào

Hề hề, âm nhạc là cái thứ 2 đóng vai trò quyết định đến không khí Tết 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 ý:

  • 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 về ngày Tết (nhạc Xuân) 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.

Code chèn nhạc nền tự chạy cho WordPress thì các bạn cứ dán vào trước thẻ đóng </body> (file footer.php) nhé, đây là một ví dụ:

<audio src="https://hocban.vn/wp-content/uploads/MUSIC/chuc-tet-to-ny.mp3" autoplay></audio>

Nếu bạn sợ trang nào cũng có nhạc tự chạy gây xáo trộn như hát bè thì bạn có thể chèn vào một page riêng hay posts tùy ý bằng cách dán đoạn code trên vào bài đang viết ở dưới cùng trong chế độ soạn thảo HTML CSS. Bài viết này là một ví dụ.

3. Thêm hiệu ứng bắn pháo hoa vào web

Có nhiều code bắn pháo hoa trên mạng, nhưng mà theo mình nó hơi nặng với lại cũng không đẹp lắm. Sau khi sưu tầm kha khá nhiều thì mình chọn được code JavaScript bắn pháo hoa bên dưới đây. Các bạn tải về đưa nó và úp lên host. Sau đó các bạn sẽ dán đoạn JavaScript dưới đây vào trước thẻ đóng </Head> (thường trong file header.php của WordPress) hoặc </body> (trong file Footer của WordPress). Đối với loại landing page thì cứ dán trước 1 trong 2 thẻ trên là được. Cái đoạn code mà các bạn sẽ dùng để dán nó sẽ tương tự như dưới đây:

<script type="text/javascript" src="https://hocban.vn/wp-content/uploads/TrangTriTet2018/phaohoa.js"></script>

Các bạn nhớ tải file JavaScript kia về máy theo đường dẫn này (phải tải về và úp lên host của bạn, chứ nếu mình xóa thì nó không hoạt động đâu, với lại tải về để năm sau có mà xài).

https://www.mediafire.com/download_status.php?quickkey=ufd1dhuj6f8i6o8&origin=download

Code pháo hoa có kèm theo âm thanh

<script type="text/javascript" src="https://hocban.vn/wp-content/uploads/TrangTriTet2018/phaohoa.js"></script>
<audio src="https://hocban.vn/wp-content/uploads/2019/12/Phao-hoa.mp3" autoplay></audio>

4. Thêm lịch vạn niên vào sidebar

Các bạn biết đấy, trong năm anh em vẫn dùng ngày dương nhưng cứ tháng cuối năm là bắt đầu chuyển qua xài lịch âm hết :v Và lịch âm vào những ngày cuối năm cũng góp phần tạo nên không khí Tết.

Anh em tạo một cái widget HTML bên sidebar và chèn code lịch vạn niên bên dưới vào:

<div class="lich-van-nien" ><script src="https://lichngaytot.com/Scripts/jquery-ui.min.js"></script><script src="https://lichngaytot.com/Scripts/widgetlichngay.js"></script><script type="text/javascript">document.write('<div class="tao-lich-left widgetlich-lvsicsoft" id="widgetlich-lvsicsoft" style="width:100%;" data-urlimagen="" data-colorbordern="#800040" data-coloramn="#7f7f7f" data-colorduongn="#000000"></div>');getWidgetLichNgay("widgetlich-lvsicsoft");</script> </div>

Nếu thấy đoạn code trên hiển thị chưa đủ đẹp thì bạn sử dụng plugin Lịch Vạn Niên trên kho WordPress.org nhé !

5. Ngoài ra còn có thể chèn câu đối, hoa mai hoa đào xung quanh web

Với cách này thì trên mạng cũng có nhiều bài hướng dẫn rồi, tuy nhiên các bạn cần lưu ý là đối với các website mà còn trống nhiều không gian ở 2 bên mới treo câu đối, chứ không là nó che hết nội dung đó nghen.

Chèn câu đối chạy trượt 2 bên các bạn đem code sau dán vào trước thẻ đóng </body> của theme bạn đang xài (nó thường trong file footer.php đó nhé).

<script type='text/javascript'>
//<![CDATA[
document.write('<div class="tet-2019"><img class="left-2019" id="left-2020" src="https://lh4.googleusercontent.com/-HXBsyeylNsk/XDQOO3VSvjI/AAAAAAAACm0/mN6mv1PCfgc8o3PrRm_kvBWN7KmMjsPqQCLcBGAs/s1600/tet1.png"/><img class="right-2019" id="right-2020" src="https://lh4.googleusercontent.com/-tlsSRiDAay8/XDQOjlNI5uI/AAAAAAAACm8/66f7Unvw1J039PCBEUX9q-gFOfUw8JoGgCLcBGAs/s1600/tet2.png"/></div><style>#left-2020{width: 130px;left:0;z-index:7;position:fixed;;transition:all 0.3s linear;-moz-transition:all 0.3s linear;-webkit-transition:all 0.3s linear}#right-2020{width: 130px;right:0;z-index:7;position:fixed;;transition:all 0.3s linear;-moz-transition:all 0.3s linear;-webkit-transition:all 0.3s linear}.left-2019{top:0px}.right-2019{top:0px}.text-2019-l{top:50px}.text-2019-r{top:50px}@media screen and (max-width:1024px){.tet-2019{display:none}}@media screen and (max-width:1440px){#shareduyblogs{display:none}}</style>')
//]]>
</script>
<script>//<![CDATA[
      var lastScroll = 0;
      jQuery(document).ready(function($) {
        $(window).scroll(function() {
          var scroll = $(window).scrollTop();
          if (scroll > lastScroll) {
            $('#right-2020').removeClass('left-2019').addClass('text-2019-l')
            $('#left-2020').removeClass('right-2019').addClass('text-2019-r')
          } else if (scroll < lastScroll) {
            $('#right-2020').addClass('left-2019').removeClass('text-2019-l')
$('#left-2020').addClass('right-2019').removeClass('text-2019-r')
          }
          lastScroll = scroll;
        })
      })
//]]></script>

DEMO bắn pháo hoa bằng video  thì mình có đăng lên Facebook rồi, anh em xem ở đây: https://www.facebook.com/groups/wordpressviet/permalink/1566429240038288

Thì trên đây là một số mẹo cũng khá là đơn giản mình chia sẻ đến anh em nghịch chơi, nếu có gì thắc mắc hoặc đóng góp thêm các cách trang trí khác thì cứ mạnh dạng để lại bình luận bên dưới nhen, cảm ơn 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

guest
100 Comments
Inline Feedbacks
View all comments
David Do <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">16</span><span style="color: #e91e63;">) </span>
Friend

Nhớ cái hồi 2010 đến 2012 cũng kiểu màu mè như này 🤣 chèn nhạc chạy nèn của nct rồi mp3 zing :v

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

Chạy được cái câu đối. Cái bắn pháo hoa nó không chạy bác ơi

Vũ Bá Hải <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">1</span><span style="color: #e91e63;">) </span>
Friend

Năm nay còn ai trang trí không. Quả pháo hoa bắn thú vị ra trò ấy 🙂

Mở bài việt bắc <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">23</span><span style="color: #e91e63;">) </span>
Friend

Rực rỡ thật, đang làm bật cái này nên và thật ngỡ ngàng khi mọi người nhìn mình :v

Mở bài việt bắc <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">23</span><span style="color: #e91e63;">) </span>
Friend
Đã trả lời  Hocban.vn

Tóm lại là vui, rất vui bác 🙁

Mở bài việt bắc <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">23</span><span style="color: #e91e63;">) </span>
Friend
Đã trả lời  Hocban.vn

Bác lại sút xoáy em 🙁

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

Nhân dịp năm mới, Dini xin chúc bác admin và các bạn một năm mới an lành, hạnh phúc.
P/S: Em đọc mấy bài mà chỉ thấy bài này có nhạc….
#HappyNewYear2020

Học Luật <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">3</span><span style="color: #e91e63;">) </span>
Friend

Vừa vào bài thấy tiếng nhạc vang nên, không khí tết ùa về. Cảm ơn bác Tịnh nhiều nhé!

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

Mình đã chèn thành công trên website nhưng test với dòng máy thinkpad và màn hình đt k hỗ trợ. Thì phải làm sao

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

Happy new year chào mừng năm mới 2019

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

Blog Hocban đón Tết sớm quá ta, nghe nhạc mà ‘nôn cả lòng’ :))

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

blog em có đèn nhấp nháy, ahihi

Minh Khánh <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">37</span><span style="color: #e91e63;">) </span>
Friend
Đã trả lời  Minh Khánh

đag kiếm hiệu ứng hoa đào rơi đẹp chèn mà chưa thấy

Minh Khánh <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">37</span><span style="color: #e91e63;">) </span>
Friend
Đã trả lời  Minh Khánh

Em thấy trang trí thế okk rồi, hehe.

Minh Khánh <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">37</span><span style="color: #e91e63;">) </span>
Friend
Đã trả lời  Minh Khánh

Hehe, cùng 1 loại mà

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

Dùng cho blogger cũng ngon phết 😀

Vy Spirit <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">116</span><span style="color: #e91e63;">) </span>
Friend

Bác Tịnh quẩy tết sớm thía \:v /

Minh Hiếu <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">2</span><span style="color: #e91e63;">) </span>
Friend

Bạn Tịnh dùng một theme từ thuở sơ khai đến giờ triệu bài viết mà vẫn chưa đổi theme. Đúng là chung thủy

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

Link js die rồi ad ơi, cho mình xin lại được không?

MinhTam <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">2</span><span style="color: #e91e63;">) </span>
Friend
Đã trả lời  MinhTam

Cảm ơn ad nhiều nhé

Linh Vân <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">2</span><span style="color: #e91e63;">) </span>
Friend

website https://onbit.vn của mình code bằng php thì biết phải làm sao

Lại Đình Cường <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">117</span><span style="color: #e91e63;">) </span>
Friend
Đã trả lời  Linh Vân

Code tay thì tự chèn code vào thôi bạn, nói chung nguyên tắc vẫn là chèn code. WordPress thì chèn code vào giao diện hoặc plugin.

Hiểu Minh <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">2</span><span style="color: #e91e63;">) </span>
Friend

Web rất hay và chia sẻ nhiều thông tin tốt .
Mà bạn ơi , mình hỏi ngu chút a .
Cái phần chỉnh sửa html thẻ và mấy cái đấy ở đâu trên WordPress vậy . Mình khá vướng mắc về cái đấy . Mong bạn giải đáp cho ha ^^!

Hiểu Minh <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">2</span><span style="color: #e91e63;">) </span>
Friend
Đã trả lời  Hiểu Minh

Vì mình không có biết là WordPress có chỗ để mở file đấy . Hay là bên Cpanel vậy bạn !
Mình mò cả mấy tháng mà ko có ra bạn ạ 🙁
Thấy các anh chị share nhiều cái hay mà ko áp dụng được ấy .

Phan Hùng <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">24</span><span style="color: #e91e63;">) </span>
Friend

Người đâu mà lười viết bài thế, năm trời không thấy bài nào mới :V

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

Mình muốn redirect 301 để chuyển từ tên miền cũ sang tên miền mới. Mình muốn hỏi có thể chỉnh sửa file .htaccess trong Yoast SEO được không?

Em! Cô Gái Miền Tây <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">6</span><span style="color: #e91e63;">) </span>
Friend

Ngon lành, mà pháo hoa này lag quá ông êu, tui dùng hoa mai bay cho đỡ

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

sợ load trang lại chậm

hai le <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">33</span><span style="color: #e91e63;">) </span>
Friend
Đã trả lời  hai le

nói đến vụ ít ng.. công nhận tự nhiên vắng như chùa bà đanh

Anh Trường DZ :D <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">24</span><span style="color: #e91e63;">) </span>
Friend

Năm nay hộc bàn chỉ thêm mỗi cái pháo ồn ào quá :v
Hình nền thì năm ngoái để rồi :3

Havit <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">3</span><span style="color: #e91e63;">) </span>
Friend

Hay quá cảm ơn bác đã chia sẽ

Iptime <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">39</span><span style="color: #e91e63;">) </span>
Friend

Hnay lại ghé xem có gì hot không sắp tết rồi

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

Đù, đây là pháo hoa hả???

Em! Cô Gái Miền Tây <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">6</span><span style="color: #e91e63;">) </span>
Friend

Hơi lag á

Tịnh Nguyễn Blog <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">30</span><span style="color: #e91e63;">) </span>
Admin
Đã trả lời  Em! Cô Gái Miền Tây

Có tiếng pháo nổ đó bác Cường, âm thanh như thật, em xóa âm thanh ra vì còn sớm quá :v

Trong bài viết có đoạn code bao gồm cả hình và tiếng cho bác nào có nhu cầu.

Cường <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">117</span><span style="color: #e91e63;">) </span>
Friend
Đã trả lời  Em! Cô Gái Miền Tây

Mình chạy bình thường mà, ko thấy lag chi hết. Pháo hoa bắn đì đù. Nếu thêm tiếng phái nổ vào nữa thì ngon.

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

Bác cho xin link ảnh background của bác với.

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

Bác gắn pháo hoa làm em tưởng có kiến chạy trên màn hình nên giơ tay lên giết nữa chứ =)))

Cường <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">117</span><span style="color: #e91e63;">) </span>
Friend
Đã trả lời  Vỹ Spirit

Bạn này vui tính quá hehe. Nhìn bay từ dưới lên vậy mà bảo kiến 😀

Tịnh Nguyễn Blog <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">30</span><span style="color: #e91e63;">) </span>
Admin
Đã trả lời  Vỹ Spirit

Có âm thanh auto nữa nhưng mà giờ còn chưa tới Tết nên sẽ ko để nó auto, vì ko có nút tắt đó @Huy !

Huy <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">6</span><span style="color: #e91e63;">) </span>
Friend
Đã trả lời  Vỹ Spirit

pháo hoa này đi kèm với âm thanh là đúng chuẩn rồi

Vỹ Spirit <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">116</span><span style="color: #e91e63;">) </span>
Friend
Đã trả lời  Vỹ Spirit

Mắt em cận mà, lúc nó chạy chạy lên nhìn như kiến thật @@
Mà bác gắn ra hai bên hợp lý hơn đó, để ở giữa em chả tập trung đọc bài được.

Cường <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">117</span><span style="color: #e91e63;">) </span>
Friend

Không khí Tết đang đến rất gần rồi mọi người ơi.

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

tuyệt

Huy <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">6</span><span style="color: #e91e63;">) </span>
Friend

không khí Tết rộn ràng quá anh ơi

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

Plugin bạn dùng để hiện code là plugin gì thế 😀

Iptime <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">39</span><span style="color: #e91e63;">) </span>
Friend

Bạn thử thay đổi màu Blog sang đỏ xem cho đồng bộ nhìn sẽ đẹp hơn

Iptime <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">39</span><span style="color: #e91e63;">) </span>
Friend
Đã trả lời  Iptime

20 G cơ á bạn dùng gói nào vậy chi phí sao nhỉ?

Iptime <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">39</span><span style="color: #e91e63;">) </span>
Friend

không ai bình luận nhể bài viết hay góp ý là để thanh chơi nhạc ở dưới chân trang để có thể tắt nhạc mình thực sự “ghét” website nào có nhac nền ức nhất là không tắt được :((

Cường <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">117</span><span style="color: #e91e63;">) </span>
Friend
Đã trả lời  Iptime

Để nhạc cho hay, ko auto play là được rồi 🙂

Iptime <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">39</span><span style="color: #e91e63;">) </span>
Friend
Đã trả lời  Iptime

ngoài lề tý hosting bạn dùng được bao nhiêu rồi lên đến 300 ,400 MB chưa

Iptime <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">39</span><span style="color: #e91e63;">) </span>
Friend
Đã trả lời  Iptime

thanh nghe nhạc nhưng để autoplay được mà hic

Iptime <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">39</span><span style="color: #e91e63;">) </span>
Friend

thủ thuật hay lắm đã tín dụng nhé hehe

Iptime <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">39</span><span style="color: #e91e63;">) </span>
Friend
Đã trả lời  Iptime

Hehe đi câu tý cá về nấu canh chua tết thêm lát thịt cho bánh nó ngon mà hehe