Tạo banner quảng cáo trượt dọc 2 bên website WordPress

Bài này mình sẽ hướng dẫn bạn cách tạo banner quảng cáo trượt dọc 2 bên website WordPress.

Đôi khi để tăng không gian hiển thị của web / blog, quảng cáo chạy hai bên thì bạn chỉ việc chèn một đoạn code html nhẹ như bên dưới với các thông số tùy chỉnh để phù hợp với web, blog của mình.

Bạn sẽ thấy 2 banner trượt dọc theo hai bên sau khi mình chèn code. Code rất nhẹ tương thích với các nền tảng WordPress, Blogspot, Joomla, Drupal …

 

<br>
&lt;div id='ads-trai'&gt;<br>
   &lt;div style='margin:0 0 5px 0; padding:0;width:160px;position:fixed; right:50%; top:125px; margin-right:512px;z-index:1'&gt;<br>
   &lt;span style="color: #ff0000;" data-mce-style="color: #ff0000;"&gt;</p>
<p>        &lt;a href='http://phim14.me/'&gt;&lt;img src='http://farm6.staticflickr.com/5759/31081343902_b95bee4751_o.png'/&gt;&lt;/a&gt;<br>
   &lt;/span&gt;<br>
   &lt;/div&gt;<br>
&lt;/div&gt;</p>
<p>&lt;div id='ads-phai'&gt;<br>
   &lt;div style='margin:0 0 5px 0; padding:0;width:160px;position:fixed; left:50%; top:125px; margin-left:512px;'&gt;<br>
   &lt;span style="color: #ff0000;" data-mce-style="color: #ff0000;"&gt;<br>
         &lt;a href='http://www.phim14.me/'&gt;&lt;img src='http://farm6.staticflickr.com/5759/31081343902_b95bee4751_o.png'/&gt;     &lt;/a&gt;<br>
   &lt;/span&gt;<br>
   &lt;/div&gt;<br>
&lt;/div&gt;<br>

Sau khi chèn xong, bạn kiểm tra và tùy chỉnh các thông số tăng giảm 50%, để vị trí đặt banner phù hợp với website / blog của bạn.

Mã thứ hai tương tự như mã đầu tiên, với hai biểu ngữ riêng biệt ở mỗi bên. Bạn có thể điều chỉnh độ rộng của biểu ngữ bằng cách thay đổi tham số 120px và vị trí bằng cách thay đổi 10px thành một số phù hợp với web của bạn.

<br>
&lt;div id="left_ads_float"&gt; &lt;a href="Link web 1" target="_blank"&gt;&lt;img border="0" src="Link hình ảnh 1" width="120" /&gt;&lt;/a&gt; &lt;/div&gt; </p>
<p>&lt;div id="right_ads_float"&gt; &lt;a href="Link web 2" target="_blank"&gt;&lt;img border="0" src=" Link hình ảnh 2" width="120" /&gt;&lt;/a&gt; &lt;/div&gt;<br>
&lt;style&gt; #left_ads_float { top:10px; left: 10px; position:fixed; } #right_ads_float { top:10px; right: 10px; position:fixed; } &lt;/style&gt; &lt;script&gt; var vtlai_remove_fads=false; function vtlai_check_adswidth() { if(vtlai_remove_fads) { document.getElementById('left_ads_float').style.display='none'; document.getElementById('right_ads_float').style.display='none'; return; }else if(document.cookie.indexOf('vtlai_remove_float_ads')!=-1) { vtlai_remove_fads=true; vtlai_check_adswidth(); return; } else { var lwidth=parseInt(document.body.clientWidth); if(lwidth&lt;1110) { document.getElementById('left_ads_float').style.display='none'; document.getElementById('right_ads_float').style.display='none'; } else { document.getElementById('left_ads_float').style.display='block'; document.getElementById('right_ads_float').style.display='block'; } setTimeout('vtlai_check_adswidth()',10); } } &lt;/script&gt;<br>

Nếu bạn không thích chèn code mà thích dùng plugin thì xem tiếp bên dưới nhé.

Tạo quảng cáo trượt hai bên trong WordPress

Với plugin DevVn Float Left Right Ads, bạn có thể tạo quảng cáo 2 bên cho WordPress, còn được gọi là quảng cáo banner, trượt qua các cạnh của trang web.

Sau đây mình sẽ hướng dẫn bạn cách cài đặt và cấu hình plugin:

Bước 1. Cài đặt DevVn Float Left Right Ads

sau khi cài đặt thì bạn bấm kích hoạt plugin:

Bước 2. Truy cập vào admin, chọn Settings và chọn tiếp Float Left Right Ads:

Bước 3: Điều chỉnh thông số cho phù hợp

  • Active Plugin: Bật (Yes) hay Tắt (No) Plugin
  • Exclude show on: Không hiển thị quảng cáotrên. Front Page (Trang chủ). Posts Page (Bài viết). Hoặc không hiển thị trên một số bài viết/trang được chỉ định, điền ID vào, ví dụ như hình (Hướng dẫn xem ID của bài viết và trang ở cuối bài này).
  • Show Only: Chỉ hiển thị quảng cáo ở. Front Page (Trang chủ). Posts Page (Bài viết). Chọn vào cái này thì phần Exclude show on sẽ bị tắt.
  • Show ads if client screen width >=: Chỉ hiển thị quảng cáo khi kích thước màn hình lớn hơn X px. Điền X vào nhé.
  • Main Content Width: Chiều rộng nội dung của website. Khi đánh dấu vào đây, website sẽ tự co giãn độ rộng để quảng cáo 2 bên vừa khít.
  • Show Ads on Mobile Devices: Hiển thị quảng cáo trên di động
  • Banner Left và Banner Right: Chiều rộng (width) và chiều cao (height) của quảng cáo
  • Margin Left: Khoảng cách giữa ảnh và bên trái
  • Margin Right: Khoảng cách giữa ảnh và bên phải
  • Margin Top: Khoảng cách giữa ảnh và phía trên
  • Margin Top – After Scroll: Khoảng cách giữa ảnh và phía trên sau khi kéo chuột xuống

  • z-index: điền vào 9999
  • HTML Left Code/HTML Right Code: Điền code của ảnh và liên kết chèn vào ảnh

Xong hết rồi thì bạn chọn Lưu thay đổi

Plugin này có khuyết điểm là bạn phải chèn ảnh bằng code, chứ không tải ảnh trực tiếp lên được.

Vậy là xong rồi đó. Bạn ra trang chủ và F5 lại để xem kết quả nhé.

Plugin xịn xò này được phát triển bởi anh Lê Văn Toản. Đây là Facebook của anh Toản cho bạn nào cần: https://www.facebook.com/levantoan.wp

Tổng hợp và biên soạn nội dung bởi: vothanhduy.com

Tư liệu tham khảo:

  • https://levantoan.com/devvn-float-left-right-ads/
  • https://www.pkientruc.com/2018/06/cach-tao-banner-quang-cao-truot-doc-hai.html

 

Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x