Hướng dẫn thêm khối quảng cáo hai bên giao diện NukeViet
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
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
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
Mở themes/ten-theme/layout/footer_only.tpl
Tìm
Chúc các bạn thành công!
Hai khối block trái và phải sau khi thêmMở 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!
Tags: giao diện nukeviet, khối block
Những tin mới hơn
Những tin cũ hơn