Tạo banner trượt dọc hai bên - Bản hoàn thiện

Điểm 4.6/5 dựa vào 87 đánh giá

(Traidatmui.com) – Trước đây mình có giới thiệu cùng các bạn một thủ thuật là tạo banner chạy dọc hai bên của blog. Tuy nhiên với thủ thuật cũ thì banner chỉ trượt tốt với trình duyệt IE (Internet Explorer) còn với Firefox thì banner không chạy được. Cũng chính vì hạn chế của thủ thuật trước, hôm nay mình xin giới thiệu với các bạn một bản hoàn thiện hơn, banner sẽ chạy tốt hơn trên cả hai trình duyệt. Các bước thực hiện thủ thuật này cũng không phức tạp hơn thủ thuật cũ, bạn chỉ việc làm theo một vài bước đơn giản bên dưới.


1. Đăng nhập vào tài khoản
2. Vào bố cục chọn chỉnh sửa HTML
3. Chèn code sau vào bên dưới thẻ <head>
<style type='text/css'>
#slideads{
position: absolute;
visibility: hidden;}

#slideads1{
left:0;
top:20px;
position: absolute;
}

#slideads2{
right:0;
top:20px;
position: absolute;
}
</style>
<script src='http://data-traidatmui.appspot.com/scripts/slide_ads.js' type='text/javascript'/>

4. Bây giờ save template lại và trở về phần tử trang, tạo thêm 1 phần tử HTML/Javascript
5. Thêm vào phần tử HTML/Javascript code bên dưới
<div id="slideads">
<div id="slideads1" class="slideads1">
<a target="_blank" href="http://www.traidatmui.com"><img src="http://lh5.ggpht.com/_BTztXRwC9ik/TBoAcZDNb3I/AAAAAAAAClA/BHZVjPK7MjI/GHG.png" border="0"/></a>
</div>
<div id="slideads2" class="slideads2">
<a target="_blank" href="http://www.traidatmui.com"><img src="http://lh6.ggpht.com/_BTztXRwC9ik/TBoActa51FI/AAAAAAAAClE/4cG2S6FztDI/L%3B.png" border="0"/></a>
</div>
</div>

Chỉnh code: Bạn hãy thay link ảnh trong code (dòng màu cam) thành banner của mình có thể bạn thêm độ rộng và độ cao của ảnh tùy ý.
- Thay đường dẫn cho banner tương ứng dòng màu xanh đậm trong code trên.

6. Đến đây bạn chỉ việc save lại là xong

☼ Cập nhật 04/06/2012

Ngoài ra thì bạn cũng có thể thực hiện theo các bước bên dưới, sau khi bạn thực hiện đến bước 2 như hướng dẫn ở trên thì giờ bạn thực hiện thêm các bước tiếp theo như sau:

1. Tìm đến thẻ </body> và dán vào ngay trước nó đoạn code bên dưới.
<script src="http://data-traidatmui.appspot.com/scripts/left_rightads.js" type="text/javascript"></script>

2. Giờ bạn save template lại, trở về phần tử trang thêm 1 HTML/Javascript và thêm vào code bên dưới
<div id="divAdRight" style="DISPLAY: none; POSITION: absolute; TOP: 0px">
<a href="#" target="_blank"><img src="http://lh5.ggpht.com/_BTztXRwC9ik/TBoAcZDNb3I/AAAAAAAAClA/BHZVjPK7MjI/GHG.png"/></a>
</div>

<div id="divAdLeft" style="DISPLAY: none; POSITION: absolute; TOP: 0px">
<a href="#" target="_blank"><img src="http://lh6.ggpht.com/_BTztXRwC9ik/TBoActa51FI/AAAAAAAAClE/4cG2S6FztDI/L%3B.png"/></a>
</div>

Bạn thay # thành đường dẫn của ads và link màu cam thành link ảnh của ads

3. Cuối cùng save tiện ích lại là xong.

Chúc bạn thành công

Chuyên mục:

16 nhận xét

  1. anh Dinh ơi! sao em chèn vào dưới thẻ head thì trang báo lỗi, ko thể lưu lại được.

    Trả lờiXóa
  2. Nếu có báo lỗi thì em chỉ việc bỏ thẻ đóng </script> trong code đi và save template lại nhé!

    Chào em!

    Trả lờiXóa
  3. Mình làm hoài mà ko được bạn ơi...

    Trả lờiXóa
  4. Mình đã làm như trên nhưng ko được nó chỉ hiện như hình này [http://lh4.ggpht.com/_skDm_ALRqH4/TNEiM433UbI/AAAAAAAAEMY/Ecj5d_hKX7s/Demo.jpg]
    Mong được giúp đợ....

    Trả lờiXóa
  5. một số template mới của blogger sẽ không hiển thị đúng banner khi thêm code ở phần tử HTML/Javascript, nếu blog bạn gặp tình trạng này, bạn có thể thêm code ở bước 5 vào sau thẻ <body>.Bạn chỉ thay đổi bước này thôi các bước khác giữ nguyên

    Thân!

    Trả lờiXóa
  6. Mình làm được rồi cám ơn bạn nhiều =))

    Trả lờiXóa
  7. mình cũng làm good nhưng sau nó làm cho máy cái flash mình chạy chậm quá, khi mình không sử dụng này thì mấy cái flash lại bình thường ,mong bạn hướng dẫn

    Trả lờiXóa
  8. Flash chạy chậm không phải do thủ thuật này mà nó do host bạn upload flash và ảnh hưởng từ tốc độ load của trang bạn. Nếu trang bạn nặng quá thì nó sẽ load chậm đấy bạn.

    Trả lờiXóa
  9. Thủ thuật hay lắm bạn ! Thanks !

    Trả lờiXóa
  10. Cảm ơn bạn! Mong sự đóng gop của bạn!chúc vui vẻ

    Trả lờiXóa
  11. cho vào xong
    hiển thị ok ùi
    nhưng ko kíck chọn được link là sao
    bị sao dzạ

    Trả lờiXóa
  12. Bạn thay link ảnh và url trên cho đúng nó sẽ ok

    Trả lờiXóa
  13. Cảm ơn TDM đã hướng dẫn bài viết này.
    Tuy nhiên mình làm nó bị lỗi như sau:
    banner bị chèn đè trong khuôn viên bài viết và ẩn dưới bài viết nên không nhìn thấy banner.
    Vậy muốn nó hiển thị ra ngoài khuôn viên bài thì phải làm sao?
    bạn vào sangnguyenmskg.blogspot.com thì sẽ rõ.
    Cám ơn bạn nhiều, mong sớm nhận hồi âm của bạn.
    SN-MS

    Trả lờiXóa
  14. bạn ui cho mình hỏi sau khi chèn code vào mâu rùi nhưng khi chèn vào bố cục thì mình nên đặc ở block nào để nó hiển thị hết màn hình chứ mình thấy nếu đặt ở phần head thì nó chị chạy lên xuống trong khu vực đó thui

    Trả lờiXóa
    Trả lời
    1. Đó là do trong header bạn chứa thuộc tính position:relative;. Tốt nhất bạn đặt code bước 5 trên thẻ </body>

      Xóa