Thủ thuật tự động thay đổi banner cho Blogger


Như các bạn đã biết, nền blog Wordpress có plugin cho phép người dùng thay đổi banner của Blog mỗi khi mở trang mới , hay refresh lại trang thuộc blog đó , đây cũng là một thủ thuật khá hay để làm đẹp cho Blog. Vậy, đối với nền Blogger của chúng ta thì phải làm sao , bài viết hôm nay sẽ hướng dẫn cho bạn đấy .

Đầu tiên, bạn cần phải xác định chính xác kích thước của hình ảnh có thể làm banner . Việc này cũng không khó lắm, bạn có thể kiểm tra kích cỡ banner ban đầu của Blog (được tác giả của mã nguồn template sử dụng) rồi tạo 1 banner mới với kích cỡ đó.

Tiếp theo , bạn hãy kiểm tra phần header trong Template của bạn có bất kì đoạn text hay hình ảnh nào không . Nếu có , bạn cần phải xóa chúng để banner không bị các phần tử trên chiếm chỗ.
 
Bạn cần phải xóa các phần tử tại phần header để giành chỗ cho banner của bạn.

Sau đó, bạn tìm đến đoạn code sau (nằm ở khoảng dưới thẻ <body> ) ...
<div id='top-wrapper'>
 ... và thêm code này vào ngay bên dưới :
<div style='padding-bottom:3px; padding-top:3px;text-align:center;'>
<a href='http://boyprodx.blogspot.com'>
<script type='text/javascript'>
var banner= new Array()

banner[0]="<img src='http://img24.imageshack.us/img24/1162/banner2009sa2.jpg'/>"
banner[1]="<img src='http://img2.pict.com/13/50/03/4aaab158901452fa0866ebd488/gizp1/800/img24.jpg'/>"
banner[2]="<img src='http://img2.pict.com/2c/96/04/a2f6f5f5c1d56d1946d5a41ae4/GMg11/img29.jpg'/>"
banner[3]="<img src='http://img2.pict.com/9c/09/6a/a23980569839f36a8d3d250567/xbQ69/zawp4.jpg'/>"
var random=Math.round(3*Math.random());

document.write(banner[random]);
</script></a>
</div>
 
Dán code vào bên dưới đoạn <div id='top-wrapper'>

Bây giờ bạn chỉ việc thay đổi lại link http://boyprodx.blogspot.com và toàn bộ link banner bên trên thành các link của Blog bạn. Nếu muốn tạo thêm nhiều banner , bạn chỉ việc dán thêm nhiều dòng code banner[số thứ tự]="<img src='Link hình'/>"  .Vậy là xong rồi đấy.

Lưu ý :
1/ Vì mỗi người sử dụng mỗi template khác nhau, do đó việc một số code trong mã nguồn không giống nhau là chuyện thường gặp. Ở đây, có thể bạn sẽ không tìm thấy đoạn <div id='top-wrapper'> , hãy thay bằng một số đoạn code khác như <div id='header-wrapper'> , <b:widget id='Header1' locked='true' title='Header' type='Header'> ... hoặc tìm với từ khóa header .
2/ Nếu bạn sử dụng 5 banner, hãy chèn số '4' thay cho số 3 ở đoạn var random=Math.round(3*Math.random()) . Tương tự , nếu có 3 banner thì nhập '2' vào đoạn đó.
3/ Mình đã test nhiều lần thì nhận thấy rằng :  banner[0] sẽ chỉ xuất hiện vào lúc truy cập vào Blog lần đầu tiên, còn sau đó thì chỉ có những banner khác xuất hiện. Nếu có thể, bạn hãy giúp mình test lại xem có chính xác không nhé !

P/s : Vậy là mình đã giới thiệu xong Thủ thuật tự động thay đổi banner cho Blogger . Nếu bạn có ý kiến, thắc mắc gì, hãy để comment lại cho mình nhé. Mình sẽ trả lời trong thời gian ngắn nhất. Thân !

14 Nhận xét on "Thủ thuật tự động thay đổi banner cho Blogger"

NAD on 3 March 2009 at 18:27 said...

Hay lắm, mình sẽ thử áp dụng xem sao. Thanks :D

Benjami Tennyson on 3 March 2009 at 21:00 said...

Hì, không có chi . Thủ thuật này là do 1 bạn blogger nhờ mình giúp , nên sẵn tiện mình post lên luôn cho mọi người tham khảo :D

