Cách tạo 2 widget riêng trong bố cục template giúp cho người sử dụng giao diện dễ nhìn thấy, dễ chèn mã quảng cáo qua đó giúp cho thao tác d...
Cách tạo 2 widget riêng trong bố cục template giúp cho người sử dụng giao diện dễ nhìn thấy, dễ chèn mã quảng cáo qua đó giúp cho thao tác dễ dàng hơn.
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ụ
<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>
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 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'>
Bình luận