Tạo Pop-under Ads cho Blogger


Blogger
Đối với các Blogger, việc đặt các banner quảng cáo (ads) trên Blog sẽ gây phiền hà đối với người đọc. Tuy nhiên, đôi khi bạn có nhu cầu đặt ads để quảng cáo một dịch vụ nào đó, vậy hãy dùng Pop-under Ads.

Đây là một giải pháp tốt dùng để thay cho các Pop-up Ads thông thường. Không như pop-up (quảng cáo tự nhảy ra, tạo 1 cửa sổ mới), ở đây pop-under chỉ trượt kèm theo trỏ chuột, và người đọc hoàn toàn có thể tắt nó một cách dễ dàng. Nếu bạn muốn tạo Pop-under ads, hãy thực hiện các bước dưới đây.
  1. Đăng nhập vào Blogger > Layout > Edit HTML (không cần Mở rộng Mẫu tiện ích).
  2. Tìm thẻ ]]></b:skin> trong template, và replace nó bằng đoạn code sau:
        #popad{
            padding:5px;
            border:1px solid #999;
            background:#eee;
            width:X px;
        }
        #popad_footage{
            width:X px;
            height:Y px;
            background:url(Link hình ads) top left no-repeat;
        }
        #popad_footage a{
            display:block;           
            width:X px;
            height:Y px;
            text-indent:-600px;
            overflow:hidden;
        }
        #popad.dynamic #popad_footage{
            width:X px;
            height:Y+Z px;
            background:url(Link hình ads có kèm nút Close) top left no-repeat;
        }
            #popad.dynamic #popad_footage a#popad_close{
            color:#ddd;
            height:Z px;
        }
        #popad.dynamic{
            position:absolute;
            top:3em;
            right:15%;       
        }
        html>body #popad.dynamic{
            position:fixed;
        }
    ]]></b:skin>
        <script src='http://boyprodx.110mb.com/BlogTools/popundermagic.js' type='text/javascript'/>
    Lưu ý : Đoạn CSS từ ]]></b:skin> trở lên trên cần phải hiệu chỉnh, mình sẽ hướng dẫn ở dưới.
  3. Save lại template và chuyển sang tab Page Elements.
  4. Tạo 1 phần tử HTML với nội dung :
    <div id="popad"><div id="popad_footage">
    <a href="Link liên kết"></a>
    </div></div>
  5. Save lại phần tử và kiểm tra kết quả.
Hiệu chỉnh bước 2
Các giá trị :
- X : Chiều rộng ads.
- Y : Chiều cao ads.
- Z : Độ dài khoảng cách từ nút Close tới ads.
Giá trị
Để biết được chính xác các giá trị này, đơn giản nhất hãy bật chế độ xem Title trong PC.
Bật chế độ xem Title
Thiết lập vị trí xuất hiện của ads trên Blog :
- #popad.dynamic{position:absolute;top:3em;right:15%;} : Ads sẽ cách phía trên 3em và bên phải 15% chiều rộng trình duyệt.

Kết quả
Xem Screenshot bên dưới hoặc Demo tại đây (View Source để hiểu thêm về đoạn code).
Kết quả

Hy vọng thủ thuật tạo Pop-Under Ads sẽ hữu ích đối với bạn. Chúc vui !

3 Nhận xét on "Tạo Pop-under Ads cho Blogger"

NAD on 7 August 2009 at 18:07 said...

Bóc tem bài mới, thanks :D

vnblognet [dot] com on 9 May 2010 at 15:53 said...

bài này hay quá, mình vừa copy và trình bày lại rồi post lên www.vnblognet.com tại địa chỉ http://www.vnblognet.com/2010/05/tao-pop-under-ads-hien-thi-quang-cao.html

Mình có ghi rõ nguồn bằng linkback kèm theo.

Xin lỗi boy vì làm xong mới hỏi ý kiế nhé.

À chúng ta có thể trao đổi link cho bhau ko boypro ơi?

Rùa Biển on 10 May 2010 at 21:04 said...

hok dám xài cái này, sợ bị bà kon chém ;))

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Post a Comment

Cám ơn bạn đã đọc bài viết tại blog của boyproDX.
Nếu cảm thấy blog có nhiều bài hữu ích , các bạn hãy Bookmark(nhấn Ctrl_D) hoặc Đăng kí nhận tin qua RSS site mình để không bỏ qua các bài viết tiếp theo của mình. Chúc các bạn vui vẻ !

Logo Exchange (Tạm ngưng)

 

Chuyên trang blog về tin học | Copyright © 2009 | Best view at 1024x768 with Firefox 3