Trang trí Tết cho website với câu đối và hoa mai đào khá độc đáo

21
1309

Chào các bạn,

Chỉ còn một vài ngày nữa là chúng ta đón tết Kỷ Hợi 2019.

Hòa chung niềm vui cùng U23 Việt Nam, không khí Tết đã tràn ngập phố phường, mỗi chúng ta cũng bắt đầu cảm thấy rộn ràng để chờ đón một năm mới an lành.

Ngay lúc này đây nếu bạn muốn mang không khí ấy lên blog thì bài viết này sẽ dành cho bạn.

Trong bài viết này, Tự Học MMO sẽ hướng dẫn bạn cách trang trí tết cho website bằng cách thêm câu đối và hoa mai, hoa đào.

Code trang trí Tết gồm có:

  • 2 banner trang trí 2 bên left, right của website.
  • 1 banner ở dưới bottom website.

Đây là code rất đơn giản, chỉ gồm một vài dòng HTML và CSS nên bạn có thể dễ dàng tùy biến để phù hợp cho website.

Bạn cũng có thể dễ dàng thay hình ảnh của 2 câu đối bằng các hình ảnh khác cũng được.

Cách thực hiện: 

Bạn tải 2 mẫu code ở đây => download.

Mẫu 1:

code trang trí tết cho website wordpress

  • Đối với Website thông thường: đặt code dưới thẻ <body> trong Website của bạn
  • Đối với WordPress: đặt code dưới thẻ <head> nằm trong file header.php
  • Đối với Blogger: chọn Menu →Bố cục→Thêm tiện ích HTML/Javascript
<!-- Start --> 
 
<script type="text/javascript">
document.write('<style type="text/css">body{padding-bottom:20px}</style><a href="#" target="_blank"><img style="position:fixed;z-index:9999;top:0;left:0" src="https://tuhocmmo.com/wp-content/uploads/2018/01/banner_left.png" _cke_saved_src="https://tuhocmmo.com/wp-content/uploads/2018/01/banner_left.png"/></a><a href="#" target="_blank"><img style="position:fixed;z-index:9999;top:0;right:0" src="https://tuhocmmo.com/wp-content/uploads/2018/01/banner_right.png"/></a><div style="position:fixed;z-index:9999;bottom:-50px;left:0;width:100%;height:104px;"></div><a href="#" target="_blank"><img style="position:fixed;z-index:9999;bottom:20px;left:20px" src="https://tuhocmmo.com/wp-content/uploads/2018/01/banner_header.png"/></a>');
var no=100;
	var ie4up=(document.all)?1:0;
	var ns6up=(document.getElementById&&!document.all)?1:0;
	function iecompattest(){return(document.compatMode&&document.compatMode!='BackCompat')?document.documentElement:document.body}var dx,xp,yp;var am,stx,sty;var i,doc_width=800,doc_height=600;if(ns6up){doc_width=self.innerWidth;doc_height=self.innerHeight}else if(ie4up){doc_width=iecompattest().clientWidth;doc_height=iecompattest().clientHeight}dx=new Array();xp=new Array();yp=new Array();am=new Array();stx=new Array();sty=new Array();for(i=0;i<no;++i){dx[i]=0;xp[i]=Math.random()*(doc_width-50);yp[i]=Math.random()*doc_height;am[i]=Math.random()*20;stx[i]=0.02+Math.random()/10; sty[i]=0.7+Math.random();if(ie4up||ns6up){document.write('<div id="dot'+i+'" style="POSITION:absolute;Z-INDEX:'+i+';VISIBILITY:visible;TOP:15px;LEFT:15px;"><span style="font-size:18px;color:#fff">*</span><\/div>')}}

</script>

Mẫu 2:

code trang trí tết cho website wordpress

<!-- Start --> 
 
