Help Xin hỏi cách tạo thêm khu vực quảng cáo hoặc treo banner (xen2x)

[caolaogia7]

như các khu vực mình đã khoanh vùng 1 2 3 trong ảnh trên. Mình đang dùng xenforo 2x (2.0.4) Mình lấy ảnh chụp từ diễn đàn vnxf.vn làm minh họa nhé

- Giờ mình muốn ở khu vực 1 và 3 có quảng cáo nói chung là 1 hình ảnh hay baner gì đó nhưng nó sẽ trượt dọc theo diễn đàn nếu người dùng truy cập và kéo dài xuống dưới thì 2 khung ấy nó vẫn trượt theo. Dạng này mình thường thấy ở các trang khác và các báo hay có dạng này. Chỉ cần hiển thị dạng này ở trên PC
- Khu vực 2 thì cũng là khu quảng cáo hoặc treo baner nhưng nó ko cần chạy hay hiển thị khi thành viên kéo xuống dưới. Nhưng mình muốn khi truy cập trên mobile thì nó sẽ hiển thị cái baner bé nhỏ ở phía dưới màn hinh của mobile.

Không biết trên xenforo có thể tạo được các khu vực với tính năng như thế ko các huynh ? Nếu được thì xin chỉ giúp

khu vực 1 và 3 chủ yếu dùng vào dịp lễ hay tết treo cành mai hay pháo gì đó cho nó xôm ^^.

 

[NDK]

Quảng cáo banner vị trí số 1 & số 3: bạn vào template PAGE_CONTAINER, chèn đoạn code sau vào cuối cùng:

<div id="divAdRight" style="DISPLAY: none; POSITION: absolute; TOP: 0px">
<a href="link liên kết"><img src="Link ảnh" width="125" height="400" /></a>
</div>
<div id="divAdLeft" style="DISPLAY: none; POSITION: absolute; TOP: 0px">
<a href="link liên kết"><img src="Link ảnh" width="125" height="400" /></a>
</div>
<script>
   function FloatTopDiv()
    {
        startLX = ((document.body.clientWidth -MainContentW)/2)-LeftBannerW-LeftAdjust , startLY = TopAdjust+80;
        startRX = ((document.body.clientWidth -MainContentW)/2)+MainContentW+RightAdjust , startRY = TopAdjust+80;
        var d = document;
        function ml(id)
        {
            var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
            el.sP=function(x,y){this.style.left=x + 'px';this.style.top=y + 'px';};
            el.x = startRX;
            el.y = startRY;
            return el;
        }
        function m2(id)
        {
            var e2=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
            e2.sP=function(x,y){this.style.left=x + 'px';this.style.top=y + 'px';};
            e2.x = startLX;
            e2.y = startLY;
            return e2;
        }
        window.stayTopLeft=function()
        {
            if (document.documentElement && document.documentElement.scrollTop)
                var pY =  document.documentElement.scrollTop;
            else if (document.body)
                var pY =  document.body.scrollTop;
            if (document.body.scrollTop > 30){startLY = 3;startRY = 3;} else {startLY = TopAdjust;startRY = TopAdjust;};
            ftlObj.y += (pY+startRY-ftlObj.y)/16;
            ftlObj.sP(ftlObj.x, ftlObj.y);
            ftlObj2.y += (pY+startLY-ftlObj2.y)/16;
            ftlObj2.sP(ftlObj2.x, ftlObj2.y);
            setTimeout("stayTopLeft()", 1);
        }
        ftlObj = ml("divAdRight");
        //stayTopLeft();
        ftlObj2 = m2("divAdLeft");
        stayTopLeft();
    }
    function ShowAdDiv()
    {
        var objAdDivRight = document.getElementById("divAdRight");
        var objAdDivLeft = document.getElementById("divAdLeft");
        if (document.body.clientWidth < 1000)
        {
            objAdDivRight.style.display = "none";
            objAdDivLeft.style.display = "none";
        }
        else
        {
            objAdDivRight.style.display = "block";
            objAdDivLeft.style.display = "block";
            FloatTopDiv();
        }
    }
</script>
<script>
document.write("<script type='text/javascript' language='javascript'>MainContentW = 1000;LeftBannerW = 125;RightBannerW = 125;LeftAdjust = 5;RightAdjust = 5;TopAdjust = 155;ShowAdDiv();window.onresize=ShowAdDiv;;<\/script>");
</script>

Quảng cáo vị trí số 2: Bạn vào Templates --- PAGE_CONTAINER, tìm đoạn code:

<div class="p-body">
    <div class="p-body-inner">
        <!--XF:EXTRA_OUTPUT-->

Thêm vào dưới đó đoạn code để hiển thị banner bạn cần:

<a href="link bài viết"><img src=" link ảnh"/></a>

Demo:

 

[caolaogia7]

huynh cho xin code làm sao để khi truy cập bằng mobile mà cái khu vực số 2 nó sẽ hiển thị ở chỗ như khoanh vùng trong ảnh dưới dc ko huynh

 

[NDK]

Mình chỉ bạn chèn code vào hook above breadcumb, thì responsive qua mobile nó vẫn ở trên đó thôi, ko chạy được đâu cái này 1 phần cũng do code responsive sẵn có của Xen nữa

 

[caolaogia7]

à huynh cho hỏi cái này:

chỗ số 1 mình chả hiểu sao nó bị thế vì bản code là 2.0.4 mình up lên 2.0.5 ko biết lỗi gì ko nên mình ko hỏi chỗ đó vì để mình cài lại xem sao. Cái mình cần hỏi là chỗ số 2 và số 3
Số 2: mình thử chỉnh width và height rồi. width là rộng và height là cao đúng ko ? nhưng khi mình thay giá trị vào thì chỉ có mỗi width có tác dụng. tức là rộng hơn ra. còn khi thay height vào thì nó chẳng có tác dụng gì. độ cao vẫn như vậy.
Còn số 3 là mình muốn 2 ô của số 2 nó chạy ra ngoài chút nữa thì chỉnh chỗ nào huynh ?

 

