sangnguyenMS

Nghiên cứu, Học tập, Trao đổi

Tạo banner trượt dọc hai bê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{
float:left;
margin-left: 20px;}

#slideads2{
float:right;
margin-right: 20px;}
</style>
<script src='http://traidatmui-tips.googlecode.com/files/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDeejgr76zTGaI5OF8v8jTGr4O7Ri0WdzemgRjPWdnmyH9nLkA9aHrE_VYU74DO5omkhAlq_XBVsqNfjxiSvl8gnhQYyDY8Y-eivs9iPG7Xh56YQASqW8dd397y0JCL7CrKAEQim4hWkjo/" border="0"/></a>
</div>
<div id="slideads2" class="slideads2">
<a target="_blank" href="http://www.traidatmui.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPKPJu5H72tFU_sT9Rkv8z-pazGMOAi6b3MLmZ67J7wjXSKxk03lg7TywRVcP6-tesN6n09kmKCAuNnCyz4qy_ExDZA68BZk053T6u0yjdU4XctupALe4aK5ELTg1rZQsKFSa46dnraW-f/" 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

Chúc bạn thành công
Nguồn traidatmui.com

Đăng nhận xét

[blogger]

MKRdezign

Biểu mẫu liên hệ

Tên

Email *

Thông báo *

Được tạo bởi Blogger.
Javascript DisablePlease Enable Javascript To See All Widget