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

(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

Xem khác cùng chủ đề

16 nhận xét | Viết lời bình

9/16/2010 10:08:00 CH Trả lời

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.

Admin
9/16/2010 10:13:00 CH Trả lời

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!

11/03/2010 01:42:00 SA Trả lời

Mình làm hoài mà ko được bạn ơi...

11/03/2010 01:51:00 SA Trả lời

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 đợ....

Admin
11/03/2010 07:46:00 CH Trả lời

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!

11/05/2010 04:00:00 SA Trả lời

Mình làm được rồi cám ơn bạn nhiều =))

1/28/2011 11:50:00 CH Trả lời

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

Admin
2/07/2011 05:36:00 SA Trả lời

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.

2/28/2011 08:52:00 SA Trả lời

Thủ thuật hay lắm bạn ! Thanks !

Admin
3/01/2011 02:10:00 SA Trả lời

Cảm ơn bạn! Mong sự đóng gop của bạn!chúc vui vẻ

9/25/2011 02:03:00 SA Trả lời

cho vào xong
hiển thị ok ùi
nhưng ko kíck chọn được link là sao
bị sao dzạ

Admin
9/25/2011 02:31:00 SA Trả lời

Bạn thay link ảnh và url trên cho đúng nó sẽ ok

1/11/2012 06:22:00 SA Trả lời

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

7/20/2012 01:20:00 SA Trả lời

thanks

9/28/2012 06:28:00 SA Trả lời

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

Admin
9/28/2012 09:53:00 CH Trả lời

Đó 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>

Bạn nhập từ: cungly Bạn nhập từ: lleu Bạn nhập từ: kkrong Bạn nhập từ: cuoilon Bạn nhập từ: roile Bạn nhập từ: hehehe Bạn nhập từ: byebye Bạn nhập từ: idontknow Bạn nhập từ: votay more »

Giải pháp bán hàng online Số 1 Việt Nam
Lên đầu trang Xuống cuối trang