[NDK]

Bạn muốn 2 cái banner chạy dọc nó sát ra ngoài rìa web đúng ko ?
Bạn về lại cái đoạn code thêm banner đó, tìm đoạn:

document.write("<script type='text/javascript' language='javascript'>MainContentW = 1000;LeftBannerW = 125;RightBannerW = 125;LeftAdjust = 5;RightAdjust = 5;TopAdjust = 155;ShowAdDiv();window.onresize=ShowAdDiv;;<\/script>");

Bạn sửa thông số ở 2 mục này

LeftAdjust = 5;RightAdjust = 5;

Tăng 2 số 5 đó lên, khi nào nó ở vị trí bạn cần là ok nhé

Mục height do chỉnh thông số auto nên bạn để hình bao nhiêu thì nó sẽ tự kéo dãn ra, chỉ thay đổi đc width thôi. Mục đích là đúng thông số kích thước nó sẽ responsive và dễ nhìn hơn. Banner skyscraper thường có kích cỡ 120*600. Nên thôi bạn chịu khó thiết kế hình cho vừa kích thước và dễ nhìn nhé

Mục 1 bạn đặt banner quảng cáo dưới đoạn:

        <xf:ad position="container_breadcrumb_top_above" />

trong template PAGE_CONTAINER nhé

 

[caolaogia7]

Bạn muốn 2 cái banner chạy dọc nó sát ra ngoài rìa web đúng ko ?
Bạn về lại cái đoạn code thêm banner đó, tìm đoạn:

document.write("<script type='text/javascript' language='javascript'>MainContentW = 1000;LeftBannerW = 125;RightBannerW = 125;LeftAdjust = 5;RightAdjust = 5;TopAdjust = 155;ShowAdDiv();window.onresize=ShowAdDiv;;<\/script>");

Bạn sửa thông số ở 2 mục này

LeftAdjust = 5;RightAdjust = 5;

Tăng 2 số 5 đó lên, khi nào nó ở vị trí bạn cần là ok nhé

Mục height do chỉnh thông số auto nên bạn để hình bao nhiêu thì nó sẽ tự kéo dãn ra, chỉ thay đổi đc width thôi. Mục đích là đúng thông số kích thước nó sẽ responsive và dễ nhìn hơn. Banner skyscraper thường có kích cỡ 120*600. Nên thôi bạn chịu khó thiết kế hình cho vừa kích thước và dễ nhìn nhé

Mục 1 bạn đặt banner quảng cáo dưới đoạn:

        <xf:ad position="container_breadcrumb_top_above" />

trong template PAGE_CONTAINER nhé

mình khôi phục file gốc rồi làm như hướng dẫn lúc đầu. Kỳ lạ thế này:
- nếu mình chèn 3 vị trị đó cùng 1 lúc rồi save lại thì lại bị tình trạng đó. Nếu xóa những chỗ đã thêm vào (tức là giống code ban đầu chưa bị) thì khi save lại thì chỉ mất các vị trí đó chứ ko hết. Nhưng nếu Revert lại thì hết.
- sau khi revert thì mình chèn lần lượt các vị trí 2 xong save -> thì ko bị gì mà vị trí đó đã xuất hiện.
- tiếp tục xóa vị trí 2 và chèn vị trí 1 và 3 vào xong save -> vẫn ko bị gì và vị trí 1 và 3 đã xuất hiện và tất nhiên vị trí 2 đã mất do xóa.
- tiếp tục và chèn vị trì 2 vào và save -> cũng vẫn ko bị gì mà cả 3 vị trí đã xuất hiện.
Hix ko lẽ chèn cùng lúc cả 3 vị trí thì lại bị sao ta ? phải chèn từ từ.

Tóm lại là sau khi chèn từ từ từng vị trí thì không bị gì cả. Tks huynh nhiều

 

[NDK]

Bạn chèn sai chắc vậy
- Banner 1 trên cùng bạn chèn ở mục "<xf:ad position=..." ở template Page_Container
- Banner 2 bên, bạn chèn ở cuối cùng template Page_Container
Chứ ko phải cái này dưới cái kia đâu nha

 

[caolaogia7]

Bạn chèn sai chắc vậy
- Banner 1 trên cùng bạn chèn ở mục "<xf:ad position=..." ở template Page_Container
- Banner 2 bên, bạn chèn ở cuối cùng template Page_Container
Chứ ko phải cái này dưới cái kia đâu nha

mình biết mà. nhưng nó ra như thế ấy chứ.

 

[caolaogia7]

giờ chỉ đang nghĩ làm sao để chèn được 1 cái banner có chiều cao vào 2 bên nè vì chỉnh cái chiều cao ko được. Để mò thêm xem sao.

 

[NDK]

mình biết mà. nhưng nó ra như thế ấy chứ.

Mình test trên localhost vẫn đc với Xen 2.0.2, hay do version ko hợp nhỉ
Banner thì giờ chỉ cần thiết kế cho đúng với code thôi là đc mà, vì trong height là auto nó tự kéo dãn chiều cao

 

[caolaogia7]

Mình test trên localhost vẫn đc với Xen 2.0.2, hay do version ko hợp nhỉ
Banner thì giờ chỉ cần thiết kế cho đúng với code thôi là đc mà, vì trong height là auto nó tự kéo dãn chiều cao

mới thử và vẫn ổn