<script type="text/javascript">
document.write('<style type="text/css">body{padding-bottom:20px}</style><a href="#" target="_blank"><img style="position:fixed;z-index:9999;top:0;left:0" src="https://tuhocmmo.com/wp-content/uploads/2018/01/banner_left_1.png" _cke_saved_src="https://tuhocmmo.com/wp-content/uploads/2018/01/banner_left_1.png"/></a><a href="#" target="_blank"><img style="position:fixed;z-index:9999;top:0;right:0" src="https://tuhocmmo.com/wp-content/uploads/2018/01/banner_right_2.png"/></a><div style="position:fixed;z-index:9999;bottom:-50px;left:0;width:100%;height:104px;"></div><a href="#" target="_blank"><img style="position:fixed;z-index:9999;bottom:20px;left:20px" src="https://tuhocmmo.com/wp-content/uploads/2018/01/banner_header.png"/></a>');
var no=100;
var ie4up=(document.all)?1:0;var ns6up=(document.getElementById&&!document.all)?1:0;function iecompattest(){return(document.compatMode&&document.compatMode!='BackCompat')?document.documentElement:document.body}var dx,xp,yp;var am,stx,sty;var i,doc_width=800,doc_height=600;if(ns6up){doc_width=self.innerWidth;doc_height=self.innerHeight}else if(ie4up){doc_width=iecompattest().clientWidth;doc_height=iecompattest().clientHeight}dx=new Array();xp=new Array();yp=new Array();am=new Array();stx=new Array();sty=new Array();for(i=0;i<no;++i){dx[i]=0;xp[i]=Math.random()*(doc_width-50);yp[i]=Math.random()*doc_height;am[i]=Math.random()*20;stx[i]=0.02+Math.random()/10; sty[i]=0.7+Math.random();if(ie4up||ns6up){document.write('<div id="dot'+i+'" style="POSITION:absolute;Z-INDEX:'+i+';VISIBILITY:visible;TOP:15px;LEFT:15px;"><span style="font-size:18px;color:#fff">*</span><\/div>')}}
</script>
 
<!-- End -->

Tuy nhiên, code này chưa responsive với giao diện điện thoại hoặc tablet, nên mình rất mong bạn nào cao thủ hướng dẫn nhé.

Bạn có thể chèn thêm các câu đối tết, lời chúc năm mới hoặc một vài cành hoa đào, mai, bánh chưng… vào trang web của bạn.

Nên đặt ảnh ở 2 bên lề hoặc phía dưới trang web, tránh sử dụng quá nhiều chi tiết trang trí khiến trang web chạy chậm và trông rối mắt.

>> Nếu bạn thấy phức tạp quá, có thể cài đặt plugin Hoành Phi Câu Đối chúc tết cho WordPress của bạn Cường dưới đây:

Nếu bạn thấy thích bài viết vui lòng chia sẻ nó đến những người khác giúp mình.

Chúc bạn và gia đình một năm mới An Khang – Thịnh Vượng.

Trang trí Tết cho website với câu đối và hoa mai đào khá độc đáo
5 (100%) 10 votes

21

Comment của bạn:

Lưu ý:
- Không dùng keyword (từ khóa trong mục 'Tên của bạn'.
- Bạn nên sử dụng tên thật và Email chính xác (email đang hoạt động).
- Bạn vui lòng bình luận, nhận xét bằng tiếng việt có dấu.
- Để tránh tình trạng spam, bình luận không đúng quy định, chủ đề bài viết nên tất cả các comments đầu tiên sẽ được kiểm duyệt cẩn thận. Mọi bình luận, nhận xét không đúng quy định sẽ bị xóa đi.

avatar
9 Comment threads
12 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
11 Comment authors
không biêtKhanh ĐăngNguyễn Đức Quyềntran trantran huu Recent comment authors
  Subscribe  
Nhận thông báo
Khanh Đăng
Khách
Khanh Đăng

Sao trên web mình bị lỗi không hiển thị được ảnh nhỉ

Nguyễn Đức Quyền
Khách
Nguyễn Đức Quyền

Làm thêm plugin câu đối mới đi bác ơi

tran tran
Khách
tran tran

AD hướng dẫn ẩn trên điện thoại được không, không biết khai báo thế nào. thanks!!

Anthony
Khách
Anthony

Rất đẹp ạ !!! Thanks admins

NGUYEN VAN PHUC
Khách
NGUYEN VAN PHUC

Không cho coppy thì bố thằng nào làm theo được. Hay là do code :)))

Quang
Khách

Cần cao thủ cho nó ẩn trên điện thoại hoặc làm sao đó, chứ cái này trên website thì ok, điện thoại thì out

Sabo
Khách

Giao diện 1 nhìn ưng mắt quá, hiển thị trên PC của mình khá OK 😀

Thành
Khách
Thành

Bác ơi muốn để độc hoa đào bên trên làm sao nhỉ ? site em neesy hiện hết cho bị che mấy 2 bên.

Phan Yên
Khách

Đẹp và ý nghĩa đó bác. Em kéo về site của em nhé!