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

22/03/2022

0 45 4 minutes read

Xin chào, xin chào các bạn! Hôm nay Hocban.vn chia sẻ một số thủ thuật và tác dụng trang trí ngày Tết cho website WordPress nói riêng và các website nói chung. Đây là những thông tin chi tiết.

Nội dung

1 Ý nghĩa của việc trang trí Tết cho website
2 Một số cách trang trí ngày Tết
3 Các bài viết về trang trí website WordPress
4 Thông tin thêm

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

Theo tôi, cách trang trí này giúp không khí vui hơn, nhộn nhịp hơn trong dịp Tết. Nếu nó giúp tạo nên linh hồn của một trang web và tạo nhiều hứng thú cho người truy cập và tác giả.

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ì trang web không có hồn, nhưng theo tôi, nếu làm xong vẫn ngầu hơn. Bạn để ý các trang web lớn, hầu như ngày lễ nào họ cũng có banner, logo, thậm chí là các chương trình khuyến mãi, sự kiện phục vụ cho ngày Tết. Vậy thì tại sao phải sợ, nếu ai đó cho rằng bạn màu mè quá thì cho qua đi, vì Tết … chúng ta có quyền, nếu thích thì làm thôi …: v

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

Sau đó, có rất nhiều cách trang trí Tết, người ta có thể đắp câu đối, đốt pháo, bày hoa mai,… Sau đây là một số mẹo mà tôi muốn chia sẻ với các bạn:

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

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!

Trang trí Tết trên website Kinh Đô (thích)

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

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

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

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 các bạn xem bài hướng dẫn chèn nhạc nền tự chạy cho WordPress, bạn chỉ cần upload bài hát Tết (nhạc Xuân) của mình lên host và thay vào đường dẫn của bài hát mẫu. .

Mã để chèn nhạc nền cho WordPress, chỉ cần dán nó trước khi đóng (file footer.php), đây là một ví dụ:

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

Nếu sợ trang nào cũng có nhạc tự phát gây nhiễu loạn như đệm giọng thì bạn có thể chèn một trang riêng hoặc các bài viết tùy ý bằng cách dán đoạn mã trên vào bài viết đang viết ở phía dưới ở chế độ soạn thảo CSS HTML. Bài báo này là một ví dụ.

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

Trên mạng có nhiều mã pháo hoa nhưng theo mình thì hơi nặng và không đẹp lắm. Sau khi thu thập khá nhiều, tôi đã chọn đoạn mã JavaScript bắn pháo hoa bên dưới. Bạn tải về và tải lên host. Sau đó, bạn sẽ dán đoạn mã JavaScript sau vào trước khi đóng (thường có trong tệp header.php của WordPress) hoặc (trong tệp Footer của WordPress). Đối với loại trang đích, bạn chỉ cần dán 1 trong 2 thẻ trên. Mã mà bạn sẽ sử dụng để dán nó sẽ tương tự như sau:

<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à upload lên host của bạn, chứ mình xóa thì không được, năm sau tải lại để dùng).

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

Mã pháo hoa có â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 thanh bên

Bạn biết đấy, trong năm chúng ta vẫn dùng ngày dương nhưng cứ đến tháng cuối năm lại bắt đầu chuyển sang dùng âm lịch: v Và âm lịch 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.

Bạn tạo một tiện ích HTML trong thanh bên và chèn mã lịch vạn niên vào bên dưới:

<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"  style="width:100%;" data-urlimagen="" data-colorbordern="#800040" data-coloramn="#7f7f7f" data-colorduongn="#000000"></div>');getWidgetLichNgay("widgetlich-lvsicsoft");</script> </div>

Nếu đoạn mã trên hiển thị không đủ đẹp, bạn nên sử dụng plugin Lịch Vạn Niên trên kho WordPress.org!

5. Bạn cũng có thể chèn câu đối, hoa mai và hoa đào xung quanh web

Với phương pháp này, trên mạng có rất nhiều bài hướng dẫn nhưng bạn lưu ý với những website có nhiều khoảng trống hai bên để treo câu đối chứ không phải nó che hết nội dung. .

Chèn câu ghép chạy hai chiều, dán đoạn mã sau vào trước phần đóng của chủ đề bạn đang sử dụng (nó thường nằm trong tệp footer.php đó).

<script type="text/javascript">
//<![CDATA[
document.write('<div class="tet-2019"><img class="left-2019"  src="https://lh4.googleusercontent.com/-HXBsyeylNsk/XDQOO3VSvjI/AAAAAAAACm0/mN6mv1PCfgc8o3PrRm_kvBWN7KmMjsPqQCLcBGAs/s1600/tet1.png"/><img class="right-2019"  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 pháo hoa có video mình đã đăng lên Facebook rồi, các bạn xem tại đây: https://www.facebook.com/groups/wordpressviet/permalink/1566429240038288

Thì đây là một số mẹo khá đơn giản mà mình chia sẻ với các bạn, nếu có thắc mắc hay đóng góp những cách trang trí khác, đừng ngại để lại bình luận bên dưới, xin cảm ơn. tôi!

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

Trang trí trang web WordPress của bạn cho Giáng sinh
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

4.4 / 5 – (14 phiếu bầu)

Marketing online

Thông tin thêm

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

#Trang #trí #Tết #cho #website #WordPress #nè #anh
[rule_3_plain] #Trang #trí #Tết #cho #website #WordPress #nè #anh

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.
MỤC LỤC NỘI DUNG1 Ý nghĩa của việc trang trí Tết cho website2 Một số cách trang trí Tết2.1 1. Thay đổi ảnh nền website về chủ đề Tết2.2 2. Thêm nhạc nền chủ đề Xuân hay Tết gì đó vào2.3 3. Thêm hiệu ứng bắn pháo hoa vào web2.4 4. Thêm lịch vạn niên vào sidebar2.5 5. Ngoài ra còn có thể chèn câu đối, hoa mai hoa đào xung quanh web3 Bài viết về trang trí website WordPress
Ý 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)
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 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” 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″ src=”https://lh4.googleusercontent.com/-HXBsyeylNsk/XDQOO3VSvjI/AAAAAAAACm0/mN6mv1PCfgc8o3PrRm_kvBWN7KmMjsPqQCLcBGAs/s1600/tet1.png”/><img class=”right-2019″ 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