Hướng dẫn tạo widget trong bố cục chèn mã quảng cáo adsense chạy dọc hai bên Blog

So với cách chèn trực tiếp mã quảng cáo trong template hoặc chèn mã quảng cáo vào một widget html bất kỳ bên sidebar hay dưới footer thì cách tạo hai widget riêng trong bố cục trông có vẻ chuyên nghiệp hơn nhiều giúp cho người sử dụng giao diện khi vào bố cục template dễ nhìn thấy và dễ dàng chèn mã quảng cáo hơn vì nó được phân loại so với những widget khác.

Phương pháp này áp dụng cho những bạn thiết kế template xem hình demo bên dưới để thấy rõ hơn

Cách thực hiện cũng tương đối đơn giản bao gồm các bước sau đây

Bước 1: Tạo 1 hoặc 2 section để chứa widget html

Nếu là một section thì chứa 2 widget còn nếu là hai section thì mỗi section chứa 1 widget. Mình khuyến khích đặt hai section vì có thể đặt tên cho cả hai dễ nhìn hơn. Phần section này có thể đặt trước footer ví dụ

Copy

<b:section class='ads-left' id='banner-trai' name='Ads 90x720 (Banner Left)' showaddelement='true'></b:section>

<b:section class='ads-right' id='banner-phai' name='Ads 90x720 (Banner Right)' showaddelement='true'></b:section>

Khi thêm xong lưu template vào phần Bố cục sẽ thấy 2 section ngay trên footer chọn thêm mỗi section một tiện ích html, sau đó vào lại chỉnh sửa template khóa section và tiện ích vừa thêm như sau:

- Đối với section thì thay showaddelement='true' bằng showaddelement='false'
- Đối với widget thì thay locked='false' thành locked='true'

Bước 2: Tạo css cho widget thêm trước </b:skin>

Copy

body#layout #banner-trai{float:left;width:44.5%} // Cố định bên trái bố cục

body#layout #banner-phai{float:right;width:44.5%} /// Cố định bên phải bố cục

.ads-right,.ads-left{width:155px;position:fixed;top:0}

.ads-left{left:0;float:left}

.ads-right{right:0;float:right}

@media screen and (max-width:1440px){.ads-right,.ads-left{width:145px}}

@media screen and (max-width:1366px){.ads-right,.ads-left{width:135px}}

@media screen and (max-width:1180px){ads-right,.ads-left{display:none}}

Với độ rộng width tùy thuộc vào độ rộng của main-wrapper ở phần dư hai bên bạn có thể điều chỉnh cho phù hợp. Trong trường hợp menu cố định khi lăn chuột thì căn cứ vào độ cao của menu mà điều chỉnh top cho phù hợp ví dụ thanh menu có height:35px thì đặt .ads-right,.ads-left có top:35px. Một điều nữa bạn đặt thuộc tính position: relative; cho footer để khi lăn chuột quảng cáo chạy xuống thì footer sẽ che lấp

Bước 3: Chèn mã quảng cáo adesnse

Đăng nhập vào adesnse tạo đơn vị quảng cáo mới chọn loại quảng cáo văn bản/hình ảnh với kích thước đáp ứng với độ rộng của vùng chứa

Bước 4: Chèn mã quảng cáo vào tiện ích

Khi lấy mã quảng cáo bạn truy cập phần bố cục chỉnh sửa tiện ích chèn mã quảng cáo

Kết quả

Phần mở rộng chỉ cho quảng cáo xuất hiện ở những trang nhất định thì đặt điều kiện cho widget ví dụ bạn muốn quảng cáo xuất hiện ở tất cả các trang nhưng không xuất hiện ở trang chủ thì thêm cond='!data:view.isHomepage' trong <b:widget... ví dụ

<b:widget cond='!data:view.isHomepage' id='HTML10' locked='true' title='' type='HTML' visible='true'>

Hoặc chỉ xuất hiện trong các trang index mà không phải là trang bài viết hay trang tĩnh và không xuất hiện ở trang tìm kiếm

<b:widget cond='data:view.isMultipleItems and !data:view.isSearch' id='HTML10' locked='true' title='' type='HTML' visible='true'>

Hoặc chỉ xuất hiện ở trang bài viết và trang tĩnh

<b:widget cond='data:view.isSingleItem' id='HTML10' locked='true' title='' type='HTML' visible='true'>