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

8
412

Chào các bạn,

Chỉ còn một vài ngày nữa là chúng ta đón tết Mậu Tuất 2018.

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 copy đoạn code dưới đây:

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 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%) 7 votes

8

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
4 Comment threads
4 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
5 Comment authors
Lê HuyQuangSaboThànhPhan Yên Recent comment authors
  Subscribe  
Nhận thông báo
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é!