Loading post navigation ...
 
 

Pro page

27
Nhận xét

[ Yêu cầu ] Tạo banner quảng cáo trượt dọc 2 bên (Với việc ẩn hiện tùy vào độ phân giải của màn hình)

| by Phan Dũng | views

Hãy nhấn thanks để ủng hộ tác giả

Theo yêu cầu của bạn Ngân (www.blogtruyen.com)
[FD's BlOg] - Chúng ta đã khá quen với banner trượt quảng cáo trượt dọc ở 2 bên của 1 site nào đó. đa phần các banner này được thiết kế nằm sát 2 mép (trái & phải) của 1 website nào đó, và nó luôn trượt theo khi ta di chuyển chuột. Ở bài hướng dẫn này mình sẽ giới thiệu 1 cách hiển thị khác, đó là banner quảng cáo sẽ nằm ở 2 mép trái và phải của màn hình hiển thị, và việc hiển thị của nó sẽ phụ thuộc vào chế độ xem của màn hình.


Xem DEMO
(lưu ý : nếu bạn không thấy banner quảng cáo thì zoom nhỏ lại (Ctrl -) banner sẽ hiển thị, nếu muốn test không hiển thị thì zoom lớn lên (Ctrl +))

Hình ảnh minh họa :


☼ Các bước thực hiện :
1. Vào bố cục
2. Vào chỉnh sửa code HTML
3. Chèn đoạn code bên dưới vào trước thẻ đóng </head>

<style type="text/css">
.slideads1 {text-align:left}
.slideads2 {text-align:right}
</style>

4. Save template.
5. Tạo 1 widget HTML/javascript và dán code bên dưới vào:

<div id="divAdLeft" style="position: absolute; width: 110px; float: left; left: 0pt; top: 0.00000103038px;">

<div class="slideads1">
<a href="http://www.fandung.com/"><img src="link banner 1" border="0"></a>
</div>

</div>

<div id="divAdRight" style="position: absolute; width: 120px; float: right; left: 989px; top: 0.00000100252px;">

<td class="slideads2">
<a href="http://www.fandung.com/" target="_blank"><img src="link banner 2" border="0"></a>
</div>

</div>

<script language="JavaScript" src="http://data.fandung.com/js/slide_ads.js"></script>
- để đơn giản các bạn có thể gộp code của bước 3 và 5 vào chung trong bước 5, tức là dán tất cả code của thủ thuật vào widget HTML/javascript.
- Ngoài ra code ở bước 5 ta có thể dán nó thẳng vào trong code template.
- Lưu ý : file JS http://data.fandung.com/js/slide_ads.js luôn phải đặt ở vị trí sau cùng của code thủ thuật. Tức là phải load phần code HTML trước phần code JS.


Ở thủ thuật này, với màn hình có độ phân giải trên 1024px thì banner mới hiển thị. Chi tiết có thể xem trong file slide_ads.js

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


Enter your mail address:

27

share4vnn

hic..dao nay em di lam tu 6h30 sang toi 5h chieu ..met toi tam mat mui

fandung

anh cũng thế .. hic :(

Ác Quỷ

2 chiếc xuồng bể đang trôi..............

mình là chiếc thứ 3 :D

mmovn

dạo này thì e khỏe sau 1 vụ ốm h1n1 :D khà khà...
test thử thôi... chứ h e chưa dùng đến :D

Unknown

Woa !!!! Mịn và mượt quá xá :D
Thank Dzũng nhiều :)

Nhưng có thể làm nó tự động nhiều hơn ko ??

Cụ thể là vầy : Mình muốn áp dụng nó cho trang đọc truyện ( x1.blogtruyen.com )

Và trang này mình đã chỉnh phần body,post-body ..... đều có width:100% nghĩa là trang sẽ có chiều rộng bằng với chièu rộng của hình lớn nhất trong bài (Giãn nở lung lung )

Nên mình muốn banner lúc nào cũng xuất hiện nhưng sẽ biến mất nếu Độ rộng của phần (post-body + Banner) lớn hơn độ phân giả màn hình

cái này mình nghĩ Dzũng làm đc :D , Thực chất về cái này mình cũng bị rối - nên cũng không thể giải thích rõ ràng đc :(( ,hy vọng Dzũng Hiểu

vutd

Xin phép được truy xuất bài viết này trên www.vietutd.com

http://www.vietutd.com/?mn=1&url=http%3A%2F%2Ffandung.blogspot.com%2F&label=&num=464

vnbook.tk

Chào bạn fandung, mình muốn làm một cái menu giống như trang này http://phununet.com . Bạn xem giúp mình với.

vutd

Có thể làm gì với một cái lông?...

http://www.vietutd.com/?mn=4&url=http%3A%2F%2Fcuriousphotos.blogspot.com%2F&label=&num=2478

Cao Lâm

Chúng ta có thể tùy biến code này để đặt quảng cáo của adnet vào nếu các bạn muốn đặt quảng cáo của adnet vào thì làm theo bước sau
+Các bạn chú đoạn code này
của link banner Và thay nó bằng đoạn code của adnet là dc
http://vn360.blogspot.com

fandung

@vnbook.tk : ok, sẽ test cho bạn

Trong Son

bạn có cách nào để fix trên firefox ko, trên firefox nó ko hoạt động tốt bạn à :(

Khách (ẩn danh)

FF không chạy được! xin hướng dẫn với :(

Unknown

anh dung oi ! anh fix lai duoc khong ! tren firefox nó khônghoạt động ổn định ! toàn bị lệch về bên trái ý và nó không chuyển động

Duy Le

ban oi, fix code cho firefox duoc ko

Khách (ẩn danh)

Dạo này chắc Dũng bận quá! Nếu được xin Fix cho chạy trên FF bạn nhé, hoặc ai biết làm xin giúp anh em! Thanks

Điện Tử ChipKool

anh oi anh giup em lam cai code comment de nguoi khac binh luan cho bai viet cua minh.trong khung do co may cai hinh mat cuoi bieu lo cam xuc.em cam on anh

Điện Tử ChipKool

anh oi anh giup em lam them cai co tao modune tep tai lieu.De khi kich cao no thi no mo ra nhieu tep nho hon,nhu trong computer ay.Vi em muon dua bai tap len cac tep do.anh giup e nha.em cam on anh,:-*

Khách (ẩn danh)

khong chay trenn firefox duoc ban oi

Kho Sách Nói

Cái link .js chết rồi. Chán quá. Blog này toàn link chết??? Tác giả tự sửa đi nhé.

Khách (ẩn danh)

Cảm ơn bài viết của các anh rất nhiều ^^

Unknown

sao e dùng hok dc nhỉ.hix.hok hiện ra cái gì cả.

Unknown

Bạn Dũng ơi, bây giờ mình muốn tạo 1 hình khác thì phải làm sao? nhờ bạn chỉ giúp

Unknown

Không chạy được Dũng ơi!
www.rosehuynhshop.blogspot.com

vanly__dochanh

anh Dũng re-upload cái js lên 1 host nào đó với.

Unknown

bài hướng dẫn của bạn không trượt banner

đây là hướng dẫn chuẩn nè:

http://www.itechplus.info/2011/03/banner-quang-cao-truot-doc.html

bạn chỉnh lại bài đi nhé
mình áp dụng theo bạn nhưng không đc

Unknown

demo: http://www.nitqp.com/

Unknown

Đx làm và rất tốt , cảm ơn anh dũng nghe
http://mrthanh8x.blogspot.com/



☺ Các bạn có thể viết lời bình của mình cho bài viết, và tuân thủ một số quy tắc sau:
» Các bài comment phải nghiêm túc, không dung tục, không spam.
» Nội dung phải liên quan tới chủ đề bài viết.
» Có thể sử dụng thẻ trích dẫn [quote], cấu trúc thẻ như bên dưới :

[quote=AUTHOR name=fdquote]NỘI DUNG[/quote]

» Có thể sử dụng các thẻ <b>,<i>,<a>.


BlOg FD chính thức đóng comment của khách ẩn danh.

BlOg FD.

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

Newer Posts Older Posts Home