Frequent Reader on 11 March 2009 at 17:48 said...

bạn ơi cho mình hỏi làm sao để Comment được hình ảnh và video trong blogspot giống như trang này http://pic-memory.blogspot.com

starburst_bms said...

tuyet voi, mình đã mong code nì lâu lém lém rùi, thanks boy nhìu thiệt nhìu :x

Benjami Tennyson on 12 March 2009 at 10:07 said...

@Frequent Reader : Mình đã xem qua thử blog bạn yêu cầu , có thể admin blog đã dùng script để thêm khả năng đăng ảnh và video vào khung comment. Hiện tại mình vẫn chưa tìm hiểu kĩ lắm , có lẽ phải lục lọi trên Google cái rồi mới test thử xem sao :D .
@starburst_bms : Hì, bạn áp dụng thử xem có hiệu quả ko nhé ^^!

starburst_bms on 18 March 2009 at 19:08 said...

tuyệt vời, tớ làm đc rùi, yeah, thanks bạn nhiều lắm lắm :x :x

Nam said...

ban lam sao duoc vay share di!

Benjami Tennyson on 20 March 2009 at 19:56 said...

@starburst_bms : Hì ,ko có chi ^^! Cái thủ thuật này bạn đã đưa mình lâu rồi nhưng do bận quá nên giờ mới đăng :D . Tuy nhiên ở bài đăng gốc có một số lỗi nên mình đã sửa lại để áp dụng thành công. Chúc vui nhé !
@Nam : Thì mình đã share bên trên rồi đấy bạn :D

starburst_bms on 25 March 2009 at 23:26 said...

à, mình gặp 1 sự cố nho nhỏ là blog của tụi mình khi dùng trình duyệt ie thì banner hiện ra chuẩn, đẹp, nhưng với fire fox thì khoảng cách giữa thanh menu trên với banner nó bỗng cách ra 1 khoảng dài, hix, ko bít lỗi này có liên quan đến random banner ko bạn nhỉ :P ?

Benjami Tennyson on 29 March 2009 at 12:19 said...

Không sao đâu bạn, có thể do mã nguồn của bạn chưa tương thích hoàn toàn với Firefox nên xảy ra hiện tượng như thế (blog của mình cũng chưa tương thích với IE nè :D).
Mình xin gợi ý 2 hướng khắc phục nhé :
1. Bạn hãy thử chỉnh lại các thông số padding-bottompadding-top của đoạn code trên sao cho phù hợp.
2. Resize lại banner , giảm độ rộng xuống 1 chút.
Chúc bạn thành công nhé !

Tony Thái on 31 May 2009 at 15:07 said...

http://blogs-vn.tk/ moi vieng tham va dang ky

PCnewSoft on 17 June 2009 at 16:09 said...

thank you

Hoaikemui on 1 April 2012 at 18:47 said...

A ơi! Cho em hỏi về blogspot tý.
1. Làm sao có thể đưa baner vào blogspot của mình?
2. Làm sao có thể tạo được các chuyên mục tương tự như: Sự kiên , xã hội, thế giới, sức khỏe.... trong blogspot giống như trên trang dân trí vậy a?

Nhờ A hướng dẫn cụ thể cho em với nhé! Em cám ơn A nhiều, Chúc A mọi điều tốt đẹp!

kim Huyên on 16 July 2012 at 04:15 said...

Chào bạn nói đến baner mình đã thay nhiều lần mà không được
bạn có thể vào qua http://dongan2.blogspot.com/ để xem nhìn nó rất là xấu,
baner chỉ được 1/2 của trang thôi mình đã thử làm như cách của bạn mà không thành công, hy vọng được bạn chỉ giáo. mình cần bài ngày trước ngày 18/7 nếu sau thì cũng xin bạn giúp một tay mình đan cần gấp để làm bài thi tks bạn được thì mong bạn send qua mail kimhuyen0506@gmail.com giúp

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

Post a Comment

Cám ơn bạn đã đọc bài viết tại blog của boyproDX.
Nếu cảm thấy blog có nhiều bài hữu ích , các bạn hãy Bookmark(nhấn Ctrl_D) hoặc Đăng kí nhận tin qua RSS site mình để không bỏ qua các bài viết tiếp theo của mình. Chúc các bạn vui vẻ !

Logo Exchange (Tạm ngưng)

 

Chuyên trang blog về tin học | Copyright © 2009 | Best view at 1024x768 with Firefox 3