Hướng dẫn thêm khối quảng cáo hai bên giao diện NukeViet

Thứ năm - 14/10/2021 05:14
Tạo quảng cáo cố định hai bên website, hướng dẫn này sẽ giúp bạn tạo hai khối quảng cáo trái và phải cố định cho giao diện NukeViet
Vị trí quảng cáo hai bên sườn website luôn được các webmaster tận dụng bởi vị trí hiển thị của nó luôn ở vùng nổi bật song lại không chiếm nhiều diện tích của phần nội dung. Giao diện NukeViet được tùy biến bởi các khối block, trong bài viết này, Ứng dụng NukeViet sẽ hướng dẫn mọi người thêm khối quảng cáo vào vùng này, khi dùng khối block NukeViet, người quản trị có thể tùy ý thêm nội dung vào hai khối này.
 

Hai khối block trái và phải sau khi thêm

Mở themes/ten-theme/config.ini
Tìm
</positions>
Thêm bên trên
<position>       <name>FIX_BANNER_LEFT</name>       <tag>[FIX_BANNER_LEFT]</tag></position><position>   <name>FIX_BANNER_RIGHT</name>        <tag>[FIX_BANNER_RIGHT]</tag></position>

Mở tập tin css định dạng cho toàn site (tìm tập tin định dạng của site, thường ở thư mục themes/ten-theme/css)
Thêm vào cuối file
.fix_banner_left {    width:120px;    height:480px;    position:fixed;    top:2px;    left:2px;    display:none;}.fix_banner_right {    width:120px;    height:480px;    position:fixed;    top:2px;    right:2px;    display:none;}

Mở tập tin js dùng chung cho toàn site (tìm tập tin js chứa các đoạn javascript dùng cho toàn site, thường ở thư mục themes/ten-theme/js)
Thêm vào cuối file
function fix_banner_center() {    var a = Math.round((winX - 1130) / 2);    0 <= a ? ($("div.fix_banner_left").css("left", a + "px"), $("div.fix_banner_right").css("right", a + "px"), a = Math.round((winY - $("div.fix_banner_left").height()) / 2), 0 >= a && (a = 0), $("div.fix_banner_left").css("top", a + "px"), a = Math.round((winY - $("div.fix_banner_right").height()) / 2), 0 >= a && (a = 0), $("div.fix_banner_right").css("top", a + "px"), $("div.fix_banner_left").show(), $("div.fix_banner_right").show()) : ($("div.fix_banner_left").hide(), $("div.fix_banner_right").hide())}$(function() {    fix_banner_center();});$(window).on("resize", function() {    fix_banner_center();});
Chú ý: Trong đoạn code này, bạn có thể điều chỉnh thông số 1130 để thay đổi khoảng cách giữa khối quảng cáo so với nội dung.

Mở themes/ten-theme/layout/footer_only.tpl
Tìm
</body>
Thêm bên trên
<div class="fix_banner_left">[FIX_BANNER_LEFT]</div><div class="fix_banner_right">[FIX_BANNER_RIGHT]</div>
Hoàn tất, bây giờ, bạn đã có thể đăng nhập quản trị, bật kéo thả block, sẽ thấy hai khối block này xuất hiện. Bạn có thể thêm nội dung tùy ý vào đây bằng cách thêm block cho hai khối này.
Chúc các bạn thành công!

 

Những tin mới hơn

Những tin cũ hơn

Tổng số điểm của bài viết là: 5 trong 1 đánh giá

Xếp hạng: 5 - 1 phiếu bầu
Click để đánh giá bài viết
Bạn đã không sử dụng Site, Bấm vào đây để duy trì trạng thái đăng nhập. Thời gian chờ: 60 giây