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.DEMO >>
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>
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
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
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'/>
#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/AVvXsEjo0x6gNSkRZdKmHUWO7ezyr9eAE8fhlHZ8eHD56w4L-0Ri6QDzHfk1bTEB7lpKR-vpHp1rHC77DuNSFUy41CXR1ULQ4PMAyAw1izzAV1Qf6Fo1hi5NHsSsaADSrzWjZefPQDzxFor-D2_D/" 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/AVvXsEjtuyVZRypLiLaqOM26keQcnzggzT8HRbVnoh5XmQxJEcS06vBiulPHk4JZzAijGGxUPg2o6i6LJc1egpJEJ4ErIYHLbSYGfshF1qjMh0STiLoD9p5cXJUq7UBKAEU0u9LfZgwGzirSz2ew/" border="0"/></a>
</div>
</div>
<div id="slideads1" class="slideads1">
<a target="_blank" href="http://www.traidatmui.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo0x6gNSkRZdKmHUWO7ezyr9eAE8fhlHZ8eHD56w4L-0Ri6QDzHfk1bTEB7lpKR-vpHp1rHC77DuNSFUy41CXR1ULQ4PMAyAw1izzAV1Qf6Fo1hi5NHsSsaADSrzWjZefPQDzxFor-D2_D/" 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/AVvXsEjtuyVZRypLiLaqOM26keQcnzggzT8HRbVnoh5XmQxJEcS06vBiulPHk4JZzAijGGxUPg2o6i6LJc1egpJEJ4ErIYHLbSYGfshF1qjMh0STiLoD9p5cXJUq7UBKAEU0u9LfZgwGzirSz2ew/" 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
Labels:
Thủ thuật cơ bản
Previous Article
Responses
1 Respones to "Tạo banner trượt dọc hai bên - Bản hoàn thiện"
Bạn vui lòng ghi nguồn cho bài viết của traidatmui.com.tks
24 December 2010 at 07:16
Post a Comment