Home » MẸO VẶT BLOGGER »
Banner random
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 (Blogspot) 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 làm điều này .
Đầu tiên, bạn cần phải xác định kích thước của khung banner (dành cho những người mới tạo blog) để tạo ảnh cho thích hơpn (việc này cũng không khó lắm). Thứ 2 bạn phải có sẵn 1 số lượng banner đủ lớn để làm điều này, thường thì 10 banner cũng có thể đáp ứng được việc này. (Blog của mình hiện tại sử dụng tới 30 banner ^^)
Tiếp theo , bạn hãy kiểm tra trong phần header đã có đ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ỗ.
Thứ 2 nữa là đối với các Template mới, sẽ có các Widget tiêu đề mặc định (không phải thanh navbar), bạn cũng cần phải xóa nó đi để nó không chiếm chỗ của banner.
Để xóa widget Titlenày các bạn làm như sau :
- Vào phần chỉnh sửa Code HTML (nên save code template của mình lại )
- Tìm đọan code sau :
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
Theo ngay sau nó sẽ là:
<b:widget id='Header1' locked='true' title='FD's BlOg (Tiêu đề)' type='Header'>
<b:includable id='main'>
<b:if cond='data:useImage'>
<b:if cond='data:imagePlacement == "REPLACE"'>
<!--Show just the image, no text-->
<div id='header-inner'>
<a expr:href='data:blog.homepageUrl' style='display: block'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
</a>
</div>
<b:else/>
<!--
Show image as background to text. You can't really calculate the width
reliably in JS because margins are not taken into account by any of
clientWidth, offsetWidth or scrollWidth, so we don't force a minimum
width if the user is using shrink to fit.
This results in a margin-width's worth of pixels being cropped. If the
user is not using shrink to fit then we expand the header.
-->
<div expr:style='"background-image: url(\"" + data:sourceUrl + "\"); " + "background-position: " + data:backgroundPositionStyleStr + "; " + data:widthStyleStr + "min-height: " + data:height + "px;" + "_height: " + data:height + "px;" + "background-repeat: no-repeat; "' id='header-inner'>
<div class='titlewrapper' style='background: transparent'>
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>
</div>
<b:include name='description'/>
</div>
</b:if>
<b:else/>
<!--No header image -->
<div id='header-inner'>
<div class='titlewrapper'>
<h1 class='title'>
<b:include name='title'/>
</h1>
</div>
<b:include name='description'/>
</div>
</b:if>
</b:includable>
<b:includable id='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</b:includable>
<b:includable id='description'>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</b:includable>
</b:widget>
Xóa tất cả chúng--> như thế ta đã xóa được Widget tiêu đề. (xem hình minh họa)
Trước khi chưa xóa:
Sau khi xóa :
Như vậy đã xong bước 1, sang bước 2 là chèn code JS cho Banner Random.
- Đầu tiên tìm đến dòng (nằm ở khoảng dưới thẻ )
<div id='top-wrapper'>hoặc các code tương tự như:
<div id='outer-wrapper'>Hoặc thẻ :(thẻ này có thể đặt sau hay trước cũng được)
<div id='header-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://{tên blog của bạn}.blogspot.com'>
<script type='text/javascript'>
var banner= new Array()
banner[0]="<img src='{link banner0}'/>"
banner[1]="<img src='{link banner1}'/>"
banner[2]="<img src='{link banner2}'/>"
banner[3]="<img src='{link banner3}'/>"
var random=Math.round(3*Math.random());
document.write(banner[random]);
</script></a>
</div>
Chú ý:
1.{tên blog của bạn} : tên blog của bạn (link blogspot của bạn) (phần này để tạo liên kết tớ trang Blog của bạn, có không có cũng không sao, tùy mỗi người ).
2. {link banner1} : link bạnner của bạn cần hiển thị. (bạn nên tạo cho mình chừng chục cái banner rồi up lên host nào đó, sau đó lấy link dán vào code trên).
3. Math.round(3*Math.random() : số 3 ở đây tương ứng với 4 banner, nếu bạn có10 banner thì số này sẽ là 9.
Sau đó Save Template.
►Sau khi hòan thành mỗi lần bạn load trang chương trình sẽ hiện 1 banner khác nhau (như blog của mình, xem hình bên dưới)
Lưu ý : việc này làm có thể tạo 1 số ảnh hưởng tới giao diện của blog bạn (tùy theo template bạn đang dùng), tuy nhiên nó cũng chỉ là ảnh hưởng nhỏ, ví dụ nhưbackground..., việc hiệu chỉnh lại cũng rất đơn giản nếu bạn có 1 chút kiến thức về CCS.
Chúc các bạn thành công.
theo fandung
Sưu tầm bởi : www.meovatcuocsong.blogspot.com
Posted in
MẸO VẶT BLOGGER
Bài viết liên quan
Nếu bạn thích bài này thì hãy điền email để nhận bài đăng mới.
BÀI ĐĂNG NỔI BẬT
-
Hướng dẫn nuôi cá rồng - Arowana Theo văn hóa Trung Quốc, nuôi cá rồng đỏ trong nhà sẽ mang lại sự may mắn và thịnh vượng, chính vì thế m...
-
Nhiều người dùng vì ham rẻ mà mua nhầm iPhone 4 nhái . Loạt ảnh dưới đây giúp bạn so sánh iPhone 4 thật và giả. Hộp đựng điện thoại iPhone...
-
Đây là website chính thức do mr.Đông phát hiện ra http://www.pearsonlongman.com/newcuttingedge/ New Cutting Edge Elementary Student...
Bình luận
Nhãn
AFRICA
(1)
CÔNG NGHỆ
(15)
HỌC TIẾNG ANH
(11)
karaoke
(7)
kế toán
(1)
KINH DOANH
(2)
KỸ NĂNG
(6)
m
(3)
MẸO CHỮA BỆNH
(14)
MẸO VẶT BLOGGER
(100)
MẸO VẶT GIA ĐÌNH
(5)
MẸO VẶT GIAO TIẾP
(12)
MẸO VẶT HỌC HÀNH
(10)
MẸO VẶT KINH DOANH
(30)
MẸO VẶT LÀM ĐẸP
(57)
MẸO VẶT MÁY TÍNH
(49)
MẸO VẶT NẤU NGON
(41)
MẸO VẶT THÀNH CÔNG
(1)
MẸO VẶT TỔNG HỢP
(39)
PHẦN MỀM
(64)
Sức khỏe bà bầu
(6)
TEMPLATE
(72)
THỜI TRANG
(1)
THỦ THUẬT
(14)
TIN TỨC
(224)
TÌNH YÊU-GIỚI TÍNH
(7)
tiq
(1)
VIDEO HÀI
(1)
windows
(3)
Xem phim
(1)
0 nhận xét cho bài đăng này
Hãy để lại nhận xét nếu bạn thích bài đăng này