Code trang trí tết đẹp cho website

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
14,799
Được Like
11,094
Hôm này mình sẽ hướng dẫn cho các bạn cách chèn code tết cho website, cực nhanh và đơn giản, nhưng cũng không kém phần đẹp mắt.

Cách làm như sau:
Vào ACP => Template => Footer => chèn vào cuối cùng đoạn code sau:
Mã:
<style type="text/css">body{padding-bottom:20px}</style><a href="http://vnxf.vn" target="_blank"><img style="position:fixed;z-index:9999;top:0;left:0" src="images/banner_left.png" _cke_saved_src="images/banner_left.png"/></a><a href="http://vnxf.vn/" target="_blank"><img style="position:fixed;z-index:9999;top:0;right:0" src="images/banner_right.png"/></a><div style="position:fixed;z-index:9999;bottom:-50px;left:0;width:100%;height:104px;background:url(images/nentet.png) repeat-x bottom left;"></div><a href="http://vnxf.vn/" target="_blank"><img style="position:fixed;z-index:9999;bottom:20px;left:20px" src="images/banner_header.png"/></a>

Và để đẹp mắt hơn với pháo hoa ngày tết nữa các bạn làm theo cách sau nhé, cách này mình mới thử tên xenforo thôi, những mã nguồn khác các bạn tự mày mò tùy biến thêm.
Cách làm như sau:
Bước 1: Dowload file bên dưới về up lên thư mục gốc của hosting ngang hàng với admin.php
Bước 2: Vào ACP => mở template page_container_js_head lên chèn vào cuối cùng đoạn
Mã:
<script type="text/javascript" src="FireWorksNewYear.js"></script>

Như vậy là xong rồi.

Quay ra trang chủ và cảm nhận nhé, thật đơn giản phải không? Code này có thể chèn cho bất kỳ mã nguồn nào không nhất thiết phải là xenforo nhé.

Demo:

untitled.PNG

Chúc các bạn thành công.


Nguồn: bvn.vn​
 

Đính kèm

  • FireWorksNewYear.zip
    243.6 KB · Lượt xem: 229
Sửa lần cuối bởi điều hành viên:

Jindo_Katori

Thượng Đế
Tham gia
01/03/2015
Bài viết
1,464
Được Like
1,204
Phải chờ 1 năm nữa mới được sài code này lâu vãi ra.
Bác!
Làm phát xe tăng kỷ niệm 40 năm giải phóng tất cả các mem cùng sài cho nó xôm bác. :D
 
  • Like
Reactions: THB

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
14,799
Được Like
11,094
Phải chờ 1 năm nữa mới được sài code này lâu vãi ra.
Bác!
Làm phát xe tăng kỷ niệm 40 năm giải phóng tất cả các mem cùng sài cho nó xôm bác. :D
để mình tìm ảnh làm xem thử :D
 

ntphong

Thượng Đế
Tham gia
23/07/2015
Bài viết
45
Được Like
24
đang tải về ko có file hình thì làm sau cài đây bác. bổ sung file hình giúp bác ơi.
 

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
14,799
Được Like
11,094
để mình tìm lại xem còn không @@
 

ntphong

Thượng Đế
Tham gia
23/07/2015
Bài viết
45
Được Like
24
để mình tìm lại xem còn không @@
Hình ảnh treo đ1o bác, tải về giải nến ra chỉ có mỗi file này FireWorksNewYeard.js nên mới nhờ bác bổ sung hình đó.
 

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
14,799
Được Like
11,094
Update nha
 

tranthanh

