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

caolaogia7

Corporal
Tham gia
15/03/2017
Bài viết
164
Được Like
52
2a.JPG

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é
upload_2018-5-4_12-17-31.gif

- 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
upload_2018-5-4_12-17-31.gif
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

MasterSergeant
Tham gia
16/03/2015
Bài viết
830
Được Like
743
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:
PHP:
<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:
PHP:
<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:
PHP:
<a href="link bài viết"><img src=" link ảnh"/></a>
Demo:
Screenshot (163).png

Screenshot (164).png
 

caolaogia7

Corporal
Tham gia
15/03/2017
Bài viết
164
Được Like
52
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
2a.JPG
 

NDK

MasterSergeant
Tham gia
16/03/2015
Bài viết
830
Được Like
743
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 :D cái này 1 phần cũng do code responsive sẵn có của Xen nữa
 

caolaogia7

Corporal
Tham gia
15/03/2017
Bài viết
164
Được Like
52
à huynh cho hỏi cái này:
2.JPG

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

MasterSergeant
Tham gia
16/03/2015
Bài viết
830
Được Like
743
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:
PHP:
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
PHP:
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:
PHP:
        <xf:ad position="container_breadcrumb_top_above" />
trong template PAGE_CONTAINER nhé
 

caolaogia7

Corporal
Tham gia
15/03/2017
Bài viết
164
Được Like
52
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:
PHP:
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
PHP:
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:
PHP:
        <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

MasterSergeant
Tham gia
16/03/2015
Bài viết
830
Được Like
743
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 :x:x
 

caolaogia7

Corporal
Tham gia
15/03/2017
Bài viết
164
Được Like
52
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 :x:x
mình biết mà. nhưng nó ra như thế ấy chứ.
 

caolaogia7

Corporal
Tham gia
15/03/2017
Bài viết
164
Được Like
52
giờ chỉ đang nghĩ làm sao để chèn được 1 cái banner có chiều cao vào 2 bên nè :D vì chỉnh cái chiều cao ko được. Để mò thêm xem sao.
 

NDK

MasterSergeant
Tham gia
16/03/2015
Bài viết
830
Được Like
743
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

Corporal
Tham gia
15/03/2017
Bài viết
164
Được Like
52
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
 

Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS

Dịch vụ XenForo của VNXF

Mr. Tuấn

Mobile/Zalo: 0988 488 096

Telegram: bluekpro

Email: [email protected]

Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Top Bottom