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

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,728
Được Like
12,680
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

FirstSergeant
Tham gia
01/03/2015
Bài viết
1,462
Được Like
1,205
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

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,728
Được Like
12,680
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

Private
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

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,728
Được Like
12,680
để mình tìm lại xem còn không @@
 

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,728
Được Like
12,680
Update nha
 

tranthanh

Gefreiter
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

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,728
Được Like
12,680
thì chỉnh cho nó nhỏ lại, như hình demo là mình tự làm đó @@
 

ntphong

Private
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

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,728
Được Like
12,680
à cái này không responsive @@
 

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,728
Được Like
12,680
có thì chắc có, nhưng phải nhờ các cao nhân chuyên về responsive này giúp đỡ ^^
 

NimGiaMinh

Private
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

MasterCorporal
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

MasterCorporal
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

Private
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

MasterCorporal
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

Dịch vụ XenForo của VNXF

Mr. Tuấn

Mobile/Zalo: 0988 488 096

Telegram: bluekpro

Email: [email protected]

Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Top Bottom