Thượng Đế
Tham gia
07/09/2015
Bài viết
95
Được Like
36
đà làm nhưng cái hình hơi to che mất 1 số phần không đọc được . :(
X1MT9oN.png
 

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
14,799
Được Like
11,094
thì chỉnh cho nó nhỏ lại, như hình demo là mình tự làm đó @@
 

ntphong

Thượng Đế
Tham gia
23/07/2015
Bài viết
45
Được Like
24
Đs4 ok rùi, thank bác. quá đẹp luôn.
 

ntphong

Thượng Đế
Tham gia
23/07/2015
Bài viết
45
Được Like
24
Bác ơi xem giúp cái này,
Q2OW4NO.jpg
sao khi lên diie65n thoại cho nó mất dc bác. như gì vào giao diện nhỏ nó che mất tiêu bài viết rùi.
 
  • Like
Reactions: THB

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
14,799
Được Like
11,094
à cái này không responsive @@
 

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
14,799
Được Like
11,094
có thì chắc có, nhưng phải nhờ các cao nhân chuyên về responsive này giúp đỡ ^^
 

NimGiaMinh

Thượng Đế
Tham gia
27/01/2016
Bài viết
25
Được Like
37
HTML:
<style type="text/css">
body{padding-bottom:20px}
@media (max-width: 767px) {
  .banner_left img,.banner_right img{
display:none;
}
}
@media (min-width: 768px) and (max-width: 991px) {
  .banner_left img,.banner_right img{
width:100px;
}
}

@media (min-width: 992px){
  .banner_left img,.banner_right img{
width:150px;
}
}
</style>
<div class="banner_left" style="position:fixed;z-index:9999;top:0;left:0">
<a href="http://vnxf.vn" target="_blank">
<img  src="images/banner_left.png" _cke_saved_src="images/banner_left.png"/>
</a>
</div>
<div class="banner_right" style="position:fixed;z-index:9999;top:0;right:0" >
<a href="http://vnxf.vn/" target="_blank">
<img src="images/banner_right.png"/>
</a>
</div>
<div style="position:fixed;z-index:9999;bottom:-50px;left:0;width:100%;height:104px;background:url(images/nentet.png) repeat-x bottom left;">
</div>
<a href="http://vnxf.vn/" target="_blank">
<img style="position:fixed;z-index:9999;bottom:20px;left:20px" src="images/banner_header.png"/>
</a>

Dùng code này để responsive
 

daklak1985

Thượng Đế
Tham gia
01/09/2016
Bài viết
216
Được Like
68
HTML:
<style type="text/css">
body{padding-bottom:20px}
@media (max-width: 767px) {
  .banner_left img,.banner_right img{
display:none;
}
}
@media (min-width: 768px) and (max-width: 991px) {
  .banner_left img,.banner_right img{
width:100px;
}
}

@media (min-width: 992px){
  .banner_left img,.banner_right img{
width:150px;
}
}
</style>
<div class="banner_left" style="position:fixed;z-index:9999;top:0;left:0">
<a href="http://vnxf.vn" target="_blank">
<img  src="images/banner_left.png" _cke_saved_src="images/banner_left.png"/>
</a>
</div>
<div class="banner_right" style="position:fixed;z-index:9999;top:0;right:0" >
<a href="http://vnxf.vn/" target="_blank">
<img src="images/banner_right.png"/>
</a>
</div>
<div style="position:fixed;z-index:9999;bottom:-50px;left:0;width:100%;height:104px;background:url(images/nentet.png) repeat-x bottom left;">
</div>
<a href="http://vnxf.vn/" target="_blank">
<img style="position:fixed;z-index:9999;bottom:20px;left:20px" src="images/banner_header.png"/>
</a>

Dùng code này để responsive
Chèn vào đâu vậy,tớ chèn vào trước </header> không đc
 
  • Like
Reactions: THB

daklak1985

Thượng Đế
Tham gia
01/09/2016
Bài viết
216
Được Like
68
Làm sao để hình câu đối đó mất trên điện thoại đc nhĩ?mình chỉ muốn nó hiển thị trên máy tính thôi,thanks giúp với cậu @PVS
 

leejuu

Thượng Đế
Tham gia
04/12/2016
Bài viết
41
Được Like
14
Cái này đã có ai chỉnh để hiện lên trang điện thoại chưa vậy. cho mình hướng dẫn với :D. sắp tết rồi
 
  • Like
Reactions: THB

daklak1985

Thượng Đế
Tham gia
01/09/2016
Bài viết
216
Được Like
68
Code trên tất cả các dòng điện thoại khác vẫn ẩn đc nhưng riêng dòng ipad có kích thước màn hình 768x1024 thì nó không ẩn,nó vẫn hiển thị 2 banner ở 2 bên,ai biết cách fix không hướng dẫn mình với,thanks !
 
  • Like
Reactions: THB

Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS


Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Điện Lạnh Thịnh Phát
Top Bottom