Hướng dẫn đặt quảng cáo giữa bài viết – dạng “Nền – fixed”

ads in background

Đối với nhiều website, nguồn sống của nó chính là từ “Quảng cáo”. Vậy để đặt nhiều quảng cáo, cũng như không gây phiền nhiễu, khó khăn cho người dùng. Chúng ta cần lồng ghép, cần khéo léo để đặt vị trí quảng cáo. Một trong vị trí kha khá khó đó là dạng quảng cáo giữa bài viết – “Nền – fixed”.

Ví dụ

Không mất thời gian thêm nữa, trong bài viết này mình sẽ hướng dẫn các bạn đặt dẫn đặt quảng cáo giữa bài viết – dạng “Nền – fixed”.

Chúng ta hãy tiến hành theo 3 bước sau

1. Ném Quảng cáo vào giữa Nội dung

Ở đây, tùy thuộc vào website của bạn. Chúng ta có khá nhiều cách để ném quảng cáo vào giữa Nội dung, ví dụ như: dùng code + plugins.

Để tối ưu công việc, mình có sử dụng plugins: Advanced Ads – dành cho WordPress.
Cái này sẽ giúp bạn tùy chỉnh quảng cáo ở bất kỳ vị trí nào, trong đó có giữa nội dung.

Hoặc code – trong functions.php WordPress

Muốn thay đổi vị trí hiển thị bạn thay đổi số 2 thành số bạn muốn (dòng số 12) số 2 nghĩa là sau đoạn văn (hay sau thẻ </p>) số 2 sẽ hiển thị code của bạn.

2. Code đặt Fixed Nội dung dạng nền

Đây là code đặt fixed nội dung dạng nền ở giữa nội dung, code này dành cho bên Front-end nên gồm CSS + JavaScript.

See the Pen Fixed position relative to parent element 2 – Position Fixed – Vinh Web by vinh (@vjhnguyen) on CodePen.0

Ở ví dụ đơn giản phía trên, dường như mọi thứ đã hoạt động. Tuy nhiên đó mới là ví dụ, trong thực tế website, chúng ta còn rất nhiều phần tử khác.

Ads bị hở
Ads bị hở

Việc Fixed – quảng cáo như thế sẽ không được ổn cho lắm – vì nó có thể hiện lên trên nội dung. Vậy ta có bước 3.

3. Ghộp các phần tử khác với JavaScript

Mình đoạn code để ghộp phần tử từ đầu cho đến giữa như sau:

See the Pen Select Elements “From – to” | Wrap Elements without the “middle one” – Vinh Web by vinh (@vjhnguyen) on CodePen.0

Vậy bạn cần làm bây giờ là: nhóm các phần tử từ đầu cho đến ads, và từ ads đến cuối. Hai nhóm này ta đặt: relative và z-index cao lên là “done” rồi.

Ví dụ thực tế: https://kenhtuyensinh24h.vn/7-van-de-gay-tranh-cai-ve-ky-thi-thpt-quoc-gia/
bạn vào mobile + refresh trình duyệt nhé.

Kết

Ở đây, tư duy thêm một chút là bạn đã hoàn thành công việc rồi. Chúc bạn thành công với bài hướng dẫn này.

Leave a Reply

avatar
  Subscribe  
Notify of
%d bloggers like this: