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

Thứ ba - 07/02/2017 21:39
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.
 
khối quảng cáo hai bên giao diện nukeviet
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!

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

Xếp hạng: 5 - 2 phiếu bầu
Click để đánh giá bài viết
Rao vặt Đà Nẵng là công cụ mới giúp bạn dễ dàng mang thông tin đến với người xem. Qua đây người dùng có thể đăng tin miễn phí, về các chủ đề như rao vặt, việc làm Đà Nẵng,... lên website mà không phát mất một loại phí nào. 

  Ý kiến bạn đọc

  • PQ Tuan
    PQ Tuan   15/08/2017 06:02

    Làm sao chèn luôn 2 cái banner trái và phải cho nó chạy lên chạy xuống luôn AD

    • Administrator   15/08/2017 06:09

      @PQ Tuan có luôn cho bạn https://mynukeviet.net/tuy-bien-nukeviet/huong-dan-them-khoi-quang-cao-hai-ben-giao-dien-nukeviet-259.html

Trung tâm ứng dụng NukeViet
Ghi rõ nguồn khi sao chép thông tin từ website này.

Powered by NukeViet - a product of VINADES.,JSC