Hướng dẫn thêm khối quảng cáo hai bên 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.
 
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!