Hướng dẫn cách tạo quảng cáo chạy 2 bên cho Website

Xin chào các bạn đã quay trở lại với iHuongDan. Hôm nay “Hà Nội” mát trời mình vô tình lướt qua một số website thì thấy có các banner quảng cáo chạy dọc 2 bên website rất đẹp. Mình cũng có một câu hỏi đặt ra là làm sao để làm được như vậy? Và mình cũng lượn tìm tòi rồi tổng hợp nên một đoạn code để tạo quảng cáo chạy dọc 2 bên website như ý. Và để giúp các bạn cũng có thể làm được như thế! Hôm nay iHuongDan sẽ hướng dẫn các cách tạo quảng cáo chạy dọc 2 bên website của mình.

Như chúng ta cũng đã biết thì quảng cáo là một nguồn mang đến một nguồn thu nhập cho website của chúng ta đúng không nào? Và làm sao để cho các quảng cáo đó bắt mắt và được nhiều người để ý đến thì cũng chính là lúc các nhà đầu tư rót tiền vào các quảng cáo trên website của chúng ta phải không nào? Đối với các bạn thiết kế web hiện này thì đa số website nào cũng chèn các quảng cáo chạy dọc 2 bên để kiếm thêm thu nhập cho mình. Và mình cũng vậy, không ngoại trừ nếu ai có ý định muốn đặt quảng cáo chạy dọc trên website của mình thì mình cũng rất sẵn lòng đặt nó.hihi

Đầu tiên chúng ta cũng hiểu nôm na cái quảng cáo chạy dọc 2 bên của website của chúng ta là gì? Đó chính là 2 cái ảnh được đặt vào 2 bên sườn website của chúng ta chứa nội dung quảng cáo. Mà khi người dùng cuộn trang thì 2 mẫu quảng cáo đó cũng sẽ cuộn theo trạng của chúng ta. Quảng cáo chạy dọc 2 bên website đơn giản chỉ là vậy thôi. Và bây giờ chúng ta cùng bắt tay vào công đoạn tạo quảng cáo chạy dọc 2 bên cho website của mình nhé.

Xem thêm: Cách đưa Status Facebook vào website WordPress

huong dan cach tao quang cao chay doc 2 ben website

Hiện nay thì đa số các website được các công ty thiết kế website hay các bạn freelandcer hay do yêu cầu của chúng ta thiết kế website dựa trên mã nguồn mở hay là code php. Và cũng do đó mà tùy vào một số website được được thiết kế website dựa trên mã nguồn mở hay php mà từ đó sẽ có một số cách cài đặt dòng code tạo quảng cáo 2 bên cho website sẽ khác nhau một chút. Trong bài viết này, iHuongDan sẽ hướng dẫn các bạn cách tạo quảng cáo chạy 2 bên cho website trên mã nguồn mở WordPress nhé. Các mã nguồn mở khác hay php thì các bạn có thể áp dụng tương tự và tùy biến gần giống nhé.

Đối với code tạo quảng cáo chạy dọc 2 bên cho website này có một ưu điểm đó chính là không sử dụng plugin. Hiện nay thì các code tạo quảng cáo 2 bên cho website thì đã có một số plugin hay module để tích hợp dễ dàng cho website nhưng khi sử dụng các plugin hay module đó thì nhược điểm của nó sẽ làm website của chúng ta chạy chậm đi, tỷ lệ load trang cũng vì thế mà giảm xuống. Và ưu điểm của cách tạo quảng cáo 2 bên mình sẽ hướng dẫn trong bài này đó chính là không sử dụng Plugin dó đó sẽ không làm giảm tốc độ load trang của website của bạn.

Chắc các bạn đọc đến đây cũng nóng lòng muốn biết cách tạo quảng cáo chạy dọc 2 bên cho website của mình rồi phải không nào? Và mình cũng không dài dòng nữa. Các bạn sẽ thực hiện qua 2 bước sau để tạo quảng cáo chạy dọc 2 bên cho website mình:

Xem thêm: Cách thêm BreadCrumbs trong Yoast SEO WordPress đơn giản

Bước 1:

– Đầu tiền các bạn copy và sửa đoạn code sau đây cho phù hợp với website mà bạn muốn đặt quảng cáo 2 bên lên đó:

<div id="divAdRight" style="DISPLAY: none; POSITION: absolute; TOP: 0px"> 
 <a href="https://ihuongdan.vn"><img src="http://www.upsieutoc.com/images/2016/08/10/quangcao.jpg" width="160"></a></div> 
<div id="divAdLeft" style="DISPLAY: none; POSITION: absolute; TOP: 0px"> 
 <a href="https://ihuongdan.vn"><img src="http://www.upsieutoc.com/images/2016/08/10/quangcao.jpg" width="160" /></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 = 1500;LeftBannerW = 125;RightBannerW = 125;LeftAdjust = 5;RightAdjust = 5;TopAdjust = 200;ShowAdDiv();window.onresize=ShowAdDiv;;<\/script>"); </script>

– Trong đó các bạn cần lưu ý và chỉnh sửa những thông tin sau:

URL: https://ihuongdan.vn: Đây là địa chỉ link mà các bạn muốn khi khách hàng click vào banner quảng cáo sẽ chuyển đến link đích tại đây. Các bạn thay link của các bạn vào nhé.
<img src=”…”/>: Đây là link hình ảnh quảng cáo chạy dọc 2 bên sẽ hiện thị trên website của bạn. Bạn thay link hình ảnh các bạn muốn hiển thị nhé!
Width=”160″: Đây là thông số kích thước độ rộng của hình ảnh banner quảng cáo của các bạn. Bạn thay vào cho đúng với kích thước của các bạn muốn hiện thị quảng cáo nhé.
MainContentW = 1600: Với thông số này, các bạn sẽ thay đổi nó tùy thuộc và chế độ hiển thị của website của các bạn. Nó phụ thuộc và website của các bạn ở chế độ fullwidth hay ở chế độ layout. Các bạn thay đổi cho hiển thị phù hợp với website của các bạn nhé!

LeftAdjust = 5: Đây là khoảng cách từ mép trái trang web đến banner của các bạn hiện thị quảng cáo.
RightAdjust = 5 : Đây là thông số khoảng cách từ mép phải trang web đến banner quảng cáo.
+ TopAdjust = 10 : Đây là thông số khoảng cách từ mép trên trang web đến banner quảng cáo của các bạn. Nếu như website của các bạn có chế menu hiển thị fullwidth thì các bạn nên tăng thông số này lên 100 hoặc 150 để nó không bị đè lên bởi thanh menu ngang của các bạn nhé!

Như vậy là xong công việc copy và chỉnh sửa lại code cho phù hợp với website của các bạn muốn hiện thị quảng cáo. Và chúng ta chuyển qua bước 2.

Bước 2:

– Ở bước này, các bạn chỉ việc copy đoạn code tạo quảng cáo chạy 2 bên mà chúng ta vừa sửa ở bước 1 và dán nó vào trong bất kỳ đâu trong website của chúng ta. Nói thế thôi, thông thường các bạn nên dán vào trước thẻ dóng </header> hoặc </body>.

– Trong cách này mình sẽ hướng dẫn các bạn dán ngay code tạo quảng cáo 2 bên này vào trong trước thẻ đóng </header>
– Các bạn tìm đến file header.php trong thư mục theme các bạn đang dùng và dán đoạn code trên vào trước thẻ đóng </header> nhé.
– Vậy là xong, các bạn nhấn lưu lại và quay ra trang chủ để tận hưởng thành quả nhé.

Xem thêm: Hướng dẫn cài đặt và sử dụng Plugin lấy tin tự động từ VnExpress

Kết luận

Trên đây là cách để tạo quảng cáo chạy dọc 2 bên website của các bạn một các đơn giản nhất. Với cách tạo quảng cáo chạy dọc 2 bên này các bạn không cần sử dụng đến plugin nhằm hạn chế mức tối đa sự dư thừa code để không làm ảnh hưởng đến tốc độ tải trang của website chúng ta. Nếu các bạn có thắc mắc hay câu hỏi gì cứ để lại comment bên dưới ihuongdan sẽ giúp bạn nhé. Chúc các bạn thành công!

 

Có thể bạn thích

Bình luận:

avatar
  Subscribe  
Notify of
Close