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:
- Đố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:
<!-- 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:
- Download: https://github.com/cuongdcdev/wp-cau-doi/releases/download/1.0/wp-cau-doi.zip
- Source code: https://github.com/cuongdcdev/wp-cau-doi
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.
ad ơi sao mình dán đoạn css để ẩn trên điện thoại mà nó không được nhỉ
@media only screen and (max-width: 1024px) {
.banner_left img, .banner_right img {
display: none;
}
}
Sao trên web mình bị lỗi không hiển thị được ảnh nhỉ
Làm thêm plugin câu đối mới đi bác ơi
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!!
Rất đẹp ạ !!! Thanks admins
Không cho coppy thì bố thằng nào làm theo được. Hay là do code :)))
bạn tải code ở đây nhé: https://drive.google.com/file/d/10vBSe6VAOqIXCK8hsf2uDb9dNMkJBzVZ/view?usp=sharing
Thanks bác. nhưng code này chưa responsive thật
đành ẩn hiển thị trên điện thoại thôi bác, vì trên đt thì giao diện nó nhỏ mà treo cái banner vào thì không đủ diện tích mất
Bác có thể hướng dẫn cụ thể các ẩn trên mobile được không ạ
Mình vừa mới tìm ra cách. ko cẩn ẩn trên mobile . anh em gán thẻ class cho nó rồi dùng display:none để ẩn theo kích thước tùy chỉnh. vd:
if(x < 800){
$('.adamviettravel').attr('style','display:none');
$('.adamviettravel').attr('style','display:none');
Gán thuộc tính class cho 2 cái ảnh bên 2 bên là adamviettravel
x<800 display:none
Máy tính bảng vẫn hiển thị, nhưng điện thoại sẽ ko thấy
Rất cảm ơn Phúc nhé ! Mọi người có thể tham khảo !
Admin cho hỏi web mình là opencard thì cho đoạn code vào đâu vậy
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
Bạn khai báo 2 thuộc tính class banner_right và banner_left rồi thêm code này vào css để ẩn trên giao diện điện thoại đi nhé: 🙂
@media only screen and (max-width: 1024px) {
.banner_left img, .banner_right img {
display: none;
}
}
nhờ ad chỉ cụ thể khai báo như nào ạ. em chỉ biết chèn thôi. mong ad hỗ trợ
Giao diện 1 nhìn ưng mắt quá, hiển thị trên PC của mình khá OK 😀
trang trí cho có không khí Tết cái Định, hôm nào cafe chứ 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.
nghĩa là sao Thành ! mình thấy hiện bình thường mà, cái hoa đào đấy là ảnh banner ! cậu tìm banner nào nhỏ gọn thay link tương ứng vào code là được
Đẹp và ý nghĩa đó bác. Em kéo về site của em nhé!
😀 em share bác thích cứ dùng thoải mái